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