Micaela 2 de diciembre de 2009 a las 14.23
   Imprimir artículo
elWebmaster.com

CSS: Menúes dropdowns más livianos con el método Son of Suckerfish


cssEl 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í:

  1. <ul id="nav">
  2.     <li><a href="#">Percoidei</a>
  3.         <ul>
  4.             <li><a href="#">Remoras</a></li>
  5.             <li><a href="#">Tilefishes</a></li>
  6.             <li><a href="#">Bluefishes</a></li>
  7.             <li><a href="#">Tigerfishes</a></li>
  8.         </ul>
  9.     </li>
  10.  
  11.     <li><a href="#">Anabantoidei</a>
  12.         <ul>
  13.             <li><a href="#">Climbing perches</a></li>
  14.             <li><a href="#">Labyrinthfishes</a></li>
  15.             <li><a href="#">Kissing gouramis</a></li>
  16.             <li><a href="#">Pike-heads</a></li>
  17.             <li><a href="#">Giant gouramis</a></li>
  18.         </ul>
  19.     </li>
  20.  
  21.     <!-- etc. -->
  22.  
  23. </ul>

Para configurar las cosas necesitamos un estilado básico:

  1. #nav, #nav ul {
  2.     padding: 0;
  3.     margin: 0;
  4.     list-style: none;
  5. }
  6.  
  7. #nav a {
  8.     display: block;
  9.     width: 10em;
  10. }
  11.  
  12. #nav li {
  13.     float: left;
  14.     width: 10em;
  15. }

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.

  1. #nav li ul {
  2.     position: absolute;
  3.     width: 10em;
  4.     left: -999em;
  5. }
  6.  
  7. #nav li:hover ul {
  8.     left: auto;
  9. }

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; iDropdowns 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:

  1. <ul id="nav">
  2. <li><a href="#">Percoidei</a>
  3.     <ul>
  4.         <li><a href="#">Remoras</a>
  5.             <ul>
  6.                 <li><a href="#">Echeneis</a></li>
  7.                 <li><a href="#">Phtheirichthys</a></li>
  8.                 <li><a href="#">Remora</a></li>
  9.                 <li><a href="#">Remorina</a></li>
  10.                 <li><a href="#">Rhombochirus</a></li>
  11.             </ul>
  12.         </li>
  13.         <li><a href="#">Tilefishes</a></li>
  14.         <li><a href="#">Bluefishes</a></li>
  15.         <li><a href="#">Tigerfishes</a></li>
  16.     </ul>
  17. </li>
  18.  
  19. <li><a href="#">Anabantoidei</a>
  20.     <!-- etc. -->
  21. </li>
  22.  
  23. <!-- etc. -->
  24.  
  25. </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:

  1. #nav li ul ul {
  2.     margin: -1em 0 0 10em;
  3. }

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:

  1. #nav, #nav ul {
  2.     padding: 0;
  3.     margin: 0;
  4.     list-style: none;
  5.     line-height: 1;
  6. }

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 ):

  1. #nav li:hover ul ul, #nav li.sfhover ul ul {
  2.     left: -999em;
  3. }

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;}):

  1. #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
  2.     left: auto;
  3. }

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:

  1. #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  2.     left: -999em;
  3. }
  4.  
  5. #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 {
  6.     left: auto;
  7. }

Y en el loco caso de que necesites cuatro niveles:

  1. #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 {
  2.     left: -999em;
  3. }
  4.  
  5. #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 {
  6.     left: auto;
  7. }

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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. carlos dice:

    Agradezco de corazón este artículo. Es muy interesante y lo estaba buscando por la web.

    Sois cojonudos.

  2. Rodrigo Vera dice:

    muchas grax por este articulo …

    desde hoy me considero un “elwebmaster-adikto”

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder