Menú vertical con efecto hover deslizante

Hoy construiremos un menú vertical, pero con un estilo determinado para que al pasar el puntero por encima de uno de los enlaces, en lugar de generar un simple efecto de cambio de color de fuente, fondo, bordes o similar, una especie de marca de un color que contraste con el fondo del menú, se desplazará de arriba abajo hasta llegar al elemento seleccionado.

Si movemos el puntero hasta otro enlace, allá que irá la marca y si lo quitamos del menú, esta subirá hasta desaparecer. Vamos, tipo ascensor.

Hace ya tiempo vimos esto mismo pero aplicado a un menú horizontal y al igual que entonces, la estructura de menú que utilizaré es la normal. De esta manera este CSS lo podréis utilizar para cualquier menú que ya tengáis sin necesidad de reconstruir todos los enlaces, sino simplemente añadiendo un div especial al final de la relación de enlaces y una caja con una clase determinada dentro de la cual meterlo todo.

Como dije, la estructura HTML es sencilla, una caja (en el ejemplo con clase menudesv) y dentro de ella una serie de enlaces de texto. Eso sí, al final de todos los enlaces y siempre dentro de la caja general, añadiremos un div vacío con la clase menudesv. Este último será el que generará un rectángulo de color para el efecto.

<div class="menudesv">
<a href="#">Inicio</a>
<a href="#">Pintura</a>
<a href="#">Escultura</a>
<a href="#">Grabados</a>
<a href="#">Música</a>
<a href="#">Danza</a>
<a href="#">Acerca de</a>
<a href="#">Contacto</a>
<div class="marcav"></div>
</div>

Ya lo anticipé, pero como podéis comprobar sólo es cuestión de añadir a vuestro menú actual un par de div con las clases adecuadas. A estas alturas supongo que ya todos sabéis que esto va en cualquier gadget de cabecera, sidebar o pie, aunque por su formato quizás lo más adecuado sería insertarlo en la barra lateral. Dicho queda por si acaso. Para los que lo quieran en la plantilla, simplemente habría que cambiar las comillas dobles (") por simples (').


Y como me gusta decir, ahora viene la magia que hace que esto funcione como queremos, el CSS.

/* Contenedor principal adaptable */
.menudesv {
position: relative;
width: 100%;
max-width: 300px;
min-width: 100px;
overflow: hidden;
margin: 10px auto;
background: #000;
text-align:center;
}
/* Formato de los enlaces */
.menudesv a {
position: relative;
z-index: 2;
display: block;
width: 100%;
padding: 8px;
border: 1px solid #333;
color: white;
font-family: arial;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
/* Ajustes de bordes para no doblar su ancho */
.menudesv a {
border-top: 0;
}
.menudesv a:first-child {
border-top: 1px solid #333 !important;
}
/* Rectángulo que aparecerá al hacer hover */
.marcav {
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 12.5%;
background: orange;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Sucesos al superponer el puntero */
.menudesv a:hover {
color: #000;
}
.menudesv a:nth-child(1):hover ~ .marcav {
top: 0%;
}
.menudesv a:nth-child(2):hover ~ .marcav {
top: 12.5%; /* (100/nº elementos) * 1 */
}
.menudesv a:nth-child(3):hover ~ .marcav {
top: 25%; /* (100/nº elementos) * 2 */
}
.menudesv a:nth-child(4):hover ~ .marcav {
top: 37.5%; /* (100/nº elementos) * 3 */
}
.menudesv a:nth-child(5):hover ~ .marcav {
top: 50%; /* etc, etc */
}
.menudesv a:nth-child(6):hover ~ .marcav {
top: 62.5%;
}
.menudesv a:nth-child(7):hover ~ .marcav {
top: 75%;
}
.menudesv a:nth-child(8):hover ~ .marcav {
top: 87.5%;
}

No hay mucho que comentar sobre el formato del menú horizontal, salvo que como siempre se pueden cambiar colores, anchos, bordes etc.

La parte que controla el :hover sí que tendréis que ajustarla en función del número de elementos que tenga vuestro menú. En primer lugar hay que declarar tantos .menudesv a:nth-child(X):hover ~ .marcav como enlaces vaya a tener el menú, cada uno con su correspondiente número ordinal (X).

Luego sólo se trata de ponerle un valor para el top igual a la n-esima parte del alto total. Eso se calcula simplemente dividiendo 100% entre el número de elementos y luego multiplicando por el puesto que ocupa el enlace menos uno.

En el ejemplo, al ser 8 enlaces el valor base es 100/8=12.5% por lo que para el primero el valor de top será 12.5*(1-0)= 0.
Para el segundo 12.5*(2-1)=12.5%
Para el tercero 12.5*(3-1)=25.0%

Para el segundo 12.5*(4-1)=37.5%
etc.

Hoy como estoy perezoso inserto directamente el CodePen dónde lo probé y dónde vosotros podréis experimentar antes de pasarlo a vuestro sitio web.

See the Pen Menú deslizante CSS en vertical by Oloman (@oloman) on CodePen.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter