Animated jQuery Menu. Menú multinivel animado con jQuery Blog de Martin Iglesias .eu

Animated jQuery Menu. Menú multinivel animado con jQuery

Escrito por: Martín el 05-05-2011 14:41:05 y leído 3389 veces

Breve explicación de como montar un menú multinivel con distintas animaciones con jQuery. Si buscas montar un menú multinivel (o multilevel in english) con 2 líneas de código... esta es tu solución.

Realmente es tan fácil de hacer que la web de su creador no tiene ni explicación más que 2 trozos de código de como implementarlo... así que no te quejarás de su facilidad de uso.

Su estructura está basada en listas desordenadas -más conocidas como UL- y para crear niveles inferiores, vas creando tantas listas como necesites. El plugin se ocupará de animar el menú e ir desplegando las opciones.

Configurable.
El script cuenta con varios efectos que pueden seleccionarse que cambiarán, básicamente, la forma de presentar los submenús y la velocidad con la que se despliegan.

Efectos
Cuenta con 5 efectos y 3 velocidades que son fast, normal o slow.

Show
Fade
Slide
Wind
None

El código
Además de la ya imprescindible librería jQuery, necesitarás el .js del amenu, que puedes descargarlo de su web y un poquito de css y javascript para hacerlo funcionar. Mírate los códigos y para la demo, te remito a su creador.

Código JAVASCRIPT

$(document).ready(function(){
	$('#amenu-list').amenu({
		'speed': 200,
		'animation': 'wind'       //  show, fade, slide, wind, none
	});
})

Código XHTML

<ul id="amenu-list">
	<li>
		<a href="#">Item 1</a>
	</li>
	<li>
		<a href="#">Item 2</a>
		<ul>
			<li>
				<a href="#">Item 2-1</a>
			</li>
			<li>
				<a href="#">Item 2-2</a>
			</li>
		</ul>
	</li>
</ul>

Código CSS

/********* aMenu required ***********/

#amenu-list {
	margin:0px;
	padding: 0px;
	position: absolute !important;
	z-index: 999;
}
#amenu-list li {
	display: block;
	margin:0px;
	padding: 0px;
	position: relative !important;
	float: left;
	vertical-align: bottom;
}
* html #amenu-list li {
	width: 1px;
}
#amenu-list li a:link, 
#amenu-list li a:visited, 
#amenu-list li a:hover{
	display: block;
	margin:0px;
	padding: 0px;
	white-space: nowrap;
}
#amenu-list ul {
	display: none;
	margin:0px;
	padding: 0px;
	position: absolute !important;
	height: auto;
}
#amenu-list ul li {
	float: none;
	margin:0px;
	padding: 0px;
}
/******** aMenu look *******/

#amenu-wrapper {
	height: 40px;
	background-color: #2C272B;
	border: 1px solid #C788B5;
	padding: 0px 10px;
	border-radius: 7px;
}
#amenu-list li {
	height: 40px;
}
#amenu-list li.parent > a {
	background: url(images/down_arrow.gif) no-repeat 92% 50%;
}
#amenu-list li a:link, #amenu-list li a:visited {
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	color: #AD738C;
	padding: 0px 25px 0px 20px;
	border-left: 2px solid #2C272B;
	border-right: 1px solid #090909;
}
#amenu-list li a:hover, #amenu-list li a.active {
	color: #fff;
	background-color: #2E0F21;
	border-left: 2px solid #540532;
}

#amenu-list ul {
	border-left: 2px solid #540532;
}
#amenu-list ul li {
	height: 30px;
	background-color: #2E0F21;
	border-top: 1px solid #444444;
	border-bottom: 1px solid #090909;
}
#amenu-list ul li.parent > a {
	background: url(images/right_arrow.gif) no-repeat 95% 50%;
}
#amenu-list ul li a:link, #amenu-list ul li a:visited {
	height: 30px;
	line-height: 30px;
	padding: 0px 40px 0px 20px;
	border-left: none;
}
#amenu-list ul li a:hover, #amenu-list ul li a.active {
	background-color: #A80C66;
	color: #fff;
}

Categorías: Jquery • Menu • Css • Multinivel •