Seleccionar página
4
Volver al contenido del HUB: Hub | Snippets Menú

Efecto Hover de Subrayado en el Menú en Divi

En este Hub Content hablaremos sobre cómo dar un efecto hover de subrayado en el menú de nuestra página web hecha con Divi.

Cuando tienes diseñado el Menú con las opciones generales, es hora de darle una personalización propia y crear un Menú que llame la atención a tus visitantes de tu web y que dé un excelente aspecto de calidad.

Podemos aplicar varios efectos a los Menús, sin embargo, en esta ocasión, hablaremos de uno en particular. Consiste en añadir una línea bajo cada título de la cabecera de tu web para darle ese efecto de hover Subrayado en el menú.

Esta línea queda fija en el título con enlace activo (al que estés accediendo en ese momento) y se muestra en hover cuando pasas el ratón por los demás títulos, apareciendo de izquierda a derecha.

Este efecto se puede aplicar de una manera muy sencilla usando un poco de código CSS, vamos a ello:

Nos vamos al menú de WordPress > Divi > Opciones del tema

Y nos ubicamos en la ficha General:

Usamos el siguiente Snippet de CSS

Copia el código CSS de acá abajo y luego de eso, ve a las opciones del tema Divi > Generales > insertar código CSS personalizado y pega el código CSS.

#top-menu .current-menu-item a::before, #top-menu .current_page_item a::before {
   content: "";
   position: absolute;
   z-index: 2;
   left: 0;
   right: 0;
}
#top-menu li a:before {
   content: "";
   position: absolute;
   z-index: -2;
   left: 0;
   right: 100%;
   bottom: 50%;
   background: #15bf86; /*** COLOR DE LA LINEA INFERIOR ***/
   height: 3px; /*** GROSOR DE LA LINEA INFERIOR ***/
   -webkit-transition-property: right;
   transition-property: right;
   -webkit-transition-duration: 0.3s; /**VELOCIDAD DEL EFECTO**/
   transition-duration: 0.3s; /**VELOCIDAD DEL EFECTO**/
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
}
#top-menu li a:hover {
 	opacity: 1 !important;
}
#top-menu li a:hover:before {
 	right: 0;
}
#top-menu li li a:before {
 	bottom: 10%;
}

Puedes cambiar cualquier detalle como el color, el grosor de la línea y la velocidad del efecto.


¡Recuerda guardar cambios! y a continuación comprueba que se hay aplicado el estilo a tu menú de tu web correctamente.

Pues bien, el resultado que tendremos será el siguiente:

¿Te ha gustado este tutorial?

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este post.

Nos vemos en el próximo Divi Snippet.

Contenido Relacionado

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *