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.

Botón compartir en WhatsApp para Blogger

Sin duda WhatsApp es una de las aplicaciones más populares que existen actualmente para teléfonos mó...

Menú tarjetero CSS para enlazar tus perfiles sociales

Esta es una tontería como cualquier otra para poder mostrar a nuestros lectores las redes sociales d...

Blogroll personalizado a modo de fichas o sumarios

El siguiente invento es casi para uno mismo, ya que está diseñado para reproducir una serie de mini ...

Plantillas Blogger con error al mover gadgets

Me he decidido a publicar esto porque ya me ha dado demasiado la lata este tema y supongo que a otro...

Botones sociales ligeritos de peso para evitar demora en la carga

Los botones sociales que casi todos ponemos en nuestras páginas para que los lectores puedan compart...

Desplegar y plegar con un clic usando CSS. Crear spoilers con INPUT

Para ocultar elementos de una página y hacerlos aparecer (o viceversa) a voluntad, lo más socorrido ...