Menú horizontal con efecto hover deslizante (CSS)

Hoy toca explicar una cosa que vi hace algún tiempo y que le da cierto toque sofisticado a un menú horizontal simple tipo flat. La cuestión es que con JavaScript (apoyándonos en jQuery) la cosa es sencilla, pero este que os presento -aunque tenga alguna línea más de código- se genera por entero con CSS, así que apuntároslo, especialmente los que seguís sin instalar esa librería para no aumentar la carga del blog.

El truco principal ya se deja ver en el HTML que necesitamos. Tras la serie de enlaces de texto metidos dentro de una caja debidamente marcada con un selector ad hoc (menudes), añadimos una caja extra que contendrá el elemento que hará las veces de señal o marca y que será lo que se deslizará hasta el enlace sobre el que pongamos el puntero.

<div class="menudes">
<a href="">Inicio</a>
<a href="">Portfolio</a>
<a href="">Acerca de</a>
<a href="">Contacto</a>
<div class="marca"></div>
</div>

El resto del método se basa simplemente en posicionar de manera absoluta esa marca sobre la lista de enlaces, llevarla fuera del menú con un left negativo y luego con el hover ir moviéndola cambiando el valor de ese left en función del enlace señalado. Como es habitual, con un transition conseguiremos que el efecto no sea brusco, de todo o nada, sino con un movimiento suave.


Para hacer todo eso necesitamos el siguiente estilo, en el que la mayoría de reglas son las comunes a cualquier menú. Lo he redactado en porcentajes para que os valga para cualquier ancho de página y los comentarios sirven para variaciones con cualquier número de elementos del menú, lo cual lo hace casi adaptable (RWD). Sólo haría falta alguna que otra media query para cambiar tamaños de fuentes y listo.

.menudes {
position: relative;
overflow: hidden;
width: 70%;
margin: 10px auto 10px;
border-radius: 8px;
background: #025BA3;
text-align:center;
}
.menudes a {
display: inline-block;
width: 25%; /* 100% dividido por el número de elementos del menú */
box-sizing: border-box;
padding: 10px 5px;
color: #fff;
text-decoration: none;
}
.marca {
position: absolute;
bottom: 4px;
left: -12.5%; /* Al menos 1/2 del ancho de cada enlace */
width: 12.5%; /* 1/2 del ancho de cada enlace */
height: 4px;
background: #fff;
transition: 0.5s ease-in-out;
}
.menudes a:nth-child(1):hover ~ .marca {
left: 6.25%; /* 1/4 Ancho del enlace */
}
.menudes a:nth-child(2):hover ~ .marca {
left: 31.25%; /* 1/4 Ancho del enlace + 1 vez ancho enlace */
}
.menudes a:nth-child(3):hover ~ .marca {
left: 56.25%; /* 1/4 Ancho del enlace + 2 veces ancho enlace */
}
.menudes a:nth-child(4):hover ~ .marca {
left: 81.5%; /* 1/4 Ancho del enlace + 3 veces ancho enlace */
}

Ya decía que todo esto de los porcentajes era para hacerlo más universal, pero en la parte final es dónde está el meollo de eso de mover la marca utilizada, en este caso una simple caja con una anchura de la mitad de la del enlace, 4px de alto y un relleno de fondo blanco. Lo que viene siendo una raya gorda.

En esa parte final veis que hemos usado un símbolo raro que podéis arrancar de vuestro teclado con alt+126 (~) y que es un selector de hermanos no necesariamente adyacentes (para los adyacentes usaríamos +). En este caso hace que las reglas para marca sean ejecutadas siempre que se haga hover en cualquier enlace con clase menudes que además sea hermano de marca.

Por último, para que no sea "cualquier enlace" sino justo el que queremos, simplemente hemos añadido :nth_child(x) para identificar el enlace que se está seleccionando (1, 2, 3, etc.)

Bonito y fácil una vez que se conoce el truco ¿verdad? Veamos el resultado pasando el puntero por estos enlaces:

InicioPortfolioAcerca deContacto

---

¿Y qué tal si ajustamos un poco el estilo y hacemos otro tipo de marca? Esta es un rectángulo que ocupa todo el espacio destinado a un enlace. Por no extenderme demasiado sólo apunto los selectores y las reglas principales que habría que cambiar/añadir con respecto a lo anterior:

.menudes a {
border-right: 2px solid #fff;
position: relative;
z-index: 2;
}
.menudes a:last-child {
border-right:2px solid transparent;
}
.marca {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: -30%;
width: 25%;
height: 40px;
background: #fff;
opacity:.5;
transition: 0.5s ease-in-out;
z-index: 1;
}
.menudes a:hover ~ .marca2 {
margin-left: -1px;
}
.menudes a:nth-child(1):hover ~ .marca {
left: 0%;
}
.menudes a:nth-child(2):hover ~ .marca {
left: 25%; /* 1/4 del ancho total */
}
.menudes a:nth-child(3):hover ~ .marca {
left: 50%; /* 2/4 del ancho total */
}
.menudes a:nth-child(4):hover ~ .marca {
left: 75%; /* 3/4 del ancho total */
}

InicioPortfolioAcerca deContacto

---

Y por último algo similar a lo anterior pero sólo con un borde volantero como marca. Este sí lo pongo entero para que veáis como se hace con más enlaces en el menú.

.menudes {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto 10px;
text-align:center;
}
.menudes a {
display: inline-block;
width: 20%; /* 100% dividido por el número de elementos */
box-sizing: border-box;
padding: 10px 5px;
color: #000;
background: #ccc;
opacity:.5;
text-decoration: none;
font-weight:bold;
text-align: center;
border-right: 2px solid #fff;
position:relative;
z-index:2;
}
.menudes a:first-child {
border-left: 1px solid #fff;
}
.marca {
position: absolute;
width: 20%;
height: 38px;
box-sizing: border-box;
bottom: 0;
left: -30%;
border: 2px solid #990000;
transition: 0.5s ease-in-out;
z-index:1;
}
.menudes a:hover ~ .marca {
margin-left: -1px;
}
.menudes a:nth-child(1):hover ~ .marca {
left: 0%;
}
.menudes a:nth-child(2):hover ~ .marca {
left: 20%; /* 1/5 del ancho total */
}
.menudes a:nth-child(3):hover ~ .marca {
left: 40%; /* 2/5 del ancho total */
}
.menudes a:nth-child(4):hover ~ .marca {
left: 60%; /* 3/5 del ancho total */
}
.menudes a:nth-child(5):hover ~ .marca {
left: 80%; /* 4/5 del ancho total */
}

InicioPortfolioApuntesAcerca deContacto

Actualización

El código adaptado para menús construídos con listas en 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