RSS 
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
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
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
No hay posts relacionados.