Menu deslizante con efectos

Parece sencillo, pero resulta muy efectivo. Y tenemos, al menos, tres efectos donde elegir (me quedo con el "bounce" y el "click"). Para saber de qué hablo, podéis echar un vistazo a mi Prueba, en la cabecera de las entradas: sólo teneéis que pasar el ratón por encima de "menú" y ver cómo se despliegan los items de menú.

La verdad es que el autor no da muchas "pistas", salvo esta Pieza de código que provee en su en su página.

Y como advierte de que el hack necesita de un query.js, que no explicita dentro de la pieza de código, pues vamos a explicar punto por punto cómo hay que desarrollar el hack:

Un CSS: p.e., éste que véis en mi blog de pruebas:

.menu {
font-family: arial, verdana, sans-serif;
position: relative;
}

.rb_toggle {
height: 25px;
line-height: 25px;
padding: 0 5px 0 0;
}
.rb_toggle span {
color: #999;
font-size: 11px;
font-weight: bold;
font-family: arial, verdana, sans-serif;
cursor: hand;
cursor: pointer;
}
.rb_toggle span.hover {
color: red;
}

.rb_menu {
position: absolute;
left: 50px;
top: 0;
}

.rb_menu ul,
.rb_menu li {
list-style-type: none;
padding: 0;
margin: 0;
}
.rb_menu li {
float: left;
height: 25px;
line-height: 25px;
padding: 0 10px 0 0;
}
.rb_menu a {
font-size: 16px;
font-weight: regular;
color: #333;
text-decoration: none;
}
.rb_menu a:hover {
text-decoration: underline;
}
.rb_menu a.current {
color: #999;
}


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.- SCRIPTS:

<script src='http://3nfpga.blu.livefilestore.com/y1pAX8ad9FhUQcYaUKj7Fb_GSxjPieLwIJh7zoK-9kYyEQjw2CSmhSt1wO27z467GeOx5mao06nm5E/jquery.js' type='text/javascript'/>

<script src='http://3nfpga.blu.livefilestore.com/y1pPSSEr8Vrmc_I9AondpJOSWUREiEuoEvCTWk4o2pMYeiTuL_fZ8upIrr_VQatyVlhy7z9bJlSfXBA72ennkPSOQ/interface.js' type='text/javascript'/>

<script src='http://3nfpga.blu.livefilestore.com/y1pYL6E17IYEWOwcfZD68oUY4ZaBExh6mFVndMQKRSiONnqerJ8OAPiWWpB7_KtV-sYyRUH6-XsRegAD1R80vbCEQ/rb_menu.js' type='text/javascript'/>

Y ahora: ¡¡OJO!!: Antes de finalizar el contenido de vuestra plantilla, ésto es, JUSTO antes de la tag de cierre del body </body> tenéis que colocar este breve script, que contiene el efecto de cada tipo de menú:

<script>

$(&#39;#menu1&#39;).rb_menu();

$(&#39;#menu2&#39;).rb_menu({triggerEvent: &#39;click&#39;, hideOnLoad: false, autoHide: false});

$(&#39;#menu3&#39;).rb_menu({transition: &#39;easein&#39;});

</script>

Please... subid a vuestro servidor los scripts... porque si me vuelvo a quedar sin host, se os evaporan también a vosotros.

.- HTML: Lo insertáis en la parte de vuestra plantilla donde queráis desplegar vuestro menú:

<div class='menu' id='menu1'>

<div class='rb_toggle'><span>menu &#187;</span></div>

<div class='rb_menu'>

<ul>

<li><a href=''>Inicio</a></li>



<li><a href='http://cafe-junio.blogspot.com/'>Epílogo</a></li>

<li><a href='http://nada-junio.blogspot.com/'>Nada</a></li>

<li><a href='http://cuentos-historias.blogspot.com/'>Revolutum</a></li>

<li><a href=''>Bulto</a></li>

<li><a href=''>Más bulto</a></li>

<li><a href=''>Blablablabla</a></li>



</ul>

</div>

Y... c'est finí...