Cómo hacer un menú brillante con MooTools en 3 pasos.

Ingredientes:

brillos, listas no ordenadas, conocimiento de MooTools. .

Tiempo de Cocción:

1 hr

El Resultado:

Puede ser visto en nuestra – página de test – pase el ratón por encima del menú superior.

Preparación

El menú es una lista que contiene una etiqueta A para cada ítem del menú. Estamos usando sprites y text-indent:-5000px para mejorar la accesibilidad. El truco es que usemos la imagen posicionada arriba para LI y abajo para A HREF.

Paso 1: cocine el código HTML

<ul id="mainnav">
<li><a href="#">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">news</a></li>
<li><a href="#">contact</a></li>
</ul>

Paso 2: añada el código CSS

li.home {background:url("../img/home.png") top left;}
li.home a {width:29px;background:url("../img/home.png") bottom left;}

El brillo esta hecho con Moolools.

Paso 3: condimente con código de Mootools

 $('mainnav').getElements('li a').each( function(item){
if ( !item.hasClass('clicked') ) {
item.setStyle('opacity',0.01).addEvent('mouseenter', function() { this.fade(1)}).addEvent('mouseleave',function(){this.fade(0.01)});
}
})

El código es disparado sea por un evento domready o colocado dentro de una etiqueta de script junto antes del fin del cuerpo para que tenga el dom cargado y listo para ser accedido por el script de java.

Básicamente, todo lo que estamos haciendo es colocar la etiqueta A dentro del menú, ajustar la opacidad a 0.01 porque si la ajustas a 0 MooTools añadirá display:none al estilo y los links no serán visibles.

Mientras más juguemos con el método fade, para incrementar la opacidad a 1 o disminuirla de vuelta a 0.01 en los eventos mouseenter y mouseleave.

También comprobaremos si el menú se encuentra activo o no – si estamos en la página del menú o no – verificando si el ítem tiene una clase ‘clicked’ dada por el backend. Si el ítem contiene esta clase, nosotros simplemente lo dejamos y el ítem esta activado todo el tiempo.

Eso es todo, dejenme saber lo que piensan.

Te recomendamos