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.
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:
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%;
}
Este articulo es el contenido original del blog de nosunelanube
Fuente: este post proviene de Nosunelanube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado: