Truco Divi: Menú que flota hacia arriba con sombra

Hace poco un cliente que tiene la web hecha con Divi me dijo que quería que los menús de su web destacaran, que fuesen algo diferentes, y se me ocurrió un detalle que había visto alguna vez en alguna web, hacer que al pasar el cursor sobre un elemento del menú este flotara hacia arriba y dejase una bonita sombra debajo.

Algo así…

Bonito ¿eh?

Pues vas a ver qué fácil es añadir ese efecto tan chulo a tus menús de Divi, solo tienes que añadir un poco de CSS.

Abre el personalizador de WordPress (Apariencia → Personalizar) y en la sección de CSS adicional añade este código:

/*Menú flotante con sombra*/
#top-menu li {
padding-right: 5px;}
#top-menu > li > a {
padding: 10px!important;
margin-bottom: 10px;}
#top-menu .menu-item-has-children > a:first-child:after {
display:none;}
#top-menu-nav > ul > li > a {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;}
#top-menu-nav > ul > li > a:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;}
#top-menu-nav > ul > li > a:hover, 
#top-menu-nav > ul > li > a:focus, 
#top-menu-nav > ul > li > a:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
#top-menu-nav > ul > li > a:hover:before, 
#top-menu-nav > ul > li > a:focus:before, 
#top-menu-nav > ul > li > a:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);}

Solo con añadirlo ya verás el cambio, pero para que lo vean todos los visitantes de la web publica los cambios y cierra el personalizador. ¡Ya lo tienes!

El CSS del ejemplo procura no modificar nada de los estilos de tus menús actuales, pero puedes personalizarlo si ves necesario algún ajuste.

Por ejemplo, para modificar los rellenos laterales, superior o inferior del menú puedes modificar estos valores:

#top-menu li {
padding-right: 5px;}
#top-menu > li > a {
padding: 10px!important;
margin-bottom: 10px;}

O si, por ejemplo, quieres cambiar la velocidad de la animación, los valores a modificar serían estos otros:

-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;

Fijándote que están en 2 partes del código, así que los valores en ambas partes deben ser coherentes.

El truco es muy sencillo de aplicar y el resultado es bastante chulo ¿no te parece?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!