Mostrar linea creciente Menu Divi

css linea menu divi

En este estilo de menú, agregaremos una línea que parece crecer de izquierda a derecha directamente debajo del elemento del menú sobre el que se pasa el cursor. También establecerá una línea estática directamente debajo del enlace de la página activa.

linea menu divi

Este es un efecto muy agradable que puede funcionar bien en prácticamente cualquier tipo de sitio, además de editar el código de este estilo para cambiar el color y el ancho de línea es bastante fácil para cualquier nivel de usuario.

Haz clic abajo para ver el video demostración:

 

como Añadir una linea en menu divi
Es un efecto de desplazamiento bastante popular que se ve en muchas páginas web.
Creo que es la sutileza lo que lo hace tan versátil, y que se puede usar en cualquier diseño web que se desee.
Aquí puedes ver si quieres ver más opciones de cómo personalizar el menú de Divi.

#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 LINEA ***/
 height: 3px; /*** GROSOR DE LINEA ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -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%;
}

 

Te puede interesar sobre seo y diseño web en Mairena del Aljarafe
¿Quieres aprender diseño web en Mairena del Aljarafe?. Nosunelanube ofrecemos cursos WordPress presenciales para emprendedores y Pymes.

Suscríbete a nuestros boletines

Mantente informado con las últimas tendencias.

Únicamente enviaremos información altamente interesante y novedosa.

¿Necesitas una auditoría SEO?

Conecta con algunos de nuestros expertos de forma totalmente GRATUITA

Comentarios

¿Qué opinas?

0 comentarios

Enviar un comentario

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

Suscríbete

Recibe noticias semanales

Nulla porttitor pretium blandit. Suspendisse id nulla et erat feugiat vehicula. Nam ac sapien maximus sem auctor sollicitudin sit amet a enim. Nulla facilisi. Donec et commodo tellus.