Ver Demo menú acordeón multinivel

Ver screencast (duración: 8:17)

• Descargar videotutorial en alta calidad – MOV (25 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (13 MB)

No olvidéis echarle un vistazo al resto de videos en la página de videotutoriales, o suscribiros al podcast de iTunes.

Cómo usarlo

Para ver el HTML y CSS no tenéis mas que ver el código fuente del ejemplo de arriba, es bastante similar al del artículo anterior. En el html se añade un nivel más de anidamiento de listas, y en el CSS se le añade la regla #menu ul li li{padding-left: 10px;} para que los niveles inferiores tengan padding (esto podéis modificarlo como queráis).
Para cargar el javascript, podéis copiar el código en la cabecera tal como está en el ejemplo, o bien descargaros el archivo JS con el plugin e insertarlo de esta manera:

<script src="jquery.accordion.js" type="text/javascript" charset="utf-8"></script>

Después sólo os queda llamar al plugin:

<script type="text/javascript" charset="utf-8">
$(function(){
      $('#menu').accordion();
});
</script>

HTML

Para el html del menú vamos a emplear la estructura típica de listas anidadas. La última entrada será un enlace directo, sin submenú:

<ul id="menu">
<li><a href="#">Menu 1</a>
	<ul>
		<li><a href="#">Submenu 1</a></li>
		<li><a href="#">Submenu 2</a></li>
		<li><a href="#">Submenu 3</a></li>
		<li><a href="#">Submenu 4</a></li>
	</ul>
</li>
<li><a href="#">Menu 2</a>
	<ul>
		<li><a href="#">Submenu 1</a></li>
		<li><a href="#">Submenu 2</a></li>
		<li><a href="#">Submenu 3</a></li>
		<li><a href="#">Submenu 4</a></li>
	</ul>
</li>
<li><a href="#">Menu 3</a>
	<ul>
		<li><a href="#">Submenu 1</a></li>
		<li><a href="#">Submenu 2</a></li>
		<li><a href="#">Submenu 3</a></li>
		<li><a href="#">Submenu 4</a></li>
	</ul>
</li>
<li><a href="#">Menu sin submenu</a></li>
</ul>

Añadiendo el CSS

Para dar estilo al menú tenemos primero que quitar los estilos por defecto de las listas, eliminar los bullets y márgenes y añadirle display:block para que queden perfectamente alineados los elementos uno debajo de otro. Después tenemos que ocultar con display:none los submenús para que aparezcan todos colapsados por defecto. Vamos a añadir algunas extensiones de CSS3 para mejorar visualmente nuestro menú. Estás extensiones sólo serán visibles en navegadores modernos (Firefox, Chrome y Safari), pero no en Internet Explorer. De esta manera podemos añadir bordes redondeados y sombras al menú y al texto. La propiedad -webkit-transition solo funciona en navegadores basados en webkit (Safari y Chrome), y la utilizaremos para mejor el hover añadiendo un fundido en el color del texto y el background. En los navegadores que no soporten estas propiedades simplemente veremos el menú con esquinas normales, hover típico on-off de CSS y sin sombras.

#menu{
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:1px 1px 3px #888;
	-moz-box-shadow:1px 1px 3px #888;
}
#menu li{border-bottom:1px solid #FFF;}
#menu ul li, #menu li:last-child{border:none}	
a{
	display:block;
	color:#FFF;
	text-decoration:none;
	font-family:'Helvetica', Arial, sans-serif;
	font-size:13px;
	padding:3px 5px;
	text-shadow:1px 1px 1px #325179;
}
#menu a:hover{
	color:#F9B855;
	-webkit-transition: color 0.2s linear;
}
#menu ul a{background-color:#6594D1;}
#menu ul a:hover{
	background-color:#FFF;
	color:#2961A9;
	text-shadow:none;
	-webkit-transition: color, background-color 0.2s linear;
}
ul{
	display:block;
	background-color:#2961A9;
	margin:0;
	padding:0;
	width:130px;
	list-style:none;
}
#menu ul{background-color:#6594D1;}
#menu li ul {display:none;}

Añadiendo la funcionalidad con jQuery

Ahora vamos a ver lo sencillo que es hacer funcionar nuestro menú vertical. Primero añadimos el evento click a cada enlace del menú. Después comprobamos si el siguiente elemento tras el enlace es un ul, ya que si es así este contendrá un submenú, si no será un elemento de un submenú o bien un elemento principal que no contiene submenú (en nuestro ejemplo, el último enlace). Si contiene un submenú, al hacer click este se expandirá o colapsará (slideToggle()), a la vez que colapsaremos el submenú que esté visible que no sea el actual. La función event.preventDefault() sirve para evitar que cuando hagamos click el navegador siga el enlace del href tras ejecutar nuestra función javascript.

<script type="text/javascript" charset="utf-8">
$(function(){
	$('#menu li a').click(function(event){
		var elem = $(this).next();
		if(elem.is('ul')){
			event.preventDefault();
			$('#menu ul:visible').not(elem).slideUp();
			elem.slideToggle();
		}
	});
});
</script>

Podéis escribir en los comentarios cualquier duda que tengáis e intentaré responderla, así como sugerencias para próximos tutoriales.

Imágenes

La única imagen que vamos a utilizar es este gradiente para el fondo de los submenús, que además del efecto relieve que proporciona, nos ayudará a realizar las transiciones del hover.

HTML

El html empleado es una simple lista con otra lista anidada para cada submenú:

<ul id="nav">
	<li><a href="#">Menu 1</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 2</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 3</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 4</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
</ul>

Añadiendo el CSS

La mayor parte del css son para mejorar el aspecto visual del menú. Funcionalmente, podemos destacar varias cosas. Los elementos de la lista principal (#nav) se encuentran flotados a la izquierda, para formar el menú horizontal, y tienen position: relative para que sirva de referencia a cada submenú. A la lista del submenú le asignamos position: absolute, para que cuando se despliegue esté situada bajo su menú correspondiente. Este submenú lo ocultamos por defecto con display: none para después mostrarlo con javascript cuando pasemos el ratón por encima de su menú padre. A cada enlace del elemento del submenú añadiremos la imagen del gradiente como background.

a{
display: block;
text-decoration: none;
color: #004a80;
padding: 5px;
}
 
ul{
width: 500px;
height: 28px;
}
 
ul,li{
list-style: none;
margin:0;
padding:0;
}
 
#nav{
font-family: 'Century Gothic', sans-serif;
}
 
#nav li{
float:left;
position: relative;
width: 125px;
font-size: 14px;
font-variant: small-caps;
border-top:1px solid #004a80;
border-bottom:1px solid #004A80;
}
 
.submenu{
display: none;
position: absolute;
left: -1px;
border:none;
height: auto;
background: none;
}
 
#nav .submenu li{
float: none;
position: static;
margin: 0;
font-size: 11px;
font-variant: normal;
border: 1px solid #004a80;
border-top: none;
width: 124px;
}
 
#nav .submenu li a{
color: #FFFFFF;
background: #004a80 url('fondo_menu_vertical.png') repeat-x 0 0;
width: 114px;
height: 16px;
}

Javascript y jQuery

Ahora añadiremos la funcionalidad del menú. Para ello necesitaremos primero incluir la librería jQuery, que podemos hacerlo cargándola directamente desde el repositorio de Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>

También necesitaremos añadir el plugin backgroundPosition para jQuery, ya que éste no soporta de serie la animación de la propiedad background-position. Lo descargaremos y añadiremos así:

<script type="text/javascript" src="jquery.backgroundPosition.js"></script>

Finalmente, con unas pocas líneas de código, usando la función slideDown/slideUp y el evento hover mostraremos el submenú correspondiente cuando pasemos el ratón por uno de los elementos del menú principal. Usando la función animate, al pasar el ratón por encima de cada entrada del submenú se cambiará la propiedad background-position, deslizando la imagen del gradiente y creando un efecto de fundido rápido, para que la transición sea más suave que si utilizáramos simplemente a:hover para cambiar el color de fondo del enlace activo.

<script type="text/javascript">
$(function(){
	$('#nav>li').hover(
		function(){
		$('.submenu',this).stop(true,true).slideDown('fast');
		},
		function(){
		$('.submenu',this).slideUp('fast');
		}
	);
 
	$('.submenu li a').css( {backgroundPosition: "0px 0px"} ).hover(
		function(){
		$(this).stop().animate({backgroundPosition: "(0px -99px)"}, 250);
		},
		function(){
		$(this).stop().animate({backgroundPosition: "(0px 0px)"}, 250);
		}
	);			
});
</script>

Preparando las imágenes

En primer lugar montaremos los tres estados del botón (normal, hover y activo) en un sprite tal que así:

La técnica de sprites consiste en utilizar una única imagen para todos los casos, mostrando sólo la parte que nos interesa mediante la propiedad background-position. La altura de la imagen es de 30px, de manera que para mostrar cada bloque cambiaremos la posición vertical del fondo a 0, 30px o 60px según el fragmento.

Las etiquetas XHTML

Al contrario que en otras soluciones de menús animados que podemos encontrar por la red, en este método únicamente vamos a usar el markup necesario, no añadiremos etiquetas <span> vacías extra para añadir funcionalidad. Para simplificar incluiremos solo el elemento del ‘Home’:

<ul id="nav">
   <li id="home">
     <a href="#">Home</a>
  </li>
</ul>

Añadiendo el CSS

Haremos que tanto el <li> como el <a> sean de la misma medida fija, para poder jugar con la posición del background. Indentamos el texto para hacerlo desaparecer, de esta manera el menú será completamente accesible y semántico.

ul#nav{
background: transparent url('images/menu.png') no-repeat top left;
}
ul#nav, ul#nav li{
margin:0;
padding:0;
height:30px;
width:83px;
list-style:none;
float:left;
}
ul#nav li#home a{
height:30px;
width:83px;
display:block;
text-indent:-9999px;
background-image: url('images/menu.png') bottom left;
}
ul#nav li#home a:active, ul#nav li.activo{
background-position: url('images/menu.png') 0px 60px;
}

El background del <ul> mostrará la parte superior de la imagen, es decir el estado normal del botón. El enlace contendrá la parte inferior, desplazada mediante el background-position, y permanecerá oculto con javascript hasta que pasemos el ratón por encima. Finalmente el <li> solo tendrá background si nos encontramos en la sección activa del menú, o estamos pulsando el botón (pseudoclase :active).

Entra jQuery

Y ahora viene la madre del cordero, un poco de ‘jQuery magic’:

$(function() {
$("ul#nav li a").css("opacity","0").hover(function() {
	// on mouse over
	        $(this).stop().animate({ opacity: 1 }, 400);
	},
	// on mouse out
	function() {
	        $(this).stop().animate({ opacity: 0 }, 400);
	});
});

Sencillo, ¿verdad? Simplemente cambiamos la opacidad del enlace a 0 al cargar, para que no veamos el fondo que contiene el fragmento hover de la imagen. Después adjuntamos el evento para aumentar la opacidad del enlace hasta hacer visible su fondo cuando pasamos el ratón por encima, realizando la operación inversa al retirar el ratón.
Como puedes ver el funcionamiento de este menú se basa en aprovechar la jerarquía de la lista del menú, apilando fondos en el <ul>, <li> y <a> y mostrando el que nos interesa.