SummArg | Cursos y recursos para webmasters

12/03/2011

Accordion Image Menu para jQuery

Accordion Image Menu es un plugin para jQuery que nos permite construir menues en forma de acordeón vertical u horizontal en muy pocos pasos.

Descargar | Demo

Para implementar este menú primero debemos descargar los archivos accordionImageMenu.jsaccordionImageMenu.css. Luego los insertamos en el encabezado de nuestro documento, junto con jquery.js y jquery-ui.js :

<script type="text/javascript" src="ruta/jquery.js"></script>
<script type="text/javascript" src="ruta/jquery-ui.js"></script>
<script type="text/javascript" src="ruta/accordionImageMenu.js"></script>
<link rel="stylesheet" href="ruta/accordionImageMenu.css" type="text/css" />

Ahora podemos inicializar el script colocando:

<script type="text/javascript">
$(document).ready(function() {
	$('#menu').AccordionImageMenu();
    });
</script>

Entre etiquetas <body> insertamos nuestro menu en forma de lista desordenada.

<ul id='menu'>
   <li><a href='link1'><span>titulo 1</span><img src='image1.jpg' /></a></li>
   <li><a href='link2'><span>titulo 2</span><img src='image2.jpg/></a></li>
   <li><a href='link3'><span>titulo 3</span><img src='image3.jpg' /></a></li>
   <li><a href='link4'><span>titulo 4</span><img src='image4.jpg' /></a></li>
   <li><a href='link5'><span>titulo 5</span><img src='image5.jpg' /></a></li>
</ul>

Con esto nuestra base estará lista. Podremos elegir entre varias opciones para personalizar nuestro menú:

'closeDim': 100, (tamaño de los items cuando el menú no está activo)
'openDim': 200, (tamaño de los items en la posicion mouseopen)
'width':200, (ancho del menu en el modo vertical)
'height':200, (alto del menu en el modo horizontal)
'effect': 'swing', (efectos de animacion basados en jQuery UI)
'duration': 400, (tiempo de la transición)
'openItem': null, (item desplegado cuando el menú no está activo)
'border': 2, (separación entre los items)
'color':'#000000', (color de la separación)
'position':'horizontal', (posición horizontal/vertical)
'fadeInTitle': true (fade in o fade out para los títulos)

Para ver algunos ejemplos de configuración del script visitar la web del plugin.

Dejar un comentario