Efectos CSS para los menus de DIVI

14

JULIO, 2017

#CSS
#DIVI
#SECCIONES

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í.

Cualquier duda que tengas no dudes en preguntarme, ya sea vía contacto o en los comentarios. En el código encontrarás comentarios para que te sea fácil ajustarlo para los menus 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.

Paso previo antes de los efectos de menus

Antes de lanzarnos a injertar el código CSS para cada efecto deberemos hacer un pequeño ajuste para que todo vaya bien.

Simplemente 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”.

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.

Ejemplo del efecto. La línea crece dinámicamente.

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.

[code lang=”css”]
/* 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%;
}
[/code]

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.

Ejemplo del efecto. La línea crece dinámicamente y además esta el cuadrado.

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 línea para ajustarlos a tu diseño. Lás líneas de código para hacerlo están marcadas con un comentario.

[code lang=”css”]
/* 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;
}
[/code]

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.

Ejemplo del efecto. Elementos del menu como botones.

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. Lás líneas de código para hacerlo están marcadas con un comentario.

[code lang=”css”]
/* 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;
}
[/code]

Bonus Estilo: Botón con sombra en hover

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.

Ejemplo del efecto. Botón en hover.

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.

[code lang=”css”]
/* 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;
}
[/code]

“Cuatro estilos de menus para conquistarlos a todos”

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 menus es de Leslie Bernal en uno de sus artículos del blog de Elegante themes que puedes ver aquí. Yo siemplemente 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.

Compártelo si quieres…

Share This