Menú Dropdowns con CSS y algo de JavaScript

Se lo que estarán pensando… “¿Realmente necesitamos otro artículo sobre dropdowns CSS?” Permítanme convencerlos. ¿Que sería si pudiéramos tener un menú limpio, bien estructurado, que pueda combinar el dinamismo y la fácil codificación de menús dropdown, eliminando a su vez sus problemas principales (sin mencionar el maravilloso degrado)? Los problemas con los menús dropdown son:

1. Sus opciones secundarias son inaccesibles, salvo que actives el sistema de menú entero; y
2. Estos ofrecen apuntes de orientación insuficientes para el usuario. Puede ser difícil navegar a través de una particular sección de sites porque tienes que volver al dropdown para cambiar páginas.

Esta técnica es el camino a prueba de balas para asegurarnos la compatibilidad del browser y mantener la usabilidad, aun para personas que tiene los browsers antiguos o que tienen difícil acceso a menús dropdown, cualquiera sea, por inhabilidad o un bajo nivel de comfort, con el paradigma dropdown. Este también realiza un mejor trabajo que el menú estándar dropdown, en orientar al usuario a través del site.

Precaución: Esta técnica no trabajará tan bien en las listas que requieran ítems de gran cantidad de artículos, en donde dropdown puede bien brillar o colapsar bajo el peso de su propia masa absoluta, dependiendo de su perspectiva.

Vamos a crear un menú híbrido que corra horizontalmente a través de la ventana. Tiene dos niveles de navegación (en nuestro ejemplo, los tópicos principales y sus páginas relacionadas). Nuestro menú permitirá acceso dropdown a todas las páginas en ambos sentidos de navegación, exhibiendo las presentes opciones en el área del tópico seleccionado constantemente, manteniendo al usuario enterado del lugar del site en que se encuentra, haciéndole limpia y ligera su elección.

¿Suena Bien? Entonces, empecemos

Primero, necesitamos una lista

Empecemos con una lista de periodos arquitectónicos y algunos de sus mayores representantes. Uniremos una identificación al elemento <ul> y clases de “off”(apagado) y “on”(encendido) a la lista principal de artículos (que probablemente no sea la mejor solución, pero que trabajará para los propósitos de éste artículo.)

Pongámosle un poco de estilo

Este es un gran lugar para empezar. Margen de beneficio simple, semántico que se puede mantener fácilmente y en un lugar. Esto se parece a lo que esperamos encontrar.

La primera cosa que vamos hacer con nuestro CSS es exhibir el nivel primario horizontalmente (con el flotador) y ocultar todas las listas de subnavegación. También fijaremos la exhibición de los links en la lista para hacerlos en negrita, coloreados y con un borde.

#nav li {
/*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 15px;
}
 #nav li.off ul, #nav li.on ul {
/*hide the subnavs*/
display: none;
} 
#nav li a {
/*for all links in the list*/
color: #f90;
font-weight: bold;
display: block;
height: 15px;
width: 100px;
border: 1px solid #29497b;
padding: 5px;
}

A continuación posicionaremos nuestro segundo nivel de navegación debajo de la lista principal, para que cuando aparezca de nuevo, lo haga en el lugar correcto.

#nav li.off ul, #nav li.on ul { /*put the subnavs below and hide them all*/
display: none;
position: absolute;
top: 33px;
height: 15px;
left: 0;
padding-top: 10px;
} 

Finalmente, mostraremos la barra de subnavegación para el área de tópico activo, “Modern”. La mejor forma de hacerlo si uno quiere sólo un archivo completo del menú central, es con una clase del cuerpo, por ejemplo, “Modern”, y sus selectores correspondientes. Para este artículo, que será publicado en algún elemento del cuerpo y deberá mantener autosuficiencia, hemos fijado una clase de “on” para activar el tópico y “off” para inactivarlo.

#nav li.on a {
/*change border color for active topic area*/
border: 1px solid #f90;
} 
#nav li.on ul a, #nav li.off ul a {
/*cancel inherit of borderon subnav of active topic */
border: 0;
} 
#nav li.on ul {
/*display active subnav list*/
display: block;
} 

