Blog

Efectos interesantes con Jquery para menús

Una de las cosas que más me gustan a la hora de crear algún proyecto y antes de terminarlo es fijarme en los detalles. Cosas que no estaban contempladas en un sitio pero no voy a tardar más de un par de horas en implementar.

Esos detalles de los que hablo hacen la diferencia de un buen proyecto, a un proyecto increíble. Talvez ya viste alguno de los efectos antes, al igual que yo, pero vamos a hacerlo con poco código. Los efectos se crean con menos de 5 línea de código.

Animando el menú simple

un simple ul, que animaremos

 

Tenemos un menú compuesto por una lista no ordenada así:

<div class="ejemplo-1"><ul class="azul">
	<li><a href="#">Texto 1</a></li>
	<li><a href="#">Texto 2</a></li>
	<li><a href="#">Texto 3</a></li>
	<li><a href="#">Texto 5</a></li>
	<li><a href="#">Texto 6</a></li>
</ul></div><!--ejemplo-1-->

Con una hoja de estilos así:

ul.azul{
    list-style:none;
    width:300px;
}
ul.azul li{
    margin:0;
    background:#005baf;
    padding:5px;
    border-left:3px solid #0c4d89;
    border-bottom:1px solid #0c4d89;
}
ul.azul li a{
    color:#FFF;
    text-decoration:none;
    position:relative;
    display:block;
}

Ya con eso podemos empezar a hacer magia, con jquery.

$('.ejemplo-1 ul li a').hover(
      function(e){
          $(this).stop(true,true).animate({ 'left' : '+=15px'}, 'fast'); },
      function(e){
          $(this).stop(true,true).animate({ 'left' : '-=15px'}, 'fast');
      }
);

Y eso es todo. Explico este  código.

Elijo un selector (en este caso los vínculos). Luego le digo a Jquery, cuando tenga el puntero en alguno de estos que mueva a la izquierda 15px rápidamente, para que cuando lo quite lo deje donde estaba.

El stop(true, true) me sirve para poder tirar la cola de acciones y el evento mismo si el tiemp trigger es muy corto para que se termine la acción. Esto para evitar que si hago varias veces el puntero sobre “a” no se quede como trabado.

Usando íconos como menú

Otra forma interesante de usar Jquery no intrusivo es dando recursos visuales y una ayuda sobre los mismos, los tooltips. Pero en nuestro caso haremos unos primitivos que solo nos servirán para el menú (con algunos cambios pequeños podemos hacer un tooltip casi para cualquier selector).

<div class="ejemplo-3">
    <ul class="bloque">
        <li><a href="#" title="Inicio"><img src="effect-menu-img/home32.png" /></a></li>
        <li><a href="#" title="Portafolio"><img src="effect-menu-img/bag32.png" /></a></li> 
        <li><a href="#" title="Blog"><img src="effect-menu-img/article32.png" /></a></li> 
        <li><a href="#" title="Contacto"><img src="effect-menu-img/mailopened32.png" /></a></li>
   </ul>
</div><!--ejemplo-3-->

Con una hoja de estilos así:

ul.bloque{
    list-style:none;
    height:30px;
}
ul.bloque li{
    margin:0 10px;
    float:left;
}
ul.bloque li a{
    color:#000;
    text-decoration:none;
    display:block;
}

Y la mágia!

$('.ejemplo-3 ul li a').each(function(i){
         var title = $(this).attr('title');
         var position = $(this).position(); 
         $(this).append('<span>' + title + '</span>'); 
         $('span', this).css({'left' : position.left , 'top' : position.top -20, 'position' : 'absolute'  }).hide();
      });
$('.ejemplo-3 ul li a').hover(function(e){
         $('span', this).stop(true, true).fadeIn(500);
      }, function(e){
         $('span', this).stop(true, true).fadeOut(200);
});

En las primeras líneas de código añadimos un span después de cada imagen con el texto correspondiente agregado en el atributo rel en los vínculos. Les colocamos una posición relativa a su padre y los escondemos.

Luego le decimos a jQuery que una vez esté el punteo en el vículo, muestre el span asociado a él.

Drop down, con y sin javascript

Muchas veces estamos ordenando nuestros menús y necesitamos los dropdowns, si quieren saber el principio de los mismos, con 10 línea de código estamos con todo.

No doy detalles los pueden encontrar en el demo o el descargable.