Menús CSS desplegables sin javascript
CSS 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
Compártelo!
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.
28 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!!
[...] CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko [...]
Hola, tengo unas preguntas primero donde pego el codigo HTML y segundo en mi blog mi menu no se despliega hacia afuera sino entienden aca les dejo el link para que vean http://neoviirtual.blogspot.com/
Gracias, esto es genial y me sirve bastantisimo que esten bien
Buen día, como puedo ponerlo delante de las entradas porque me tapan el desplegable, alguna idea ?
este es el blog
http://www.isp3.com.ar
Gracias!
[...] atrás les hablaba de un tutorial para crear menús desplegables sólo con CSS. Para algunos funcionó bien, pero para otros no. Por eso, veremos otra alternativa simple de [...]
hola. implementé tu código en mi sitio de asp. net y funciona. solo que los menus aparecen debajo del menu padre por decirlo de alguna manera. hay posibilidad de que los menus que se despliegan lo hagan al lado y no debajo??
gracias
hello fue excelente me sirvio mucho
Hola!! perdona que siga insistiendo,te queria preguntar en donde ubicar un codigo html de un menu que cree mediante un generador de menus despegable sin javascript tengo el codigo pero ignoro en donde ubicarlo en mi blog ya que no entiendo mucho de codigos html ni css. Me podrias ayudar porfa!!!
donde pego los codigos?
no sirve para nada
si que sirve, y esta muy pero que muy bien. muchas gracias!!!
si que sirve, y esta muy pero que muy bien. muchas gracias!!!
Hola, he usado purecssmenu, es verdad que es muy fácil, y el menú funciona perfecto pero los botones del submenu se desactivan cuando vas a clicar sobre ellos (cuando lo pruebo en la web purecss… si funciona bien), me da la impresión que la zona activa es muy pequeña o está desplazada, estoy buscando ayuda en español pero no encuentro nada, ah tampoco es cuestión del navegador, lo he probado en todos. Te agradecería muchisimo si me echaras una mano. Gracias!
hola tengo una duda donde coloco el PRIMER codigo CSS en el mismo GADGET? o dentro de mi codigo de plantilla principal o talves me podrias decir que codigos se agregan para que el mismo menu que tengo se convierta en menu desplegable
gracias por la respuesta
Muchas gracias por el aporte, me ha servido mucho, y eso demuestra que para hacer grandes cosas no hay que tirar de “otros” lenguajes o de mucho codigo.
Si puedo ayudar en qualquier tema de programacion, tanto web, android etc, aqui dejo mi correo djseku@gmail.com, siempre esty encantado de ayudar si esta entre mis posibilidades.
Hola, buscando por internet me encontre con este magnifico blog, tengo una pregunta, se puede hacer un menú desplegable en vertical usando iconos?…
me sirvio de 10 .
gracias !!