Menú vertical con efecto hover deslizante | Oloblogger 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 d...

19 de octubre de 2014

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.

Menú vertical con efecto hover deslizante


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.


¿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
Copy URL

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

follow us in feedly

8 comentarios :

  1. ¿Por qué falla al poner el puntero en "pintura"?

    Y otra cosa, ¿sigue siendo imprescindible añadir las líneas con -moz y -webkit?

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Lo mismo digo que en la entrada del otro menú. En Chromium va perfecto, pero en Firefox me falla la palabra "pintura".

      Eliminar
    2. En este caso había una errata. Dos % dónde sólo debía haber uno. Ya debe funcionar

      Eliminar
  2. Saludos Oloman.. me parece Excelente la forma en que publicas este Post hacia dias no entraba.. y se ve fabuloso todo queda ahi sencillo de copiar y pegar sin muchos pasos.. Felicidades bro.. aunque este post lo habia visto anteriormente en otra entrada tuya solo que no con el Efecto Hover... Saludos un Abrazo !!!

    ResponderEliminar
    Respuestas
    1. Supongo que te refieres al Codepen. Últimamente lo estoy usando bastante para las pruebas y ya luego lo enlazo para que lo podáis ver allí.

      Eliminar
    2. Exactamente me referia al codepen hace mas agradable copiar y pegar ademas en mi opinio se ve muy Excelente jejejeje.. un Abrazo mi Hermano

      Eliminar
  3. Hola donde puedo pegar el css ? no tengo mucha esperiencia en los bloggs

    ResponderEliminar
    Respuestas
    1. En Blogger se puede hacer de 3 formas DJ Latino. Aquí explico todas ellas y un poco más sobre CSS a nivel básico.

      Eliminar