Moo3DMenu

Otra utilidad de virtual-gadjo, muy llamativa y, como el resto de los hacks de este "mootooler", muy bien diseñada. Podéis ver mi prueba bajo la cabecera de Clásica
. Pasad el ratón sobre las imágenes para comprobar el efecto.
Estos son los pasos, tanto para un menú horizontal como vertical:

.- CSS:

<style type="text/css">

/* -- le menu horizontal -- */

#menu1content { height: 75px; width: 628px; margin: 12px 0 25px 0; position: relative; }

ul#test1 { margin: 0; padding: 0; list-style-type: none; }

ul#test1 li { display: block; float: left; margin: 0; padding: 0; }



.menu3d { display: block; text-align: right; overflow: hidden; }

.lien1 { width: 120px; height: 65px; background: url(http://.../menu1.png) right top no-repeat; margin: 0; padding: 0; }

.lien2 { width: 115px; height: 65px; background: url(http://.../Menu2.png) right top no-repeat; margin: 0; padding: 0; }

.lien3 { width: 155px; height: 65px; background: url(http://.../Menu3.png) right top no-repeat; margin: 0; padding: 0; }

.lien4 { width: 155px; height: 211px; background: url(http://.../Menu4.png) right top no-repeat; margin: 0; padding: 0; }



/* -- et hop, le vertical, elle est pas belle la vie ? -- */

ul#test2 { margin: 0 0 20px 0; padding: 0; list-style-type: none; width: 107px; position: relative; }

ul#test2 li { display: block; margin: 0; padding: 0; }



.menu3d2 { display: block; text-align: right; overflow: hidden; }

.lien1bis { width: 120px; height: 65px; background: url(http://.../menu1.png) right top no-repeat; margin: 0; padding: 0; }

.lien2bis { width: 155px; height: 65px; background: url(http://.../Menu2.png) right top no-repeat; margin: 0; padding: 0; }

.lien3bis { width: 155px; height: 65px; background: url(http://.../Menu3.png) right top no-repeat; margin: 0; padding: 0; }

</style>

Aquí tenéis que cambiar anchos y altos, para adecuarlos al tamaño de vuestras imágenes.

.- SCRIPTS:

<script src='http://.../mootools1.2.js' type='text/javascript'/>

<script src='http://.../moo3Dmenu.js' type='text/javascript'/>



<script type='text/javascript'>



window.addEvent(&#39;load&#39;, function(){

new moo3Dmenu($(&#39;menu1content&#39;), $$(&#39;.menu3d&#39;), { resizeTop: 7, resizeRight: 7 });

new moo3Dmenu($(&#39;test2&#39;), $$(&#39;.menu3d2&#39;), { resizeTop: 7, resizeRight: 7, mode: &#39;vertical&#39; });

});



</script>

.- HTML:

<div id='menu1content'>

<ul id='test1'>

<li><a class='menu3d lien1' href='http://cafe-junio.blogspot.com/' title='Explicaciones de hacks'/></li>

<li><a class='menu3d lien2' href='http://nada-junio.blogspot.com/' title='Fotos, dibujos y experimentos'/></li>

<li><a class='menu3d lien3' href='http://cuentos-historias.blogspot.com/' title='De todo un poco'/></li>

<li><a class='menu3d lien4' href='http://accesoconetiquetasaepilogo.blogspot.com/' title='Acceso a Epílogo por etiquetas'/></li>

</ul>



</div>





<ul id='test2'>

<li><a class='menu3d2 lien1bis' href='http://cafe-junio.blogspot.com/' title='Explicaciones de hacks'/></li>

<li><a class='menu3d2 lien2bis' href='http://nada-junio.blogspot.com/' title='Fotos, dibujos y experimentos'/></li>

<li><a class='menu3d2 lien3bis' href='http://cuentos-historias.blogspot.com/' title='De todo un poco...'/></li>

</ul>

Cambiad mis URLS por las vuestras y ya tenéis vuestro menú 3D, Quwda mucho mejor con fondo negro, por cierto; y la parte complicada es la de diseñar las imágenes, pero... el resultado no puede ser mejor. Vale la pena.