Una de las cosas más básicas y necesarias dentro de un sitio web, es un menú de opciones. Por eso, en está ocasión, vamos a aprender a crear un sencillo, pero elegante menú dropdown que utilice única y exclusivamente HTML y CSS ¡Manos a la obra!
Tabla de Contenido
Antes del dropdown, hagamos primero el menú básico
Vamos a realizar un menú básico y simple con una etiqueta <nav>, una etiqueta <ul> y unos cuantos <li> con enlaces en su interior:
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
Trabajemos un poco sus estilos. Para ello, vamos a crear un archivo llamado menu.css y lo enlazamos a nuestro documento.
<link href="menu.css" rel="stylesheet" type="text/css" />
Dentro de ese archivo, colocamos un pequeño reset básico para probar (está parte es opcional si ya tienes un reset CSS establecido)
html, body, ul, li, a, div, nav{
margin: 0;
padding: 0;
}
Veamos como iniciamos nuestro menú.
Ahora, tomemos el <nav>, le daremos un ancho del 100%, un alto de 50 píxeles y lo pintaremos de color rojo.
nav{
width: 100%;
height: 50px;
background: red;
}
Luego, al <ul> que está dentro del <nav> le quitamos las viñetas.
nav ul{ list-style: none; }
Después, a cada <li> de ese <ul> lo convertimos en un inline-block con 20% de ancho (porque son 5 / 100 = 20), le ponemos la misma altura que <nav> y los hacemos flotar hacia la izquierda. También su posición será relativa.
nav ul li{
position: relative;
display: inline-block;
width: 20%;
height: 50px;
float: left;
}
Veamos como se ve ahora.
Trabajaremos con los enlaces. Los convertimos en un bloque con 100% de ancho y hacemos que hereden la altura de su predecesor. Aumentamos un poco la fuente y eliminamos la línea inferior típica de los enlaces. Lo centramos horizontalmente y para conseguir el centrado vertical, le ponemos un line-height con la altura inicial.
nav ul a{
display: block;
width: 100%;
height: inherit;
font-size: 1.2em;
text-align: center;
text-decoration: none;
line-height: 50px;
color: #FFF;
}
Para el hover (pasar el ratón por el enlace) sólo hacemos un cambio de color de fondo.
nav ul a:hover{
background: #333;
}
Y ahora tenemos la primera parte terminada.
Hagamos submenús para nuestro menú dropdown
Vamos a tomar el segundo elemento del menú y le colocaremos un <div> que servirá de submenú. Para poder reutilizarlo, le asignaremos como nombre de clase la palabra submenu. Dentro del mismo, colocaremos un <ul> con 3 opciones (pueden ser las que se necesiten)
<div class="submenu">
<ul>
<li><a href="#">Producto 1</a></li>
<li><a href="#">Producto 2</a></li>
<li><a href="#">Producto 3</a></li>
</ul>
</div>
Como se mencionó arriba, lo pondremos dentro del segundo elemento del menú principal.
En cuanto al estilo, necesitamos que su posición sea absoluta. También lo convertimos en un bloque con un ancho del 100%, le ponemos un color de fondo rojo, y dejamos que herede el valor de float de su antecesor.
.submenu{
position: absolute;
display: block;
width: 100%;
background: red;
float:inherit;
}
Luego para que no se apilen, a cada <li> dentro de submenu lo convertimos en un bloque al 100% de ancho.
.submenu ul li{
display: block;
width: 100%;
}
Comienza a tomar forma.
Para que nuestro submenú comience a funcionar, necesitamos hacer dos cosas simples: primero tenemos que cambiar el display de submenu a none.
.submenu{
position: absolute;
display: none; /* Cambiar sólo este valor */
width: 100%;
background: red;
float:inherit;
}
Después, le diremos que al hacer hover sobre los <li> del menú principal, entonces submenú recupera su valor de display.
nav ul li:hover .submenu{
display: block;
}
¡Es hora de probarlo, veámoslo, veámoslo brillar!
Creando un submenú para el submenú
En caso de que necesitemos un tercer nivel, haremos algo similar. En nuestro ejemplo insertaremos un <div> con nombre de clase subsubmenu dentro de el tercer elemento de nuestro submenú.
De regreso en nuestro CSS, copiamos submenu y esa copia la renombramos como subsubmenu. Además le añadiremos un left al 100% y un top con valor de 0.
.subsubmenu{
position: absolute;
display: none;
left: 100%;
top: 0;
width: 100%;
background: red;
float:inherit;
}
Por último, queremos que al hacer hover sobre los elementos <li> de submenu, el subsubmenu recupere su propiedad display.
.submenu ul li:hover .subsubmenu{
display: block;
}
¡Y este es nuestro resultado final!
¡Pon a prueba el código!
¡Y eso es todo por hoy, amigos! Puedes probar el código, editarlo o ajustarlo a tus necesidades.
¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.
Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.
