jQuery HoverAccordion, sencillos menús expandibles

Alma Fernández 02/06/2009

hoveraccordion

Hace unos días (más de los que había planeado en principio, lo siento) Fsc Xavier me preguntaba la forma de conseguir un menú acordeón básicamente sólo con CSS que mostrase los elementos anidados con sólo pasar el ratón por encima.

A pesar de que puede conseguirse, mi recomendación es no liarse en cosas tan raras y dejarse seducir un poco por el javascript. Con este plugin de jQuery es muy sencillito de hacer y, además, para los usuarios sin javascript es completamente accesible.

Para conseguir nuestro menú simplemente tendremos que llamar a la librería y el plugin como de costumbre, versiones minimizadas a poder ser, e inicializamos el script pasándole el id de nuestro menú y, si queremos, la configuración para nuestro acordeón.

<head>
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.hoveraccordion.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('mimenu').hoverAccordion();

</script>
</head>

La estructura del menú consiste en una lista desordenada, como la de cualquier menú con listas anidadas.

<ul id="mimenu">
   <li><a href="#">Item 1</a>
      <ul>
           <li>Subitem 1a</li>
      </ul>
   </li>
   <li><a href="#">Item 2</a>
      <ul>
           <li>Subitem 2a</li>
      </ul>
   </li>
</ul>

Para descargar el plugin y ver un par de ejemplos de uso dirigíos a la página del autor.

HoverAccordion: http://berndmatzner.de/jquery/hoveraccordion/