Menu vertical expandible de dos niveles
Saludos webmasters, tengo el siguiente menu:
con los siguientes estilos:
#sidebar-wrap {
float: left;
width: 190px;
background-color: #eee;
}
#sidebar-wrap ul ul li, #sidebar-wrap ul li {
margin-left: 12px;
padding: 5px 0;
}
#sidebar-wrap ul li>ul {
display: none;
}
#sidebar-wrap ul li:hover ul {
display: block;
}
#sidebar-wrap ul li a:hover ul {
display: block;
}
El efecto que quiero obtener es: inicialmente que no se muestren las
categorias, que cuando pase el cursor sobre una de las categorias
(Vinos y licores, Hogar, etc) se muestre las subcategorias y si no
pulso sobre alguna de ellas pues que se oculten otra vez.
Con FF no tengo problemas pues este codigo funciona pero, con ie no
logro el efecto deseado. Hay alguna manera de simular el li:hover para
ie?
Como habran notado no estoy hechando mano de javascript y es asi como
necesito lograr el efecto.
Saludos y espero puedan ayudarme.
- Inicia sesión o regístrate para publicar comentarios.
La necesidad de usar JavaScript
Quieres decir que no debes usar JavaScript para realizar este efecto?
Pensaba que:
divRoot = document.getElementById("tuIL");
divRoot.onmouseover=function() {
this.className+=" hover";
}
divRoot.onmouseout=function() {
this.className=this.className.replace(" hover", "");
}
te podia servir...
Salu2 Erik http://porroa.com/erik
Correcto, un poco de Javascript es suficiente
Internet Explorer, al menos hasta la versión 6, no soporta :hover en elementos diferentes que a y por eso deberás usar un poquito de Javascript y el DOM.
Dale un vistazo a la explicación de Suckerfish Drowpdowns en A List Apart.
Saludos.
Alexis Bellido
Drupal en 15 gotas. Aprende a usar Drupal en 48 horas.
Yo recomendaria ...
Que también pienses en la accesibilidad de tu menú, por ejemplo si se desactiva CSS y Javascript debería poder utilizarse esos enlaces, como es el caso de los robots que indexan contenido para los buscadores.
Saludos
- - - - - - - - - - - - - - - - - - - -
CesarS | moderador
backdraft : usabilidad y desarrollo web
suckerfish es accesible
El menu de ALA que alexis enlazo es accesible ademas de cute, deshabilitando javascript y css puedes acceder a todas las opciones