Menu con efecto Hover Background

Mar 16, 2018 | CSS, DIVI (Elegant Themes), General, Tutoriales | 0 Comentarios

Como sabemos, DIVI carece de momento de la opción de cambiar el color de fondo cuando pasamos el ratón sobre los enlaces del menú. A muchas personas les podrá interesar colocarlos en algún que otro proyecto, sobre todo a petición del cliente que se empeña en que sobresalte la opción cuando pasamos por lo alto el ratón.

Como siempre, la magia del CSS nos permite cambiar esto y conseguir que ese fondo aparezca, así que vamos a colocar una serie de opciones a nuestro CSS personalizado.

Lo primero que haremos será quitar el padding-bottom de los enlaces <a> que tiene por defecto el menú, para ello colocaremos el siguiente código:
.et_header_style_left #et-top-navigation nav>ul>li>a, .et_header_style_split #et-top-navigation nav>ul>li>a {padding-bottom: 0px !important;}

Posteriormente le daremos una altura al elemento <ul> que engloba en menú, colocando el siguiente código:
ul#top-menu {height: 60px;}

Seguidamente le daremos la misma altura a los <li> que se encuentran dentro del <ul> y quitaremos el padding lateral, para colocar nosotros las medidas que queramos:
.nav > li {height: 60px; padding-right: 0px !important;}

Ahora es cuando damos la separación lateral a los <li>:
.nav > li {padding: 0px 20px !important;}

Ahora le toca el turno a los enlaces propiamente dichos, la etiqueta <a>, a la cual le aplicaremos el siguiente código:
.nav > li > a {height: 100%; padding-top: 20px; width: 100%;}

Al colocar este código y si tenemos un submenu, veremos que el icono que muestra la flecha hacia abajo se queda arriba, con lo cual colocaremos este código para arreglar esto (el padding-top debe ser igual al indicado en el código anterior):
#et-secondary-nav .menu-item-has-children>a:first-child:after, #top-menu .menu-item-has-children>a:first-child:after {padding-top: 20px;}

De momento solo hemos preparado el camino para colocar el background, por lo que casi no veremos ningún cambio, pero ahora es cuando viene lo verdaderamente importante. (Los colores utilizados son de ejemplo, pudiéndose cambiar para adaptarlo a tu diseño).

Voy a colocar un fondo negro al pasar el ratón y que las letras sean blancas:
.nav > li, .nav > li > a {transition: all 0.7s;}
.nav > li:hover {background-color: black;}
.nav > li > a:hover {color: white !important;}

Llegados a este punto nuestro menú se vería así:

Menu Hover DIVI Namaste Web 1
Menu Hover DIVI Namaste Web 2

Os dejo todo el código usado para que os sea más fácil utilizarlo:
.et_header_style_left #et-top-navigation nav>ul>li>a, .et_header_style_split #et-top-navigation nav>ul>li>a {padding-bottom: 0px !important;}

ul#top-menu {height: 60px;}

.nav > li {height: 60px; padding-right: 0px !important;}

.nav > li {padding: 0px 20px !important;}

.nav > li > a {height: 100%; padding-top: 20px; width: 100%;}

#et-secondary-nav .menu-item-has-children>a:first-child:after, #top-menu .menu-item-has-children>a:first-child:after {padding-top: 20px;}

.nav > li, .nav > li > a {transition: all 1s;}
.nav > li:hover {background-color: black;}
.nav > li > a:hover {color: white !important;}

.nav > li:active {background-color: black;}
.nav > li > a:active {color: white !important;}

Espero que os haya sido de utilidad y si tenéis alguna duda comentarla.

Share This
A %d blogueros les gusta esto: