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!
  • Muy buen recurso, y funciona muy bien en todos los navegadores excepto en… ya sabes cual… IE6

    Muerte a IE6 ya!!

  • Claudia

    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

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

    Espero me puedas ayudar
    de antemano gracias
    esperare tu respuesta

  • Claudia

    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?

  • Claudia

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

  • Pingback: Pure CSS Menu: Generador de menús desplegables sin javascript | Chica Blogger()

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

  • Pingback: Blogs y Bloggers()

  • anonimo

    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/

  • Onhim

    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!

  • Pingback: Menú desplegable con jQuery Superfish en Blogger | Chica Blogger()

  • jose

    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

  • jf

    hello fue excelente me sirvio mucho

  • 23vlap

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

  • paulin

    donde pego los codigos?

  • no sirve para nada

  • Jmtorres15

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

  • Jmtorres15

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

  • elisa

    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

  • segi

    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.

  • EdgarCorona

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

  • Alberto

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

  • Gustavo

    Agradecido … buen aporte …

  • Por favor… que alguien me diga como instalar http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/ este menú… esta hermoso!! 🙂 saludos… pd: me encanta esta pagina!!