CSS

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

Tags: Wikio

11 Comentarios

Junio 20, 2009

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

Muerte a IE6 ya!!

Junio 20, 2009

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

Junio 22, 2009

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

Julio 5, 2009

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

Julio 6, 2009

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?

Julio 8, 2009

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/

Julio 20, 2009

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

Agosto 13, 2009

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

Agosto 13, 2009

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

Febrero 19, 2010

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

Marzo 11, 2010

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

Deja tu comentario

Nombre (requerido)
Email (requerido)
Sitio web (opcional)