Después de un par de días de investigación inspirada en el ejemplo de Timo Huovinen, he logrado una versión de menú horizontal tipo acordeón con sólo CSS (sin efecto deslizante, desde ya). Aquí la comparto para quién pueda serle útil.
No tiene prácticamente ningún estilo. Sólo a manera de ejemplo se agregaron algunos colores de fondo para que quede ejemplificado en el código dónde deben aplicarse correctamente (estoy pensando en el fondo de los submenús con menos opciones que la predeterminada).
La semántica de la página no difiere de la de cualquier otro menú con listas anidadas, y he tratado de mantenerla en la mínima e indispensable pensando en su posible automatización (proximamente agregaré ejemplos).
La principal característica es que el ancho de las opciones del menú es fijo, como así también la cantidad de opciones máximas del submenú. En una próxima entrada explicaré el mecanismo por el cual funciona junto con los problemas que tuve que enfrentar para conseguir una versión que funcione en IE6, IE7, IE8, FF, Chrome, Safari y Opera.
Les dejo el código.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Accordion Menu</title>
<style type="text/css">
#menu {height:20px}
#menu, #menu * {margin:0;padding:0;list-style:none;line-height:20px;}
#menu .main {float:left;overflow:hidden;position:relative;background-color:yellow;}
* html #menu .main {display:inline;}
*:first-child+html #menu .main {display:inline;}
#menu .sub li {margin-top:-20px}
#menu a {position:relative;display:block;width:50px;background-color:#000066;font-weight:bold;color:white;text-align:center;}
#menu .sub a {background-color:yellow;z-index:10}
#menu a.sub1 {left:50px;}
#menu a.sub2 {left:100px;}
#menu a.sub3 {left:150px;}
#menu a:hover, #menu a:active, #menu a:focus {margin-right:150px;}
</style>
</head>
<body>
<ul id="menu">
<li class="main"><a tabindex="1" href="#">Main1</a>
<ul class="sub">
<li><a tabindex="2" class="sub1" href="#1">Sub11</a></li>
<li><a tabindex="3" class="sub2" href="#2">Sub12</a></li>
<li><a tabindex="4" class="sub3" href="#3">Sub13</a></li>
</ul>
</li>
<li class="main"><a tabindex="5" href="#">Main2</a>
<ul class="sub">
<li><a tabindex="6" class="sub1" href="#4">Sub21</a></li>
<li><a tabindex="7" class="sub2" href="#5">Sub22</a></li>
</ul>
</li>
<li class="main"><a tabindex="9" href="#">Main3</a>
<ul class="sub">
<li><a tabindex="10" class="sub1" href="#7">Sub31</a></li>
<li><a tabindex="11" class="sub2" href="#8">Sub32</a></li>
<li><a tabindex="12" class="sub3" href="#9">Sub33</a></li>
</ul>
</li>
</ul>
</body>
</html>
Suscribirse a:
Enviar comentarios (Atom)
Muchas gracias! me resultó muy útil
ResponderEliminarDe nada, Luti. Informamos de cualquier mejora.
ResponderEliminarExactamente que parte del codigo es la que permite que se mantenga el acordeon abierto? que he tratado de todo con uno que estoy implementando y nada que lo logro
ResponderEliminarsaludos y gracias de antemano
Oswaldo: la explicación completa se encuentra en la siguiente entrada de la bitácora. Aquí el menú padre funciona como recorte de lo visible: los enlaces hijos están en la misma línea (position:relative) pero desplazados (left:50px o left:100px etc) pero invisibles por el recorte del padre (overflow:hidden); sólo se hacen visibles cuando el enlace del padre o de los hijos ensanchan la caja (margin-rigth:150px)
ResponderEliminar