Podemos construir listas desplegables con solo unas cuantas líneas de CSS y sin JavaScript. Especialmente el selector :checked es muy útil en este caso.
En el HTML
En el HTML construimos una serie de listas anidadas. Primero habrá una lista <ul class="menu">. Todas las listas anidadas dentro llevan la clase "interior". Los elementos <li> que llevan una lista <ul class="interior"> anidada tienen esta estructura:
<li><input type="checkbox" name="list" id="Id"/><label for="Id">Nivel 2</label>
<ul class="interior">
. . . . .
</ul>
</li>
El <input type="checkbox"> tiene asignado un id="Id" ( muy importante ). El atributo for de la etiqueta <label> tiene como valor el mismo "Id".
<ul id="menu">
<li><input type="checkbox" name="list" id="nivel1-1"><label for="nivel1-1">Nivel 1</label>
<ul class="interior">
<li><input type="checkbox" name="list" id="nivel2-1"><label for="nivel2-1">Nivel 2</label>
<ul class="interior">
<li><a href="#r">Nivel 3</a></li>
<li><a href="#r">Nivel 3</a></li>
</ul>
</li>
<li><input type="checkbox" name="list" id="nivel2-2"><label for="nivel2-2">Nivel 2</label>
<ul class="interior">
<li><a href="#r">Nivel 3</a></li>
<li><a href="#r">Nivel 3</a></li>
<li><a href="#r">Nivel 3</a></li>
<li><a href="#r">Nivel 3</a></li>
</ul>
</li>
<li><a href="#r">Nivel 2</a></li>
</ul>
</li>
<li><input type="checkbox" name="list" id="nivel1-2" checked=""><label for="nivel1-2">Nivel 1</label>
<ul class="interior">
<li><a href="#r">Nivel 2</a></li>
<li><input type="checkbox" name="list" id="nivel2-3"><label for="nivel2-3">Nivel 2</label>
<ul class="interior">
<li><a href="#r">Nivel 3</a></li>
<li><a href="#r">Nivel 3</a></li>
</ul>
</li>
<li><input type="checkbox" name="list" id="nivel2-4"><label for="nivel2-4">Nivel 2</label>
<ul class="interior">
<li><a href="#r">Nivel 3</a></li>
<li><a href="#r">Nivel 3</a></li>
<li><a href="#r">Nivel 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#r">Nivel 1</a></li>
</ul>
En el CSS
En el CSS las dos líneas de código que más interesan son:
.interior{ display:none; } /* oculta las listas anidadas */
input:checked ~ ul{display:block;}
La tilde ~ selecciona cada <ul> precedido por un <input type="checkbox"> marcado ( checked ). O sea: al marcar la casilla de verificación la lista anidada cambia de display:none; a display:block; de oculta a visible.
#menu * { list-style:none;}
#menu li{ line-height:180%;}
#menu li a{color:#222; text-decoration:none;}
#menu li a:before{ content:"\025b8"; color:#ddd; margin-right:4px;}
#menu input[name="list"] {
position: absolute;
left: -1000em;
}
#menu label:before{ content:"\025b8"; margin-right:4px;}
#menu input:checked ~ label:before{ content:"\025be";}
#menu .interior{display: none;}
#menu input:checked ~ ul{display:block;}
Resultado:
Bibliografía
La fuente original de este artículo es la siguiente:
http://w3.unpocodetodo.info/css3/listas-desplegables.php
