De manera predeterminada, en GeneratePress el ícono de menú móvil ( hamburguesa ) no se anima cuando se hace clic en él. Han preferido omitir la animación y pasar directamente a un ícono de cerrar, ya que es más liviano de esa manera.
Personalmente prefiero una página web minimalista que cargue rápido, para posicionar en Google y para convertir visitas en clientes. Los efectos innecesarios distraen, perjudican la velocidad de carga y la usabilidad.
Sin embargo, hay veces que en un proyecto web se requiere animar los elementos que lo componen para que sea más «efectista».
En el siguiente tutorial aprenderás cómo realizar la animación para desplegar el menú hamburguesa en GeneratePress.
Código para crear un menú hamburguesa animado en GeneratePress
Copia el siguiente código CSS en el archivo style.css de tu Child Theme GeneratePress.
Este contenido está únicamente disponible para los suscriptores, para tener acceso a esta sección, y a todos los tutoriales y snippets de Código GP. Puedes identificarte en este enlace o si todavía no tienes un plan de pago puedes suscribirte aquí.
Una vez que tenemos nuestros estilos visuales creados para el menú hamburguesa , ahora tenemos que modificar el menú por defecto y agregar un poquito de HTML al elemento estandar del menú móvil de GeneratePress.
Primero, agregamos la siguiente función PHP a nuestro archivo functions.php:
Este contenido está únicamente disponible para los suscriptores, para tener acceso a esta sección, y a todos los tutoriales y snippets de Código GP. Puedes identificarte en este enlace o si todavía no tienes un plan de pago puedes suscribirte aquí.
Ahora se presentan varias opciones, dependiendo tu situación tendrás que añadir un fragmento de código a tu archivo functions.php.
Si estás utilizando el menú móvil estándar, tienes que agregar esta línea de código:
Este contenido está únicamente disponible para los suscriptores, para tener acceso a esta sección, y a todos los tutoriales y snippets de Código GP. Puedes identificarte en este enlace o si todavía no tienes un plan de pago puedes suscribirte aquí.
Si estás utilizando la función encabezado móvil, tendrás que añadir esta línea en vez de la anterior:
Este contenido está únicamente disponible para los suscriptores, para tener acceso a esta sección, y a todos los tutoriales y snippets de Código GP. Puedes identificarte en este enlace o si todavía no tienes un plan de pago puedes suscribirte aquí.
Ahora necesitamos agregar el javascript necesario para animar el menú hamburguesa. También dentro del archivo functions.php pegamos la siguiente función:
Este contenido está únicamente disponible para los suscriptores, para tener acceso a esta sección, y a todos los tutoriales y snippets de Código GP. Puedes identificarte en este enlace o si todavía no tienes un plan de pago puedes suscribirte aquí.
Conclusión
Ahora recarga tu página web y verás que al cargar la versión móvil de tu página web , cuando haces click sobre el menú hamburguesa tiene un efecto «muy aparente».
Así de fácil!!! ¿ Qué te parece ?
¿Tienes alguna pregunta o quieres mandarme una sugerencia para próximos tutoriales ó snippets?
Déjala en el formulario de soporte de la intranet.
Recuerda solo si estás suscrito, si no estás suscrito no ?