Efectos CSS para los menus de DIVI

14

JULIO, 2017

Divi
Menú
Personalizado

Hoy os traigo el proceso para personalizar de tres maneras diferentes los menus de DIVI en español. Esta información ha sido sacada de un artículo de Leslie Bernal para el blog de Elegant Themes, si quieres ver el artículo original, haz click aquí.

En el código encontrarás comentarios para que te sea fácil ajustarlo para los menús de tus diseños, además, para que te sea más sencillo he incluido imágenes para que encuentres con facilidad donde lo tienes que injertar.

NOTA: Cualquier duda que tengas no dudes en preguntarme, ya sea vía contacto o en los comentarios.

«Cuatro estilos de menús  de DIVI para conquistarlos a todos»

Formato de cabecera por defecto

Paso previo: Menus de DIVI por defecto

Antes de lanzarnos a injertar el código CSS para cada efecto deberemos hacer un pequeño ajuste para que todo vaya bien. Simplemente vamos a poner los menus de DIVI por defecto, para ésto vete a DIVI > Personalizador de temas > Cabecera y navegación > Formato de cabecera y en Estilo de la cabecera pon «Por defecto».

Recuerda que si acabas de instalar el tema, debería
estar seleccionada
«Por defecto» y no tendrás que cambiar nada. Pero si por lo contrario eres como yo que
lo toqueteo todo, comprueba que esta puesta en «Por defecto».

Ejemplo de línea que crece dinámicamente.

1. Primer Estilo: Línea dinámica.

Este efecto con CSS añade una línea debajo del elemento por el que pasamos el cursor del ratón. La línea que aparece crece de manera dinámica de izquierda a derecha. Y no solo eso, sino que además añade una línea estática bajo el elemento activo e ese momento.

Para implementarlo en nuestra página web con DIVI solo necesitamos añadir el código que encontrarás a continuación en DIVI > Opciones del Tema > CSS Personalizado. Recuerda cambiar los colores y el
grosor de la línea para ajustarlos a tu diseño. Lás líneas de código para hacerlo están marcadas con un
comentario.

/* CSS MENU: LINEA DINAMICA*/
#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: #048fc3; /*** COLOR DE LA LINEA ***/
    height: 3px; /*** GROSOR DE LA 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%;
}

Ejemplo de línea dinámica y cuadrado

2. Segundo Estilo: Línea dinámica + Cuadrado.

Este efecto con CSS es una variante del anterior, también añade una línea debajo del elemento por el que pasamos el cursor del ratón. Ésta crece de manera dinámica de izquierda a derecha. A diferencia del anterior este añade un cuadrado en el elemento que tenemos seleccionado.

Como en el efecto anterior, para implementarlo en nuestra página web con DIVI solo tenemos que añadir el código que encontrarás a continuación en DIVI > Opciones del Tema > CSS Personalizado. Recuerda cambiar los colores y el grosor de la ínea para ajustarlos a tu diseño. Lás líneas de código para hacerlo están marcadas con un comentario.

/* CSS MENU: LINEA DINAMICA + CUADRADO */
#top-menu li > a:hover {
    box-shadow: 0 8px 0 0 #048fc3 !important; /*** COLOR Y GROSOR DE LA LINEA ***/
    padding-bottom: 34px;
    opacity: 1 !important;
}
#top-menu li li a {
    padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
    border: 8px solid #048fc3; /*** COLOR Y GROSOR DEL CUADRADO ***/
    padding: 10px;
    margin-bottom: -10px;
}

Ejemplo de botones que cambian de color

3. Tercer Estilo: Botones que cambian de color.

Este efecto con CSS viene muy bien para páginas con estilo Material Design. Se trata de dar apariencia de botones a los elementos del menu. Y que además cambian de color cuando pasamos el cursor por encima.

Una vez más, para implementarlo en nuestra página web con DIVI realizaremos el mismo proceso. Añadiremos el código que encontrarás a continuación en DIVI Opciones del Tema CSS Personalizado.

Recuerda cambiar los colores para ajustarlos a tu diseño. Las líneas de código para hacerlo están marcadas con un comentario.

/* CSS MENU: BOTONES QUE CAMBIAN DE COLOR */
.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
    padding-bottom: 15px;
}
#top-menu li {
    padding-right: 5px;
}
#et-top-navigation {
    padding: 20px 0 !important;
}
#top-menu li a {
    background: #C1B2AB; /*** COLOR DEL FONDO ***/
    padding: 15px 20px;
    border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
    color: #fff !important;
}
#top-menu li a:hover {
    background: #559CAD !important; /*** COLOR DE FONDO EN HOVER ***/
}
#top-menu li.current-menu-item > a {
    background: #edc77b; /*** COLOR DE FONDO DEL ENLACE ACTIVO ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
    content: none;
}

Ejemplo de botón con sombra hover

5. Bonus: Menus de DIVI con botones con sombra.

Y para terminar, voy a poner una modificación del último efecto. Éste muestra un botón con sombra al pasar el cursor por encima. Recuerda cambiar los colores para adecuarlo.

Y si claro que si, con este lo mismo. Para implementarlo necesitamos añadir el código que encontrarás a continuación en DIVI > Opciones del Tema > CSS Personalizado.

Recuerda cambiar los colores  para ajustarlos a tu diseño. Lás líneas de código para hacerlo están marcadas con
un comentario.

/* CSS MENU: BOTÓN EN HOVER */
.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
    padding-bottom: 15px;
}
#top-menu li {
    padding-right: 5px;
}
#et-top-navigation {
    padding: 20px 0 !important;
}
#top-menu li a {
    background: rgba(0,0,0,0); /*** COLOR DE FONDO ELEMENTOS ***/
    padding: 15px 20px;
    border-radius: 10px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
    color: #fff !important;
}
#top-menu li a:hover {
    background: #048fc3 !important; /*** COLOR DE FONDO EN HOVER ***/
    box-shadow: 2px 2px 4px #888888;
}
#top-menu li.current-menu-item > a {
    background: rgba(0,0,0,0); /*** COLOR DE FONDO ELEMENTO ACTIVO ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
    content: none;
}

Adaptación de artículo de Leslie Bernal

Eso es todo amigos.

Espero que esto les sirva de ayuda, en realidad como dije antes, todo el trabajo de diseñar estos efectos de menús es de Leslie Bernal en uno de sus artículos del blog de Elegant Themes que puedes ver aquí.

Yo simplemente he querido realizar una traducción de ese artículo adaptando también las imágenes, ya que los nombres de los menús cambian, lógicamente.

Y bueno, también hacer mi pequeño aporte con esa modificación del último efecto para conseguir una variante. Cuando encuentre «el momento adecuado» escribiré otro artículo con más efectos, pero de momento con esos va bien.

Summary
Efectos CSS para personalizar los menus de DIVI de manera sencilla
Article Name
Efectos CSS para personalizar los menus de DIVI de manera sencilla
Description
Personalizar menus de DIVI de tres maneras diferentes. Esta información ha sido sacada de un artículo de Leslie Bernal para el blog de Elegant Themes.
Author
Publisher Name
MadeInMarcel
Publisher Logo

Pin It on Pinterest

Share This