Agregar elegante animación a los elementos del Menú Móvil Divi

por Victor Aquino | Abr 15, 2021 | Divi Trucos | 0 Comentarios

PATROCINADO

El Mejor Hosting WordPress Divi. Estable, Seguro y Rápido.

Prueba el servicio de hosting más confiable y conocido del mercado: BANAHOSTING, sin riesgos con un Súper Descuento del 95% en cualquier plan. Cupón de descuento: BH1D

Quiero probar el mejor Hosting

Cuando clickamos el menú de hamburguesa de divi en móviles éste se despliega hacia abajo y podemos ver sus elementos, esa animación se ve genial.
Hoy vamos a hacerlo aún más dinámico añadiendo una animación a cada elemento del menú cuando éstos aparecen. Nos quedarán moviéndose a la izquierda uno después de otro en cascada. Se verá super genial.
Aquí abajo hay una vista previa:

Empecemos a agregar la animación en el menú Divi

Lo que tenemos que hacer es copiar y pegar el siguiente código en cualquier editor de css de Divi. De preferencia el general que aparece en Divi>Opciones del tema.

Contenido Gratuito bloqueado

Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:


@keyframes movevic {
  0% {
  transform:translatex(50%);
  opacity:0;
  }
   100% {
    transform:translatex(0px);
    opacity:1;
  }
 
}

.mobile_nav.opened ul li:nth-child(1) a{
    animation-name:movevic;
animation-duration: 400ms;
    animation-delay: 50ms;
    animation-timing-function: ease-in-out;
}
.mobile_nav.opened ul li:nth-child(2) a{
    animation-name:movevic;
animation-duration: 400ms;
    animation-delay: 100ms;
    animation-timing-function: ease-in-out;
}
.mobile_nav.opened ul li:nth-child(3) a{
    animation-name:movevic;
animation-duration: 400ms;
    animation-delay: 150ms;
    animation-timing-function: ease-in-out;
}
.mobile_nav.opened ul li:nth-child(4) a{
    animation-name:movevic;
animation-duration: 400ms;
    animation-delay: 200ms;
    animation-timing-function: ease-in-out;
}
.mobile_nav.opened ul li:nth-child(5) a{
    animation-name:movevic;
animation-duration: 400ms;
    animation-delay: 250ms;
    animation-timing-function: ease-in-out;
}
.mobile_nav.opened ul li:nth-child(6) a{
    animation-name:movevic;
animation-duration: 400ms;
    animation-delay: 300ms;
    animation-timing-function: ease-in-out;
}

Puedes notar que en el código hay 6 de éstos: nth-child(1), nth-child(2) , nth-child(3) , etc. Eso quiere decir que se está aplicando solamente a 6 elementos del menú. Si tienes un menú con más elementos simplemente le agregas más de éstos según necesites:

Contenido Gratuito bloqueado

Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:


.mobile_nav.opened ul li:nth-child(7) a{
    animation-name:movevic;
animation-duration: 400ms;
    animation-delay: 350ms;
    animation-timing-function: ease-in-out;
}

Si te das cuenta la propiedad animation-delay siempre va aumentando 50ms.
Entonces si agregas un nth-child(7) su animation delay será 350ms, si agregas un nth-child(8) su animation-delay será 400ms, si agregas un nth-child(9) su animation delay será 450ms, etc.
Puedes agregar todos los que necesites.

Si te gustó el contenido

Apóyanos compartiendo en tus redes, nos ayudarías muchísimo. Y haz click en la quinta estrella de abajo, para saber que éste tema te interesa y hacer artículos similares.