Menú Vertical MooTools (Kwicks )

Ya sabemos confeccionarlo en horizontal, pero... hay páginas a las que les quedaría mejor en vertical, de manera que aquí va la solución, bien fácil. Podéis ver un ejemplo en mi BLOG DE PRUEBAS, y el hack original en
e-magine.
También hay otro buen ejemplo en el
Foro-Mootools

.- CSS, que podemos cambiar a nuestro gusto y colocar dentro de la tag skin de nuestra plantilla:

/* category menu */
ul#cat_menu {
float:right;
width: 13em;
height: 25.5em;
height: expression('23.8em'); /* MSIE hack */
overflow: hidden;
background-color: #fff;
margin: 0 auto;
list-style-type: none;
padding: 0;
text-indent: 0;
position: relative;
}

ul#cat_menu li {
padding: 0;
margin: 0;
border-top: 1px solid #484848;
height: 3.5em;
overflow: hidden;
}

ul#cat_menu li a {
font-size: 1em;
font-weight: bold;
padding: 0.7em 0.5em 0.2em 4em;
color: #fff;
text-transform: uppercase;
text-decoration: none;
display: block;
height: 4em;
background-position: 6% top;
background-repeat: no-repeat;
}

ul#cat_menu li a#cat_epilogo {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQmtRfomjy_Fd8XtvRErHCcUYF46E74mEalhj44P6zzCVPK6NkP1zwzVtfJWLdk1-9bU9R-rd1TGmENnjK8yOMPcDF4riHjSocuT5x_MZJD8J-DTllpZEpb-uNCirGR-GLEDreCWRzprE/s1600/casiocan1722_203590.jpg);
}

ul#cat_menu li a#cat_imagen {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQmtRfomjy_Fd8XtvRErHCcUYF46E74mEalhj44P6zzCVPK6NkP1zwzVtfJWLdk1-9bU9R-rd1TGmENnjK8yOMPcDF4riHjSocuT5x_MZJD8J-DTllpZEpb-uNCirGR-GLEDreCWRzprE/s1600/casiocan1722_203590.jpg);
}

ul#cat_menu li a#cat_trabajos {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQmtRfomjy_Fd8XtvRErHCcUYF46E74mEalhj44P6zzCVPK6NkP1zwzVtfJWLdk1-9bU9R-rd1TGmENnjK8yOMPcDF4riHjSocuT5x_MZJD8J-DTllpZEpb-uNCirGR-GLEDreCWRzprE/s1600/casiocan1722_203590.jpg);
}

ul#cat_menu li a#cat_nada {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQmtRfomjy_Fd8XtvRErHCcUYF46E74mEalhj44P6zzCVPK6NkP1zwzVtfJWLdk1-9bU9R-rd1TGmENnjK8yOMPcDF4riHjSocuT5x_MZJD8J-DTllpZEpb-uNCirGR-GLEDreCWRzprE/s1600/casiocan1722_203590.jpg);
}

ul#cat_menu li a#cat_revolutum {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQmtRfomjy_Fd8XtvRErHCcUYF46E74mEalhj44P6zzCVPK6NkP1zwzVtfJWLdk1-9bU9R-rd1TGmENnjK8yOMPcDF4riHjSocuT5x_MZJD8J-DTllpZEpb-uNCirGR-GLEDreCWRzprE/s1600/casiocan1722_203590.jpg);
}

ul#cat_menu li a#cat_inicio {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQmtRfomjy_Fd8XtvRErHCcUYF46E74mEalhj44P6zzCVPK6NkP1zwzVtfJWLdk1-9bU9R-rd1TGmENnjK8yOMPcDF4riHjSocuT5x_MZJD8J-DTllpZEpb-uNCirGR-GLEDreCWRzprE/s1600/casiocan1722_203590.jpg);
}

.- Dos scripts, a colocar dentro de la tag head de nuestra plantilla:

<script language='javascript' src='http://junioscripts.googlepages.com/mootools.svn.js' type='text/javascript'/>

<script type='text/javascript'>


<script type='text/javascript'>

function makeCatMenu () {

var szNormal = 3.5, szSmall = 3, szFull = 5.1;



var kwicks = $$(&quot;#cat_menu .category&quot;);

var menu_height = 0;

var fx = new Fx.Elements(kwicks, {wait: false, duration: 400, transition: Fx.Transitions.Back.easeOut, unit: &#39;em&#39;});

kwicks.each(function(kwick, i) {

kwick.addEvent(&quot;mouseenter&quot;, function(event) {

var o = {};

o[i] = {height: [kwick.getStyle(&quot;height&quot;).toFloat(), szFull]}

kwicks.each(function(other, j) {

if(i != j) {

var h = other.getStyle(&quot;height&quot;).toFloat();

if(h != szSmall) o[j] = {height: [h, szSmall]};

}

});

fx.start(o);

});

});



$(&quot;cat_menu&quot;).addEvent(&quot;mouseleave&quot;, function(event) {

var o = {};

kwicks.each(function(kwick, i) {

o[i] = {height: [kwick.getStyle(&quot;height&quot;).toFloat(), szNormal]}

});

fx.start(o);

});

}



window.addEvent(&#39;domready&#39;, makeCatMenu);

</script>

Y el aviso de siempre: Ojo con los scripts, no sea que un día desaparezcan los míos y, entonces... reclamaciones al maestro armero. Más vale que tengáis los vuestros: así no hay problemas.

.- HTML, a insertar donde queráis ver vuestro menú: abecera, sidebar, footer...:

<ul id='cat_menu'>



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



<li class='category'><a href='http://imagen-junio.blogspot.com/' id='cat_imagen'>Imagen</a></li>



<li class='category'><a href='http://adrihome.blogspot.com/' id='cat_trabajos'>Trabajos</a></li>



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



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



<li class='category'><a href='http://jj-junio.blogspot.com/' id='cat_inicio'>Inicio</a></li>



</ul>

Reemplazad mis fondos por los vuestros o por iconos, así como mis URL y títulos... y ya está. La verdad es que da para mucho imaginar este tipo de menú :)