Menús CSS desplegables sin javascript
Publicado por Claudia en Junio 20, 2009
Janko (Janko at Warp Speed) nos muestra una interesante técnica para crear menús desplegables sólo con un poco de CSS y HTML, pero sin javascript:
#menu { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
Es posible notar la inclusión del carácter “>” en tres selectores, que hace posible el efecto “dropdown” con categorías hijas.
*Nótese que he cambiado el nombre del selector principal (header) por “menu”, para prevenir que el header o el menú de mi blog tomen propiedades indeseadas.
Después de añadir el código CSS, el respectivo código HTML del menú sería el siguiente:
<div id="menu">
<ul id="nav">
<li><span>Menu 1</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 2</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 3</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
</ul>
</div>
Luego de añadir el menú, estamos en condiciones de modificar el código CSS para que éste tenga las propiedades deseadas. Pueden ver el demo en el sitio de Janko, o la modificación del menú que hice en mi blog de pruebas en Blogger.
Lo que me gusta de esta técnica, es que resulta muy fácil de incorporar y que no hay que preocuparse por los problemas de compatibilidad con distintos navegadores (salvo IE6, que no lee el caracter > en los selectores). Además, al no necesitar javascript es más liviana que una pluma.
Posts relacionados
Wikio
Janko (Janko at Warp Speed) nos muestra una interesante técnica para crear menús desplegables sólo con un poco de CSS y HTML, pero sin javascript:
#menu { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }Es posible notar la inclusión del carácter “>” en tres selectores, que hace posible el efecto “dropdown” con categorías hijas.
*Nótese que he cambiado el nombre del selector principal (header) por “menu”, para prevenir que el header o el menú de mi blog tomen propiedades indeseadas.
Después de añadir el código CSS, el respectivo código HTML del menú sería el siguiente:
<div id="menu">
<ul id="nav">
<li><span>Menu 1</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 2</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 3</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
</ul>
</div>Luego de añadir el menú, estamos en condiciones de modificar el código CSS para que éste tenga las propiedades deseadas. Pueden ver el demo en el sitio de Janko, o la modificación del menú que hice en mi blog de pruebas en Blogger.
Lo que me gusta de esta técnica, es que resulta muy fácil de incorporar y que no hay que preocuparse por los problemas de compatibilidad con distintos navegadores (salvo IE6, que no lee el caracter > en los selectores). Además, al no necesitar javascript es más liviana que una pluma.
11 Comentarios
Muy buen recurso, y funciona muy bien en todos los navegadores excepto en… ya sabes cual… IE6
Muerte a IE6 ya!!
Claro. Y es que en IE6 no puedes hacer cosas como estas
Olá Claudia …
Primer amor de su obra y un artista que te parece, y sé que si sacar las fotos? Así pues, el tipo que está en su parte superior. Me parece muy bonito, ella es su exclusividad?
donde puedo encontrar fotos que me gusta personalizar mi blog?
besos
Hola, Que buen articulo, me podrías echar la mano un poco soy un neofito en esto y quiero hacer que la main-wrapper quede dividida y la sidebar-wrapper tambien asi como tu pagina
te dejo este link para que veas como lo quiero hacer
Espero me puedas ayudar
de antemano gracias
esperare tu respuesta
Zack:
Creo que eso da para una entrada completa…
Pero en síntesis, lo que tienes que hacer es quitarle el color de fondo a #outer-wrapper, y ponerle un color de fondo y un border a tu #main-wrapper y a tu #sidebar-wrapper.
Sabes hacer eso con CSS?
Si creo que si jejeje gracias por la ayuda ya esta quedando
esta es mi pag aun le estoy dando los ultimos retoques
Mil gracias
http://sackaryenelalma.blogspot.com/
Que muerte a IE6 solamente?? Muerte a Internet Explorer 6 7 8 10 14 y todos yaa es hora, si supieran el trabajo que pasan los programadores por la incompatibilidad de IE con los demas Browsers
¿ Dónde se colocan los respectivos códigos ?
Gracias.
Tengo una plantilla Beta ¿Funcionan en ella?
Romer: Idealmente, bajo el div “header-wrapper”, en la edición HTML de tu plantilla.
[...] CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko [...]
muchisimas gracias me sirvio de mucho estoy muy agradecido espero que siga asi los felicito porque es lo justo y necesari que estaba buscando
saludos!!