Menú para elegir

Un simple menú dropdown hecho con CSS.

Según dice su autor Patrick Griffiths (HTML Dog), está basado en un ejemplo de menú liviano, accesible y basado en CSS de A List Apart, pero mejorado, ya que es más liviano, más accesible (!) y tiene compatibilidad también con Opera y Safari, pero lo que es más interesante ¡tiene múltiples niveles!

Acá hay un ejemplo con un nivel, con dos niveles, tres niveles y hasta una opción vertical.

La cosa es así:

El código del menú tiene que verse más o menos así:

<ul id="nav">
<li><a href="#">Percoidei</a>

<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>

<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>

</ul>
</li>

<li><a href="#">Anabantoidei</a>

<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>

<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>

<li><a href="#">Giant gouramis</a></li>
</ul>
</li>

<!-- etc. -->

</ul>

Si es para las páginas de un weblog el código inicial será así:
<ul id="nav">
< ?php wp_list_pages(); ?>
</ul>

Si no ponemos argumentos entre los paréntesis se listarán todos los niveles. Si queremos controlar la cantidad de niveles que se listen hay que usar el argumento depth de la siguiente manera:
<ul id="nav">
< ?php wp_list_pages('depth=2'); ?>
</ul>

Este ejemplo tiene 2 niveles: las principales y sus hijos. El default es 0 y lista todas las que existan. Para más referencia ver los parámetros en el codex.

Y en el CSS:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 10em;
}

#nav li {
float: left;
width: 10em;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

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

Y en el head hay que poner el js:
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i

Hasta acá es el ejemplo con 1 nivel desplegado, o sea nivel superior visible y uno que se despliega.

El ejemplo de múltiples niveles se hace así:

<ul id="nav">
<li><a href="#">Percoidei</a>
<ul>

<li><a href="#">Remoras</a>
<ul>
<li><a href="#">Echeneis</a></li>

<li><a href="#">Phtheirichthys</a></li>
<li><a href="#">Remora</a></li>

<li><a href="#">Remorina</a></li>
<li><a href="#">Rhombochirus</a></li>

</ul>
</li>
<li><a href="#">Tilefishes</a></li>

<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>

</ul>
</li>

<li><a href="#">Anabantoidei</a>

<!-- etc. -->
</li>

<!-- etc. -->

</ul>

Y en el CSS:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 10em;
}

#nav li {
float: left;
width: 10em;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
*/--desde acá se agregan estilos para dos niveles --/*
#nav li ul ul {
margin: -1em 0 0 10em;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}
*/--desde acá se agregan estilos para tres niveles --/*
#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;
}
*/--desde acá se agregan estilos para cuatro niveles y paremos la mano :) --/*
#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;
}

Para mayores detalles de el porqué de cada línea, vean el post de los creadores de esta belleza 🙂

Etiquetas:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *