Cómo crear un menú animado personalizado de WordPress

Si usa un dispositivo móvil para navegar por Internet, notará muchos sitios web con hamburguesas. Estos son menús que están ocultos detrás de un ícono de “hamburguesa” que el usuario puede llegar, para revelar todo el menú. La razón por la que se llaman “menús de hamburguesas” es por el ícono que los representa normalmente: tres filas. Parece una pequeña hamburguesa, o al menos esa es la teoría. ¡Me gusta mi burguesía un poco menos delgada! Pero, dejando a un lado el nombre, la posibilidad de agregar un menú de hamburguesas a su sitio de WordPress es algo que mejorará la experiencia del usuario para las personas que visitan un dispositivo móvil.
Puede agregar un complemento para crear un menú de hamburguesas. O puede instalar un tema con uno ya allí (como uno de nosotros). Pero si tiene su propio tema y preferiría agregar solo el menú de hamburguesas? En esta publicación te mostraré cómo hacer esto. Tomando un menú que se ha agregado a través de la pantalla de menú de WordPress estándar, le mostraré cómo agregar algunos CSS y JavaScript que convertirán su menú existente en un menú de hamburguesas en pantallas pequeñas. Lo que necesitará para seguir esta publicación, necesitará:
Una instalación de WordPress Development que ejecuta un sitio que tiene un menú ya creado.
Propio tema o un tema secundario de un tercer tema. No edite el tercero directamente o sus cambios se eliminarán cuando lo actualice. En su lugar, cree un tema infantil si lo necesita.
Aplicaré este código a mi propio sitio web. .Menu. Mine el menú de navegación principal, que en mi caso tiene una clase CSS. Si el suyo es diferente, deberá editar cualquier CSS que se oriente con esas clases, para que se aplique correctamente a su propio tema. El menú existente en este momento, mi menú se ve bien en el escritorio: está debajo de mi encabezado además del contenido:
Pero en el móvil las cosas no son tan hermosas. En un iPhone 7, el menú se divide en varias líneas y ni siquiera lo hace constantemente. También previene el contenido:

Menú móvil antes de agregar el icono de hamburguesas.

Podría mejorar esto enfocando los elementos del menú, pero luego ocuparía demasiado espacio. En cambio, agregaré un menú de hamburguesas, de modo que en las pantallas pequeñas el menú esté oculto hasta que el usuario llegue al icono de hamburguesas.
Agregar ícono de hamburguesas El primer paso es agregar el icono de hamburguesa. Haga esto en el archivo Header.php de su tema. Nota: si usa un tema de terceros, crea un tema infantil, copie el archivo Header.php de los padres a esto y edite el nuevo archivo del niño. Agregue un enlace justo debajo del menú de navegación principal. Aquí está el mío:
Cargue la idea 0C50DA9EA9CC63F8D846B58E68A3F09
Esto crea una conexión con la clase Togglenav, porque activa y desactiva la navegación. Dentro de este enlace está el icono de hamburguesas, que se crea con un símbolo HTML. No hay necesidad de gráficos personalizados, ordenado, ¿verdad?
Tenga en cuenta que el enlace no está en ninguna parte: es solo un hashtag, no una URL. Es todo lo que tiene que agregar al archivo de encabezado para que pueda guardarlo y cerrarlo ahora. Si actualiza la pantalla, verá que ha aparecido el icono de hamburguesa: no queremos que esto sea visible en la versión de escritorio, por lo que lo solucionaremos en el siguiente paso. Ocultar el ícono de la hamburguesa en las pantallas grandes ahora, para la parte donde comienza a unirse: estilo. Puede agregar todo esto a la hoja de estilo de su base si usa un tema infantil, ya tendrá una hoja de estilo y puede agregar todo allí.
Nota: Mi tema es receptivo, pero no es el primer móvil, por lo que usaré el máximo ancho en mis interrogatorios de los medios. Si su tema es móvil primero, deberá cambiar la forma en que agrega este código a los interrogatorios de los medios. Comencemos con la versión de pantalla grande (o escritorio) del icono del interruptor. Agregue eso a su hoja de estilo:

