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 tipoflat. 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 omarca 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 unleft negativo y luego con elhover ir moviéndola cambiando el valor de eseleft en función del enlace señalado. Como es habitual, con untransition 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 otramedia 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 siendouna raya gorda.

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

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:

Inicio Portfolio Acerca de Contacto

¿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 */
}

Inicio Portfolio Acerca de Contacto

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 */
}

Inicio Portfolio Apuntes Acerca de Contacto

Actualización

El código adaptado para menús construídos con listasen CodePen