Después de añadir un par de bordes, podrán ver que tenemos hasta aquí.

Así que todos rollover y uno no

Ahora, activamos el rollover. Esto no es tan diferente a cualquier otro menú CSS dropdown – el hover está en el elemento li, de esta manera Internet Explorer se atascaría debido a su pobre implementación de :hover pseudo-class. Llegaremos a eso en un minuto. El CSS siguiente quita el borde en el segundo nivel del nav, fija el subnav activo siempre a mostrarse, y fija los subnavs inactivos a mostrarse cuando pasa el Mouse (hover) sobre sus padres. Activaremos un z-index para asegurarnos que los hovers tomen siempre precedencia sobre el área del tópico subnav actual.

#nav li.on ul a, #nav li.off ul a {
float: left;
/*ie doesn't inherit the float*/
border: 0;
color: #f90;
width: auto;
margin-right: 15px;
} 
#nav li.on ul {
/*display the current topic*/
display: block;
} 
#nav li.off:hover ul {
/*display the other topics whentheir parent is hovered */
display: block;
z-index: 6000;
}

Haremos un titulo más amistoso, con un background en los hovered tabs.

#nav li.off a:hover, #nav li.off:hover a {
background: #29497b;
color: #f90;
} 

Revisa nuestro progreso hasta aquí.

Acomodando nuestros "especiales" al navegador

Tenemos dos opciones para que los usuarios de browsers tales como, Internet Explorer, que carecen de ayuda para :hover en todo menos el elemento < a >. Podemos mostrar el menú tal como es, sabiendo que trabajará maravillosamente en algunos años, cuando tenga el soporte de todos los navegadores :hover (toquemos madera), y deduciendo en el conocimiento de que todas las opciones de navegación serán visibles y accesibles a todos los usuarios, o también podemos implementar un poco de Javascript para reescribir los selectores del CSS en un lenguaje entendible para IE, haciendo el dinamismo dropdown accesible a todos.

(Trabajando en IE.) Tenemos que ajustar la posición un poco, usando el corte del asterisco:

#nav li.off ul, #nav li.on ul { /*put the subnav below*/
top: 33px;
*top: 44px; /*reposition for IE*/}

Entonces esto trabaja maravillosamente, estándares- navegadores obedientes y trabajando en un modo funcional, degradado, con colocación correcta, en las versiones 5 y 6 del Internet Explorer. Con un poca de ayuda, podemos hacer el trabajo de los hovers en IE. Este simple Javascript reescribe los hovers como eventos mouseover, y trabaja para todas las versiones de IE/Win 5x y 6x. Muchas los gracias a Patrick Griffiths y a Dan Webb, quienes con su “Suckerfish Dropdowns” me iniciaron en los sistemas de menú basados en CSS. Su snippet Javascript se parece a esto:

startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;

Con un simple cambio en el CSS:

#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}
#nav li.off a:hover,
#nav li:hover a,
#nav li.over a {
background: #29497b;
color: #f90;
}

Añadimos la clase “.over” a la lista de artículos que requieren hovering, la lista funciona muy bien para los usuarios de IE/Win. No es que usted no deba pensar en un nuevo browser, pero por ahora seguiremos apoyando a las masas, del modo en que están acostumbradas.

Así que eso es. Un incremento, un cambio, quizás, sobre el trabajo previo con los dropdowns del CSS, pero otro ángulo para que usted explore esos casos donde realmente es útil tener las opciones de navegación exhibidas más que ocultas dentro de un menú dropdown.

¿Pero puede ser hermoso?

Ok, de eso no se trata. Puedo dejarles sin una versión mas ricamente gráfica para tomar esta técnica fuera de lo pedante y lo lleven al mundo real. Que con algunos cambios, una imagen de navegación Sprite CSS (gracias a Dave Shea), una foto y un poco mas de CSS, realmente demuestre el poder del CSS combinado con el diseño gráfico. Observemos como queda el menú híbrido CSS dropdown, completamente funcional en todos los modernos browsers.

Traducción con el permiso de A list Apart Magazine y su autor Eric Shepherd.

Si te gusto este artículo, también será de tu interés el anterior.