SummArg | Cursos y recursos para webmasters

11/02/2012

Menú vertical con efecto acordeón con jQuery, muy liviano

Este menú lo vimos en viralpatel.net (demo) y nos pareció muy interesante para utilizar con otro estilo. Es muy liviano y utiliza cualquier versión de jQuery que hayamos insertado en nuestro proyecto. Para activar el funcionamiento, bastará con clickear en cualquier sector que contenga subitems, de ser así se despliega un área que nosotros colocaremos con un fondo rayado gris y se contrae cualquier otra área abierta.

Comenzamos con insertar jQuery y elaborar una estructura HTML para el menú.

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<ul id="accordion">
<li><div>System Administration</div>
<ul>
<li><a href="#">Personal Details</a></li>
<li><a href="#">Company Information</a></li>
<li><a href="#">Announcement Details</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Committee</a></li>
</ul>
</li>
<li><div>Committee</div>
<ul>
<li><a href="#">Personal Details</a></li>
<li><a href="#">Company Information</a></li>
<li><a href="#">Announcement Details</a></li>
</ul>
</li>
<li><div>Compliance</div>
<ul>
<li><a href="#">Personal Details</a></li>
<li><a href="#">Company Information</a></li>
<li><a href="#">Announcement Details</a></li>
</ul>
</li>
</ul>

Antes del cierre de la etiqueta </body>, insertamos el siguiente código para animar el menú.

<script type="text/javascript">
 $("#accordion > li > div").click(function(){
 if(false == $(this).next().is(':visible')) {
 $('#accordion ul').slideUp(300);
 }
 $(this).next().slideToggle(300);
 });
 $('#accordion ul:eq(0)').show();
 </script>

Y finalmente nuestro código CSS para que luzca mejor.

#accordion {
 list-style: none;
 padding: 0 0 0 0;
 width: 220px;
 margin: 0;
 }
 #accordion div {
 display: block;
 font-weight: bold;
 font-size:11px;
 color:white;
 cursor: pointer;
 padding: 5px;
 margin:0;
 background-color: #375d84;
 background-image: url(../images/arrow-down.png);
 background-position: right center;
 background-repeat:no-repeat;
 border-bottom: 1px solid #eff2f5;
 }
 #accordion ul {
 list-style-type: none;
 display: none;
 background: #eff2f5 url(/images/stripes.png) repeat;
 }
 #accordion ul li {
 font-weight: normal;
 cursor: auto;
 padding: 5px;
 width: 210px;
 height: 15px;
 font-size:11px;
 color: #375d84;
 display:block;
 }
 #accordion ul li:hover {
 background-color: #d6dfec;
 font-weight: normal;
 cursor: auto;
 padding: 5px;
 font-size:11px;
 color: #375d84;
 display:block;
 }
 #accordion a {
 text-decoration: none;
 color: #375d84;
 }

Para lograr un fondo con un patrón de rayas utilizamos la aplicación http://www.stripegenerator.com/.

Más menús estilo Accordion:

Acordeon con jQuery y CSS

jQuery UI Accordion Demo

Stupid Simple jQuery Accordion Menu | Demo

Making Accordion Menu using jQuery

jQuery Accordion Menu | Demo

Learn how to create an easy horizontal accordion menu.

jQuery Horizontal Accordion

State-Saving jQuery Accordion Menu without reloading the page

Regular and hover accordion menu

30 jQuery Accordion Menus

 

 

Dejar un comentario

  1. Carlos

    Hola!! podrian publicar el codigo del ejemplo???

    Cheers!

  2. Alejandro

    Gracias amigo funciona perfecto y es no es nada dificil y muy personalizabel haber si jala con campos dinamicos pero excelente aporte

  3. rodrigo

    Hola gracias por el codigo, lo implemente pero los submenus me aparecen un poco cargados a la derecha, que puedo hacer?

  4. Una pregunta, ¿cómo podría hacer que los submenús aparezcan cerrados al iniciar la página? Muchas gracias.

  5. Nekko

    Probá eliminando la última línea.
    $(‘#accordion ul:eq(0)’).show();

  6. Buenísimo, tengo una pregunta, para dejar un menú con link pero sin submenus?

  7. [...] atrás vimos cómo hacer un menú vertical del tipo accordion para cualquier proyecto. Ahora queremos compartir con ustedes un método para que ese menú [...]

  8. David Leon Baeza

    Hola una pregunta amiga me podrias dar el color exacto de la imagen stripes es decir la imagen que configuras en la pagina que das gracias!
    y excelente aporte

  9. No funciona tal cual lo explicas. Puede que me esté perdiendo una parte, soy principiante en el tema.

  10. Buenísimo, tengo una pregunta, cuando añado varios submenus no se visualiza todo el acordeon.

    Dejo un ejemplo en este enlace http://www.flezcano.com/2013/actividades.html al desplegar “1. Transporte de Obra”

    Espero pueda ayudarme, un saludo.

Dejar un comentario