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.

Tags:
CSS

9 sitios para descargar menús CSS

Publicado por Claudia en enero 3, 2009

Las grandes ventajas de los menús CSS que podríamos llamar “pre-diseñados”, son que: (1) son muy estéticos, y le dan a un sitio una apariencia profesional; (2) generalmente son muy livianos; (3) son fáciles de añadir; (4) y que pueden adaptarse a cualquier sitio. Además, podemos encontrar una gran variedad de ellos en forma gratuita. Aquí hice una lista de los sitios que ofrecen menús CSS gratis:

13 STYLES

CSS MENU BUILDER

CSS MENU MAKER

CSS PLAY

DYNAMIC DRIVE

CSS PORTAL

EXPLODING BOY (1) (2) (3)

IZZY MENU

STYLED MENUS

Tags: ,
CSS

Arte y ciencia del CSS – Ebook gratuito por tiempo limitado

Publicado por Claudia en noviembre 24, 2008

El equipo de Sitepoint tuvo la genial idea de regalar su libro “Arte y ciencia del CSS” (valor de venta: $39.95 USD) durante 14 días, de los cuales ya han pasado 6. El libro, en formato *.pdf, de más de 200 páginas consta de 7 capítulos que tratan acerca del manejo de títulos, imágenes, fondos, menús, formularios y tablas, entre otros. Está dirigido a webmasters, y escrito íntegramente en inglés, pero puede no ser difícil de comprender para quienes tienen algún grado de conocimiento acerca de las hojas de estilo en cascada.

Para conseguir el libro gratuitamente, es necesario seguir en Twitter a @sitepointdotcom. Casi instantáneamente, llega por mensaje privado un enlace para la descarga directa del ebook.

Tiempo restante para conseguir el libro: 8 días y 4 horas, desde la publicación de esta entrada. Hurry up!

Fuente | Visual Blast Media

Tags: