imageMenu | Menu Accordion Horizontal

Por: Nicolas Seijas | Categoría: JQuery

imageMenu es un menu accordion horizontal hecho en mootools muy atractivo y fácil de aplicar, que le dará más vida a la página, ideal para aquellos que quieran destacar secciones u otros muy gráficamente.

Aplicando el Código:
Añadimos los archivos javascript en el header de nuestra página:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js">
</script>
<script type="text/javascript" src="/js/fx.elements.js"></script>
<script type="text/javascript" src="/js/imageMenu.js"></script>

Creamos el menu en el HTML:

<div id="imageMenuBasic"  class="imageMenu">
<ul>
<li class="landscapes"><a href="#">Landscapes</a></li>
<li class="people"><a href="h#">People</a></li>
<li class="nature"><a href="#">Nature</a></li>
<li class="urban"><a href="#">Urban</a></li>
<li class="abstract"><a href="#">Abstract</a></li>
</ul>
</div>

Dandole algo de estilo:

.imageMenu {  position:  relative;  width: 500px; height: 200px; overflow: hidden; }
.imageMenu ul { list-style: none; margin: 0px; display: block; height: 200px;
width: 1000px; }
.imageMenu ul li { float: left; }
.imageMenu ul li a { text-indent: -1000px; background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff; cursor:pointer; display:block; overflow:hidden; width:98px;
height: 200px; }
.imageMenu ul li.landscapes a { background: url(/images/imageMenu/landscapes.jpg)
repeat scroll 0%; }

Inicializamos el script:

window.addEvent('domready', function(){
new ImageMenu($$('#imageMenu a'), {
openWidth:310,
border:2
});
});

Descargar:

Fx.elements.js – Descargar

imageMenu.js – Descargar

¿Te gustó el artículo?

Recomiendalo a través de las redes sociales

Tal vez te interese...

Comentarios

Wordpress
Facebook

Si deseas agregar un código a tu comentario por favor usa el siguiente formato: <pre name="code" class="php">Tu código</pre>. Puedes reemplazar la clase con "js", "css", "sql", o "html". Si el código tiene algún "<" o ">" en tu código reemplazalo con: < y > respectivamente.

Este artículo tiene 10 comentarios

Alberto, comento el 13 de julio del 2010:

Interesante y además se ve muy bien Una pregunta… ¿en qué tipo de webs queda mejor?

P.D.: Gracias por responder el mail, no importa que fue tarde lo importante es que respondieron
Sigan así

Saludos!
Source, comento el 03 de agosto del 2010:

Hola Alberto, este tipo de acordeones queda bien en cualquier pagina si lo sabes aprovechar , pero mas que nada en aquellas que sean muy visuales.
Gracias por escribirnos
Un saludo!
Pablo, comento el 30 de agosto del 2010:

Es muy bueno, pero no va con Google Chrome : (
Source, comento el 30 de agosto del 2010:

Hola Pablo, se ve perfectamente en Google Chrome, esta dirección: http://www.aaronbirchphotography.com/ es la demostración. Acabo de probarlo nuevamente y yo lo veo bárbaro y funciona bien. ¿Qué problema te aparecía a ti?

Saludos!!
Fabián Baeza, comento el 07 de septiembre del 2010:

Hola, una pregunta sobre este componente, los enlaces como los hago funcionar, en el listado aparecen pero si coloco un enlace simplemente me aparece una ventanita que dice la dirección que estoy llamando pero no me lleva al link, como resuelvo eso? gracias por la respuesta.
Marc, comento el 01 de febrero del 2011:

Yo también tengo problemas con google chrome.
Al pasar el raton por encima el acordeon se encoge quedando visible únicamente una de las imagenes. A que puede ser debido? en el resto de navegadores funciona a la perfección…
Marc, comento el 01 de febrero del 2011:

Bueno, solucioné mi problema con google chrome añadiendole un style width en cada una de las opciones.

Saludos
Marc, comento el 01 de febrero del 2011:

.
Source, comento el 03 de febrero del 2011:

@ Fabian, donde dice: en el lugar del numeral debes de colocar la dirección a donde quieres que el enlace te lleve.
Por ejemplo, si quieres que el enlace ‘Lanscapes’ te lleve a una página llamada ‘Lanscapes’ debes colocar en el lugar del numeral http://enlace.com
Judith, comento el 24 de agosto del 2011:

Una preguntotal, la verdad no se mucho sobre diseño ni nada de esto y quisiera saber la manera de poder pasarlo a vertical, ¿me podrian ayudar??