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.

Tags:
Compártelo!
30 Comentarios en Menús CSS desplegables sin javascript
  1. MijT dice:

    Muy buen recurso, y funciona muy bien en todos los navegadores excepto en… ya sabes cual… IE6

    Muerte a IE6 ya!!

  2. Claudia dice:

    Claro. Y es que en IE6 no puedes hacer cosas como estas :(

  3. Clara dice:

    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

  4. Zack dice:

    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

    http://qmjwjw.bay.livefilestore.com/y1p0_rBhxVJwNIPLFu-FjbUAVR8AioLGqeK3barHh3kO7SgaQmCO4VNudWVZAbvt544ZxlUbo9TdOpShWLj2Wpo9YwGrQpBhp7f/Help.JPG

    Espero me puedas ayudar
    de antemano gracias
    esperare tu respuesta

  5. Claudia dice:

    Zack:
    Creo que eso da para una entrada completa… :P
    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?

  6. Zack dice:

    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/

  7. Quien quiere plataa! dice:

    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

  8. Romer dice:

    ¿ Dónde se colocan los respectivos códigos ?
    Gracias.
    Tengo una plantilla Beta ¿Funcionan en ella?

  9. Claudia dice:

    Romer: Idealmente, bajo el div “header-wrapper”, en la edición HTML de tu plantilla.

  10. […] CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko […]

  11. leonardo dice:

    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!!

  12. […] CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko […]

  13. anonimo dice:

    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/

  14. Onhim dice:

    Gracias, esto es genial y me sirve bastantisimo que esten bien

  15. Facundo dice:

    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!

  16. […] 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 […]

  17. jose dice:

    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

  18. jf dice:

    hello fue excelente me sirvio mucho

  19. 23vlap dice:

    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!!!

  20. paulin dice:

    donde pego los codigos?

  21. geek4520 dice:

    no sirve para nada

  22. Jmtorres15 dice:

    si que sirve, y esta muy pero que muy bien. muchas gracias!!!

  23. Jmtorres15 dice:

    si que sirve, y esta muy pero que muy bien. muchas gracias!!!

  24. elisa dice:

    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!

  25. Teofilo dice:

    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

  26. segi dice:

    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.

  27. EdgarCorona dice:

    Hola, buscando por internet me encontre con este magnifico blog, tengo una pregunta, se puede hacer un menú desplegable en vertical usando iconos?…

  28. ManuAz dice:

    me sirvio de 10 .
    gracias !!

  29. Alberto dice:

    Hola queria saber a donde pego este codigo, entre los head o body gracias saludos

    #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; }

  30. Gustavo dice:

    Agradecido … buen aporte …

Deja tu comentario
Tu Comentario