CSS3: Menú Desplegable con hover
En el tutorial de hoy vamos a hablar de una propiedad CSS que nos ahorrará muchos quebraderos de cabeza y sobretodo evitar el uso de Javascript o jQuery. Lo que hace de la propiedad hover una propiedad superutil es su facilidad para hacer cualquier función con tan solo pasar por encima del elemento al que se le aplica la propiedad.
Menú Desplegable
En este caso vamos a probar dicha propiedad haciendo unos menús super sencillos que pueden aportar a nuestra web un toque elegante a la par que estéticos ya que no van a ocupar espacio alguno, hasta que se pase por encima de él.
Vamos a empezar por el código HTML base para hacer un menú, que básicamente consiste en hacer una lista desordenada a la cual luego le añadiremos los estilos.
Código:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ejemplo de z-index</title>
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="nivel1">Menú 1</a>
<ul class="nivel2">
<li><a href="#">Menú 1.1</a></li>
<li><a href="#">Menú 1.2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Menú 2</a>
<ul class="nivel2">
<li><a href="#">Menú 2.1</a></li>
<li><a href="#">Menú 2.2</a></li>
<li class="nivel2"><a class="nivel2" href="#">Menú 2.3 »</a>
<ul class="nivel3">
<li><a class="primera" href="#">Menú 2.3.1</a></li>
<li><a href="#">Menú 2.3.2</a></li>
<li><a href="#">Menú 2.3.3</a></li>
</ul>
</li>
<li><a href="#">Menú 2.4</a></li>
<li><a href="#">Menú 2.5</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Menú 3</a>
<ul class="nivel2">
<li><a href="#">Menú 3.1</a></li>
<li><a href="#">Menú 3.2</a></li>
<li><a href="#">Menú 3.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Esto nos dará de resultado algo como esto:
Pero no os asusteis, aunque de momento no se sepa lo que es, con los estilos que le vamos a aplicar va a ir tomando forma hasta convertirse en nuestro menú desplegable.
Ahora vamos a proceder con los estilos. Esta vez vamos a hacer los estilos en una hoja aparte del documento. En mi caso, mi hoja de estilo se llama «estilo», por lo tanto la linkeamos al html de la siguiente manera.
Código:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ejemplo de z-index</title>
<link rel="stylesheet" href="estilo.css" />
</head>
Acordaros siempre de respetar las rutas, porque si le ponéis la ruta equivocada no os va a encontrar el archivo.
Ahora vamos a escribir los primeros estilos en nuestro archivo css, que son solo de aspecto visual para posicionar los elementos de nuestra lista.
Código:
* {
margin: 0px;
padding: 0px;
outline: 0;
}
#menu {
text-align: center;
font-size: 0.7em;
width: 540px;
margin: 20px auto;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
width: 162px;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #fff;
background-color: rgba(59,93,148,1);
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li ul li a {
width: 160px;
padding: 8px 0px;
border-top-color: transparent;
}
Estos son los estilos generales con los que nuestra lista debería ir cogiendo forma:
Ocultar elementos
El siguiente paso es ocultar los submenús para que cuando se pase por encima del menú principal estos se vaya mostrando debajo del mismo.
Código:
#menu ul li ul {
display: none;
}
#menu ul li ul li ul li a.primera {
border-top-color: #fff;
}
#menu ul li.nivel1 {
float: left;
margin-right: 1px;
}
#menu ul li a.nivel2 {
color: #000;
}
#menu ul li a.nivel1, #menu ul li a.nivel2 {
display: block;
position: relative;
}
El resultado sería este:
Observamos que desaparecen los submenús y que se dan unas determinadas propiedades a cada submenú dependiendo del nivel en el que se encuentre para conseguir un mejor efecto visual.
Aplicando la propiedad hover
Ya tenemos todo hecho, ya solo falta aplicar la propiedad que nos atañe en este tutorial y tendremos nuestro menú desplegable acabado.
La propiedad hover, como ya dije, es muy sencilla, consiste en añadir al selector del elemento que queremos que se active al pasar por encima :hover.
Para que lo veais más claro. El ejemplo de un elemento al que seleccionamos por id.Sería algo como esto.
#elemento:hover {
background: green;
}
Esto hace que cuando pase por encima del elemento seleccionado cambie a color verde, y así con cualquier propiedad que queremos que haga al pasar por encima.
Vamos a ver como se aplica a nuestro menú.
#menu ul li:hover {
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{
display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {
display: block;
position: absolute;
left: 161px;
top:0px;
}
#menu ul li ul li a:hover {
border-top-color: #000;
position: relative;
}
Como veis en este caso, se aplica la propiedad hover en un elemento pero el resultado se muestra en otro. Tranquilos, la funcionalidad es la misma. Tú aplicas la propiedad en el menú principal que es sobre el que vas a pasar por encima, pero el resultado lo quieres ver en el submenú porque tiene que aparecer. De esta manera se aplica el hover en un elemento y el resultado se ve en otro.
Quedando así nuestro menú:
Juntando todos los trozos de estilo, nuestro archivo CSS quedaría así.
/* PROPIEDADES GENERALES */
* {
margin: 0px;
padding: 0px;
outline: 0;
}
#menu {
text-align: center;
font-size: 0.7em;
width: 540px;
margin: 20px auto;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
width: 162px;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #fff;
background-color: rgba(59,93,148,1);
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li ul li a {
width: 160px;
padding: 8px 0px;
border-top-color: transparent;
}
#menu ul li ul {
display: none;
}
/* PROPIEDADES ESPECÍFICAS */
#menu ul li ul li ul li a.primera {
border-top-color: #fff;
}
#menu ul li.nivel1 {
float: left;
margin-right: 1px;
}
#menu ul li a.nivel2 {
color: #000;
}
#menu ul li a.nivel1, #menu ul li a.nivel2 {
display: block;
position: relative;
}
/* PROPIEDAD HOVER */
#menu ul li:hover {
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{
display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {
display: block;
position: absolute;
left: 161px;
top:0px;
}
#menu ul li ul li a:hover {
border-top-color: #000;
position: relative;
}
Y nada más, de esta manera tan secilla y sin necesidad de usar librerias jQuery o Javascript se consigue hacer un Menú Desplegable. Espero que os haya gustado y nos vemos en el próximo tutorial.
Buen aporte, gracias.