Cargue la idea 0C50DA9EA9CC63F8D846B58E68A3F09
Esto hace que el nuevo enlace (y el icono) de forma predeterminada sea invisible. Incluí! Importante porque de lo contrario puede ser reemplazado por otro estilo de enlace. Ahora aquí está mi sitio en una pantalla grande:
Se fue. Tendremos que deshabilitarlo nuevamente para pantallas más pequeñas, pero pronto lo alcanzaremos.
Agregando estilo a su menú de hamburguesas móviles ahora debe agregar todos los estilos para la versión móvil del menú, que aparecerá cuando un usuario llegue al icono. Primero, en la hoja de estilo, cree una consulta de medios:

Cargue la idea 0C50DA9EA9CC63F8D846B58E68A3F09

Dirigí pantallas con un ancho máximo de 480 PX, pero puede elegir pantallas más anchas si lo desea, especialmente si su menú es grande. Ahora agregemos un estilo a esa consulta de medios. Primero reactivaremos el icono y el elegante: la idea 0C50DA9A9CC63F8D846B58E68A3F09 está cargada.
Esto reactivará el icono para pantallas pequeñas y agregará posicionamiento y color, así como la configuración del mouse y los estilos activos para reemplazar los estilos existentes para enlaces. Ahora estresemos el menú en sí. Agregue esto a su consulta de medios:
Cargue la idea 0C50DA9EA9CC63F8D846B58E68A3F09
Veamos qué hace esto:
Muestra el menú en su conjunto como bloque en línea, con un fondo blanco sólido y un posicionamiento relativo, por lo que podemos usar el posicionamiento absoluto para los elementos infantiles.
Establezca el elemento para que sea invisible de forma predeterminada. El JavaScript lo deslizará cuando lo agregamos, lo que lo hará aparecer. También agrega posición de color y estilo a la lista.
Elimine los elementos flotantes para los elementos de la lista y muestrelos como un bloque.
Ahora guarde la hoja de estilo. Antes de que el menú de hamburguesas funcione correctamente, deberá agregar el paso final: un script.
Agregar el script Este paso consta de dos pasos: la consulta de script y agregarle el código. Comencemos por ponerlo en la cola. A su tema, agregue una carpeta llamada scripts y dentro de él, un archivo vacío llamado burger-ment-sccript.js. Ahora abra el archivo con las funciones del tema y agréguelo:
Cargue la idea 0C50DA9EA9CC63F8D846B58E68A3F09
Esto pone el script que acabas de crear. Ahora tengo que agregar un código. Abra ese archivo y agregue este script: Cargue la idea 0C50DA9A9CC63F8D846B58E68A3F09
Esto toma el elemento .togle-nava que creé y crea una llamada de clic para él, que se activará cuando alguien lo toque. Luego use .Slidetogle para cambiar hacia y fuera del menú de navegación al hacer clic en el enlace. También detiene el comportamiento del enlace en modo predeterminado.
Finalmente, guarde el archivo. Así que ahora aquí está el sitio en una pantalla pequeña:
Icono de hamburguesas en un dispositivo pequeño.
Y cuando toco ese icono, aparece el menú:
Sitio móvil con el menú mostrado.
Y aquí hay un video sobre cómo funciona cuando visito el sitio por teléfono (el video está un poco conmocionado, por lo que es posible que desee visitar el sitio en su móvil para verlo en vivo).

La animación del menú Burgers en acción.
¡Todo listo! ¡Ahora todo lo que tengo que hacer es trabajar en mi banner de encabezado, que se ve bastante feo en las pantallas pequeñas! Agregar un menú de hamburguesas mejorará UX en su móvil si sigue los pasos anteriores (editando el CSS para que coincida con su tema, si lo necesita), creará un menú de hamburguesas simple que mejora la experiencia del usuario en su sitio. Cuando los usuarios lo visiten. en un dispositivo móvil. Y si lo necesita, puede cambiar el estilo, cambiando el color del icono, ajustando el ancho del menú y lo que necesite para trabajar para usted.

¿Utiliza un menú de hamburguesas en la versión móvil de su sitio? ¿Qué otra personalización le harías a tu menú? Comparta sus pensamientos en los comentarios a continuación.
Etiquetas:

móvil