Tupale

Crear un menú desplegable con CSS pero sin Javascript

menu desplegable CSS

menu desplegable CSS

Hoy en día los menús desplegables son muy populares, en especial por el ahorro de espacio, y la comodidad que le ofrecen al usuario, ademas en la mayoría de los casos resulta ser una buena opción para el SEO debido a su la organización del HTML como elementos de lista.

Sin embargo cuando buscamos en Internet un menú desplegable para implementar en nuestro sitio web casi siempre damos con opciones basadas en javascript, lo que no es muy optimo para SEO y consume mas ancho de banda, ademas de ser difícil su instalación y configuración. Es por eso que decidí escribir este pequeño tutorial para dar una opción a la construcción de menús desplegables pero basados únicamente en CSS (sin javascript).

Lo primero que tenemos que hacer es definir el HTML del menú y es aquí donde se entiende porque un menú desplegable es tan bueno para SEO (El menú se genera en HTML como una lista de enlaces que el Googlebot detecta como el menú de navegación de la pagina y asi identifica las secciones del sitio que son importantes).

Menu en HTML
<ul id=”menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Seccion uno</a></li>
<li><a href=”#”>Seccion dos</a>
<ul>
<li><a href=”#”>Subseccion uno</a></li>
<li><a href=”#”>Subseccion dos</a></li>
<li><a href=”#”>Subseccion tres</a></li>
</ul>
</li>
<li><a href=”#”>Seccion tres</a></li>
</ul>

Y asi se veria el menu antes de aplicarle CSS

Como ven el primer UL que abre el menu tiene asignado un ID “menu” es el identificador que utilizaremos para asignarle las propiedades en CSS.

Ahora el código CSS del menú desplegable.

/*Menu CSS */
#menu {
font:Verdana, Arial, Helvetica, sans-serif;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:11px;
margin:0px;
padding:0px;
top: 70px;
display:block;
}
#menu > li {
list-style-type:none;
float:left;
display:block;
margin:0;
position:relative;
padding:0;
width:150px;
background-repeat:no-repeat;
}
#menu > li:hover ul { display:block; }
#menu > li:hover {
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#menu li ul {
margin:0px;
padding:0px;
display:none;
}
#menu li ul li {
list-style-type:none;
margin:0;
}
#menu li ul li a {
text-decoration:none;
padding:10px 30px 10px 30px;
.padding:9px 30px 5px 30px;
width:170px;
display:block;
border-left:4px solid #000066;
background-position:left;
color:#851818;
border:none;
}
#menu li ul li:hover a {
background-position:left;
color:#FFFF00;
}
#menu li span {
cursor:pointer;
margin:0;
font-weight:normal;
display:block;
padding:13px 13px 13px 35px;
}

Eso es todo, tendría que escribir varias paginas para explicar todas las propiedades que se usan en este CSS así que si quieren saber que pasa exactamente simplemente busquen en la referencia de CSS.

Lo importante es el anidamiento de los UL dentro de los LI para generar los desplegables, de manera que una vez que se carga empieza con un valor de display: none y cuando se posa encima de cada LI (a:hover) se cambia por un display:block.

5 comments for “Crear un menú desplegable con CSS pero sin Javascript

  1. RCH
    13 diciembre, 2010 at 2:15 PM

    Este menú desplegable funciona en todas las versiones de IE?

    • 13 diciembre, 2010 at 2:29 PM

      Lo he probado en IE7 en adelante, sin embargo debe tenerse en cuenta que las opciones dadas por el webkit no estarán disponibles en ninguna versión de Internet explorer, así que el menú no tendrá esquinas redondeadas en IE pero funcionara igual. xD

  2. RCH
    13 diciembre, 2010 at 2:19 PM

    Muy bueno el tutorial, me parece fácil de comprender y bien detallado, Muchas gracias por compartir tus conocimientos con todos nosotros

  3. DanteCesar
    19 julio, 2011 at 6:14 AM

    Les recomiendo este sitio, explica cada seccion
    http://www.chuidiang.com/css/ejemplos/menu_desplegable_css.php

    una observacion tengan cuidado con la vercion de Dreamweaver, pues en mi caso no funcionaba por los # tuve k cambiarlos a .
    ciudado tambien con las ” comillas ”. “estas con las chilas” – ”estas no”

  4. Marco Cueto
    9 septiembre, 2011 at 1:56 PM

    Hola, DanteCesar, no me quedó muy claro tu comentario, a mi no me ha funcionado aún, podrías explicarme un poco mas detallado? yo tngo dreamwaver cs3

Deja un comentario

A %d blogueros les gusta esto: