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/
Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
El principal motivo por el que no recomiendo utilizar Smarty es porque el propio PHP tiene una sintaxis embebida, lo que permite utilizarlo sin más para escribir plantillas web.
Guerra Creativa es una comunidad para Creativos. Nosotros te proporcionamos el campo de batalla y el armamento para conquistar el mundo creativo. A través de concursos de diseño web y de logos, l…
Con este Ebook puedes tener un sitio web con hospedaje y domino gratis, ademas de un CMS gratis, no debes registrarte en nada, lo unico que debes hacer es luego de leerlo compartirlo, regalarlo, si…
Lista de 32 sitios para descargar imagenes gratis, es una recopilacion de no uno ni dos sino 32 Bancos de Imagenes
Post para aprender a descargar las conocidas librerías de Evermotion para diseñadores que trabajan con 3Ds Max.
¿Qué medidas de seguridad se tienen en cuenta en el momento de implementar una subida de archivos en PHP?
¡Hola!
El componente Auth del framework CakePHP guarda las páginas en la memoria cache de IE7 (o eso es lo que creo haber entendido).
Para que no lo haga, he añadido los campos Ca…
Theresa Neil realizó un extraordinario análisis de 12 diseños estándar de interfases web como parte de su libro Diseñando Interfases Web: Principios y pautas para la interacción
50 herramientas extremadamente útiles para PHP
Tendencias de diseño de botones de ”llamada a la acción”
Ver más noticias de los usuarios