Menú para elegir

Irene 16 Ene 2007 Comentarios desactivados en 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:

Los comentarios están cerrados.