menu-sexy-css-jquery

Los menús son una parte fundamental de nuestro proyecto ya que facilitan la navegación al usuario. Debemos crearlos lo mejor posible, y si puede ser, con algún efecto, como el menú animado que os mostré hace unos días. En esta entrada aprenderemos a crear un menú muy bonito utilizando JQuery y CSS:

Código HTML

Primero crearemos una lista desordenada. Simplemente ve creando listas y agrupándolas en niveles para crear los submenús:

<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">Resources</a>
<ul>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="topnav">

<li><a href="#">Home</a></li>

<li>

<a href="#">Tutorials</a>

<ul class="subnav">

<li><a href="#">Sub Nav Link</a></li>

<li><a href="#">Sub Nav Link</a></li>

</ul>

</li>

<li>

<a href="#">Resources</a>

<ul class="subnav">

<li><a href="#">Sub Nav Link</a></li>

<li><a href="#">Sub Nav Link</a></li>

</ul>

</li>

<li><a href="#">About Us</a></li>

<li><a href="#">Advertise</a></li>

<li><a href="#">Submit</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

Código CSS

Es tiempo para estilizar nuestra lista. En los comentarios del código podréis ver para qué sirven las propiedades que estamos insertando:

ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declara los ejes x e y para la navegacion de submenus--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Estilos de la flecha en los submenus--*/
width: 17px;
height: 35px;
float: left;
background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Efecto hover en la fleca--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Esto hace que la posición de los submenús sea aplicada correctamente--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Crea efecto de javascript--*/
border-bottom: 1px solid #444; /*--Crea efecto de javascript--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Efecto hover en los enlaces del submenu--*/
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

Código Javascript

Usaremos Javascript con la librería JQuery para animar nuestro menú. En los comentarios del código explico para qué sirve cada propiedad. Si eres nuevo en JQuery puedes aprender más en su página oficial.

$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>"); //Solo se muestra la flecha cuando js es activado (Agrega una etiqueta span vacia despues de ul.subnav*)

$("ul.topnav li span").click(function() { //Cuando hacemos click en la flecha...

//Las siguientes lineas son aplicadas al submenu (moviendo el submenu arriba y abajo)

$(this).parent().find("ul.subnav").slideDown('fast').show(); //Desplegamos el submenu cuando hacemos click

$(this).parent().hover(function() {

}, function(){

$(this).parent().find("ul.subnav").slideUp('slow'); //Cuando el cursor se mueve fuera del submenu, se vuelve a replegar

});

//Las siguientes lineas son aplicadas a los efectos hover en la flecha 

}).hover(function() {

$(this).addClass("subhover"); //Cuando se realiza hover, se agrega la clase "subhover"

}, function(){//On Hover Out

$(this).removeClass("subhover"); //Cuando movemos el cursor fuera, se elimina la clase "subhover"

});

});

Solo mostraremos las flechas si el usuario tiene Javascript activado. Si no lo tiene, no lo mostraremos.
Es decir, con Javascript activado quedaría así:

menu-javascript-activado

Sin Javascript activado:

menu-javascript-desactivado

Estandarización

CSS 2.1 inválido (por propiedades únicamente para CSS3).

XHTML 1.0 Transitional inválido (las etiquetas no son válidas).

Ejemplo de su funcionamiento

Ver ejemplo del funcionamiento del menú

Vía | Sohtanaka