El artÃculo original, llamado Suckerfish Dropdowns y publicado hace seis años en A List Apart, probó ser una forma popular de implementar menúes desplegables livianos y accesibles basados en CSS que se acomodan en IE.
En este artÃculo de hoy les enseñaremos cómo implementar menúes dropdowns más livianos con el método Son of Suckerfish, una evolución del primero que ya está siendo ampliamente implementado.
Dropdowns de un solo nivel
El HTML lucirá algo asÃ:
-
<ul id="nav">
-
</ul>
-
</li>
-
-
</ul>
-
</li>
-
-
<!-- etc. -->
-
-
</ul>
Para configurar las cosas necesitamos un estilado básico:
-
#nav, #nav ul {
-
padding: 0;
-
margin: 0;
-
list-style: none;
-
}
-
-
#nav a {
-
display: block;
-
width: 10em;
-
}
-
-
#nav li {
-
float: left;
-
width: 10em;
-
}
Noten que necesitamos especificar el ancho en el selector #nav li o bien Opera comenzará a tambalearse. Asimismo, recuerden que debido a que flotan las cosas, el contenido por debajo de los menús desplegables también tiene que ser limpiado (clear:left).
Evidentemente, debemos ocultar las listas que queremos "desplegar", pero para hacer las cosas lo más accesible posible debemos evitar el uso de display: none, que, esconde elementos de algunos lectores de pantalla.
Las especificaciones CSS dicen que los valores superior, derecho, inferior e izquierda deben compensar un cuadro de posición absoluta del cuadro contenedor. Pero, por desgracia Opera decide compensar las cajas con posición absoluta en relación con la página y es por eso que el combo original Suckerfish no funciona en Opera( porque se basó en las propiedades de arriba y de izquierda con una longitud explÃcita).
Por lo que en lugar de mostrar display: none utilizamos left: -999em para quitar la lista desplegable de vista y luego left: auto (en lugar de left: 0) para volverla a traer.
-
#nav li ul {
-
position: absolute;
-
width: 10em;
-
left: -999em;
-
}
-
-
#nav li:hover ul {
-
left: auto;
-
}
Y esto sorteará todos los obstáculos para esos navegadores que no soportan realmente la clase :hover, pero para IE debemos configurar el Suckerfish Javascript suelto:
-
sfHover = function() {
-
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
-
for (var i=0; i<sfEls.length; i++) {
-
sfEls[i].onmouseover=function() {
-
this.className+=" sfhover";
-
}
-
sfEls[i].onmouseout=function() {
-
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
-
}
-
}
-
}
-
if (window.attachEvent) window.attachEvent("onload", sfHover);
Básicamente, esto aplica la clase 'sfhover' a los elementos li en el elemento 'nav' cuando se pasa el mouse por encima y lo quita, utilizando una expresión regular, cuando el mouse se quita.
Asà que ahora tenemos la Suckerfish bombeando nuevas clases, el siguiente paso es simplemente duplicar el selector :hover con selectores de la clase 'sfhover':
-
#nav li:hover ul, #nav li.sfhover ul {
-
left: auto;
-
}
Y ahà tienen a su menú desplegable de un sólo nivel (estándar).
Dropdowns de multi-niveles
El artÃculo original de Suckerfish cubre simplemente menúes desplegables de un sólo nivel, pero con un poco de extensión de la lógica de cascada, es posible crear menúes desplegables de varios niveles con CSS también. Y a diferencia del código original Suckerfish JavaScript, la función 'sfhover' ahora aplicará el comportamiento a todos los elementos li descendientes de 'nav' en lugar de sólo a los hijos directos de modo que ahora los menúes desplegables de varios niveles son posibles en Internet Explorer también.
Asà que, para empezar, digamos que estamos tratando con una estructura de lista con más niveles como esta:
-
<ul id="nav">
-
</ul>
-
</li>
-
</ul>
-
</li>
-
-
<!-- etc. -->
-
</li>
-
-
<!-- etc. -->
-
-
</ul>
Hay un par de cosas que necesitamos agregar al método de un solo nivel. Primero, la lista de tercer nivel necesita desplegarse del lado del Ãtem de la lista correspondiente, por lo que es necesario añadir esta simple regla, que se aplicará a todos los despliegues después del primero:
-
#nav li ul ul {
-
margin: -1em 0 0 10em;
-
}
Debido a que no se puede especificar explÃcitamente la parte superior de las cajas con posición absoluta, se ubicarán debajo de la lÃnea de los Ãtem de la lista seleccionada, que es la causa por lo que el margen superior del nivel superior de las listas necesita establecerse en - 1em. Pero esto no empujará los menúes lo suficientemente lejos como para estar alineada con el elemento de la lista correspondiente, porque por defecto las alturas de lÃnea son mayores que 1em (generalmente 1.2em), asà que tenemos que añadir un poco de código para establecer la norma UL inicial:
-
#nav, #nav ul {
-
padding: 0;
-
margin: 0;
-
list-style: none;
-
line-height: 1;
-
}
Debido al efecto de cascada por el cual la lista de segundo nivel se muestra, la lista de tercer nivel también se manifestará, por lo que también tenemos que explicitar que se esconda la lista de tercer nivel (recordemos que tenemos que duplicar la pseudo clase : hover con la clase .sfhover ):
-
#nav li:hover ul ul, #nav li.sfhover ul ul {
-
left: -999em;
-
}
Ahora, esta regla se puede contradecir para que sea mostrada cuando se pasa por encima con el mouse por el elemento de la lista correspondiente ampliando la vista de la lista desplegable (que con el menú desplegable de un solo nivel era # nav li: hover ul, # nav ul {li.sfhover left: auto;}):
-
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
-
left: auto;
-
}
Y eso establecerá un sólido menú desplegable de dos niveles.
Siguiendo la misma lógica puedes incorporar tantos niveles como desees:
Para tres niveles, por ejemplo:
-
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
-
left: -999em;
-
}
-
-
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
-
left: auto;
-
}
Y en el loco caso de que necesites cuatro niveles:
-
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
-
left: -999em;
-
}
-
-
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
-
left: auto;
-
}
Haz clic aquà para ver una demostración de los menúes dropdowns de único nivel »
Haz clic aquà para ver una demostración de los menúes dropdowns de doble nivel »
Haz clic aquà para ver una demostración de los menúes dropdowns de triple nivel »
Haz clic aquà para ver una demostración de los menúes dropdowns de triple nivel »
Haz clic aquà para ver una demostración de los menúes dropdowns dispuestos en forma vertical »
Haz clic aquà para ver una demostración de los menúes dropdowns estilizados con CSS »
Fuente: HTML Dog
Jueves, 3 de Diciembre de 2009 a las 07.29
Agradezco de corazón este artÃculo. Es muy interesante y lo estaba buscando por la web.
Sois cojonudos.
Miércoles, 9 de Diciembre de 2009 a las 12.50
muchas grax por este articulo ...
desde hoy me considero un "elwebmaster-adikto"