Configuración de una superposición de menú de pantalla completa en Oxygen Builder

En este tutorial rápido queríamos hablar sobre cómo configurar una superposición de pantalla completa para Oxygen Builder. Si usa el elemento de menú predeterminado en oxígeno, la versión móvil de su menú se mostrará como superposición en el teléfono.

¡Gracias por los comentarios! A veces es lógico tener una superposición de pantalla completa en un dispositivo de escritorio. Esto le permite mostrar enlaces de menú, pero también puede configurar elementos dinámicos, como publicaciones de blog recientes, impulsos y más, dependiendo de sus necesidades con oxígeno, esto es bastante simple y fácil de hacer. (Tenga en cuenta: este elemento se ha actualizado con el mejor método de 2021 y un video tutorial. El método antiguo y aún válido se puede encontrar bajo el nuevo método)
Cómo agregar un menú de superposición de pantalla completa al oxígeno – Método 2021 Para agregar nuestro menú de superposición, utilizaremos el modal nativo de Oxygen Builder, la maravillosa biblioteca Hamburgers.css y algo personalizado JavaScript. Todo en este tutorial está hecho para ser copiado/atascado, por lo que no tiene que ser un asistente de codificación. En primer lugar, el crédito donde se debe el crédito. Este código se inspiró directamente en el trabajo de Matija Ljevar de Mood.Works. La implementación se puede encontrar en https://wereturncarbon.com/home/. Ahora utilizamos este método para todos nuestros proyectos que requieren menús superpuestos, aunque el código es inicialmente de Matija.
Antes de continuar, si encuentra esto útil, considere suscribirse al canal. Intentamos llegar a 1000 suscriptores y publicar solo contenido útil relacionado con oxígeno y WordPress. Suscríbase ahora. Dicho esto, ingresemos el tutorial escrito. Paso 1: Primero el botón de hamburguesa, debemos cambiar el menú superpuesto. Para hacer esto, queremos un botón ingenioso para abrir y cerrar nuestro modal. También queremos cambiar después de hacer clic. Si observa la mayoría de los sitios con este tipo de menú, el botón tiene 3 barras (☰), y cuando se presiona, se convierte en una X. La X permanece en la misma posición (porque es el mismo botón), Y cuando se presiona, cierra el menú y vuelve a ☰ ☰. Hay varias formas de establecer algo, pero nuestra forma favorita es usar hamburguesas.css, lo que hace esto usando CSS puro. Es fácil de implementar, modificado y entendido. Aquí hay unos ejemplos.
Elástico
3dxy
En primer lugar, debemos incluir la hoja de estilo CSS. Para el desarrollo, puede incluirlo a través de un elemento de conexión (usamos scripts avanzados), pero en producción, es mejor incluir solo el CSS relevante para el estilo de animación que usa (excluye CSS no utilizado) e incluya CSS: la UL utilizada en una hoja global/universal. !
Incluimos esto, con tanto más, debemos incluir el icono de hamburguesas en nuestro sitio. Esto se hace usando un bloque de código. Siga la documentación de hamburguesas.css para comprender el código detrás del interruptor. Lo incluí usando la siguiente estructura HTML:

En un sitio de producción, este bloque de código probablemente estaría en la esquina superior derecha de una sección o elemento generador de encabezado, en una plantilla de encabezado/sótano. Con la biblioteca CSS, puede cambiar la animación cambiando la hamburguesa: mira a cualquiera de las otras opciones (hay más de 30). Algunos son: hamburguesa elástica, hamburguesa-minus, hamburguesas-vicity para garantizar que el interruptor permanezca por encima del modo, proporcione un índice 1401 al DI que rodea el bloque de código. El índice modal Z es 1400, por lo que asegura que el visitante pueda cerrar el menú una vez abierto.
La parte final de este paso es cambiar la ID del bloque de código a algo memorable. En nuestro ejemplo, lo cambié en Iso-Menu-Toggle. Esto es opcional. Paso 2: Agregar modal ahora, agregaremos nuestro modal, que utilizaremos para construir el menú. Agregue a la plantilla Catchall y establezca lo siguiente: disparador modal: Cuando el usuario hace clic en el elemento, #Open-Modal

Ancho y altura: 100VW, 100VH
Cambie esta configuración predeterminada a 100% o 100VW. Haga la altura 100 VH. Esto asegura que el menú modal esté en toda la pantalla.

Cierre modual: todas las funcionalidades establecidas en el no. Solo queremos que funcione la función js oxycloSemodal (). Pas 3: Creando el menú Ahora tenemos un lienzo modal, tenemos que construir el menú real. Hay algunas formas de hacer esto. El primero es incorporar el elemento de menú de oxígeno y usarlo para dibujar un menú de “pantalla completa” que creó en el fondo de WordPress. Esto es bueno si necesita que el propietario del sitio pueda hacer cambios rápidos en el menú, pero está un poco restringido cuando se trata de estilo. En el otro extremo del espectro, puede crear todo el menú utilizando elementos de texto, conexiones y varios componentes estructurales. Esto le brinda la mayor libertad de estilo y es excelente si usted es la persona que administrará el sitio. Pero él no usa el Menu Manager incorporado en WordPress, por lo que para hacer cambios, tendrá que hacerlo directamente desde la plantilla.

Un método más avanzado sería el uso de PHP para ingresar al menú a través de un bloque de código y estilización a través de CSS. Esto le permite usar la función del menú de WordPress mientras está diseñando como lo desee. Por ejemplo, puede dividir el menú en dos columnas, puede agregar efectos únicos de Hover, etc. Esto es lo que solemos hacer, para que los usuarios puedan hacer cambios desde el administrador de WordPress. Más información sobre la grabación e inserción de los menús de WP NAV. También recomendamos usar el constructor de oxígeno de la biblioteca de animación para incluir movimientos de entrada únicos cuando se cambia el menú. Para obtener más información, mire el video tutorial asociado.
Una vez que haya creado el menú real, ahora es el momento de configurar el sistema que conecta sus hamburguesas.css Switch a la función modal y de cierre modal. Paso 4: El sistema abre/cierra (código JS aquí) esto necesitará un JavaScript personalizado y agregará un botón oculto, pero es relativamente fácil de entender. Agregue este JavaScript a la plantilla Catchall. Se puede incluir en el bloque de código utilizado para insertar el Hamburger HTML, a través de un archivo .js o cualquier otro método. Después de usted, lo incluimos en la sección JS del bloque de código único. /** * Implementación de Foreach para objetos/nodelists/matrices, bucles automáticos y opciones de contexto * * @private * @author Todd Motto * @link https://github.com/toddmotto/foreach * @param {array | objeto | Nodelist} Collection – Colección de elementos repetidos, podría ser una matriz, objeto o nodelist * @Callback RequestCallback Callback – Por el contrario, la función de llamada para cada iteración. * @param {matriz * @returns {} */ lime foreach = function (t, o, r) {if ([objeto objeto] “=== objeto.prototype.toString.call (t)) para (var c en t) objeto. Prototype.hasownproperty.call (t, c) && o.call (r, t [], c, t); Más para (var e = 0, l = t.lungime; l> e; e ++) o.call (r, t [e], e, t)}; Var hamburgues = document.QueryLelectoral (“. Hamburger”); If (hamburgues. } JQuery (‘#iso-Menu-toggle’). (‘Haga clic’ ‘

, function () {// verifique el estado modal si está en vivo o no if (jQuery (‘. oxy-modal-backdrop’). Hasclass (‘live’)) {// modal ya está abierto, cierre usando el Función oxycloosemodal del oxígeno oxiclosemodal (); } else {// El modal no está abierto, así que abra simulando un clic en el botón que desencadena la apertura modal jquey (‘#Open-Model’). Click (); }}); Este código hace lo siguiente: al hacer clic en el icono de la hamburguesa, esta es la clase activa, que cambia la animación y hace una X.
Al hacer clic en este icono, también presionará un botón (con el #Open-Menu), que se abrirá modalmente (si está cerrado).
Si el modal está abierto y el icono de la hamburguesa es una X, el mismo código cambiará la función de oxígeno JS para cerrar el modal.
Cuando hace clic, X regresa de nuevo a la hamburguesa. Y el ciclo continúa.

Hay dos cosas a tener en cuenta en este código:
#ISO-MENU-TOGGLE-Este es la ID del bloque de código que contiene el código HTML que forma el interruptor de menú (y este JS)
#Open-modal-la ID del botón que hacemos y la ID del elemento que está configurado para activar la apertura modal.
Entonces, ahora tenemos el código en su lugar. Lo último que debe hacer es hacer que el botón modal oculte. Esto es lo que usaremos para abrir el menú modal. Debido a que no hay una forma documentada de abrir el módulo JS, esta es la mejor alternativa. Pero, debido a que usamos la hamburguesa para abrir y cerrar, así como para proporcionar una imagen visual (x/☰), queremos que los clichés en esa hamburguesa se abran/cierren.
Entonces, cuando el visitante hace clic en el interruptor, él, a su vez, haga clic en el botón, que abre nuestro menú. Agregue el botón en cualquier lugar de la página (en este caso, lo agregué a un DU que contenga el bloque de código. Este DI se colocaría a la derecha de nuestra barra de navegación) y cambiar la ID a #Open-Modal. Entonces simplemente esconde el botón.
Apariencia – Display – Ninguno (para esconder)
Y … has terminado. ¡Disfruta tu nuevo menú de pantalla completa! Accesibilidad y SEO (y otras consideraciones) Cuando construye su menú, considere la accesibilidad y el SEO. Hamburguesas.css tiene algunos consejos de accesibilidad a seguir. Asegúrese de usar las etiquetas de área correctas, coloque todo dentro de y hágalo abierto y cerrado por atajos de teclado. No agregamos esto al tutorial. Lea más sobre esto aquí. Lo último a considerar es que: cuando se abra el modal, la página continuará desarrollándose. Esto significa que si el visitante ejecuta la página, el contenido detrás del modal se moverá. Si el interruptor se coloca estático, se moverá. No es terrible, pero no ideal. Además, es posible que pueda convertirla en una posición fija en la apertura modal y volver a estática/relativa cuando esté cerrado, pero necesitaría más JS y no estoy seguro de cuán receptivo sería. La mejor solución aquí es tener un encabezado fijo/pegajoso que permanezca en el desfile. Luego agregue solo un margen al contenido del menú, de modo que el encabezado fijo se juegue en el diseño. Puede ver un ejemplo a este respecto aquí:
Otra forma de agregar un menú de superposición de oxígeno para hacerlo, necesitamos usar una plantilla de encabezado y sótano.Esto es estándar al crear sitios web, donde tenemos una sección de encabezado, sección de contenido interior y luego una sección del sótano.Esta plantilla se aplica a todas las páginas utilizando un filtro Capchall (aunque puede especificar dónde desea diferentes variantes de encabezado usando diferentes filtros).Por lo general, simplemente agregaría un menú o elemento Pro -Menu en este momento.Incluso puede configurar un megamenio y hemos creado un tutorial sobre cómo hacer esto aquí.Si desea algo aún más, realizar una superposición de menú de pantalla completa puede ser la mejor apuesta.
Los menús están muy bien diseñados para configurar esto, simplemente usaremos un elemento modal, lo que significa que no hay necesidad de componentes de código o tercera parte para hacer esto posible. Primero, establezcamos nuestro encabezado. Este elemento de encabezado simplemente contendrá nuestro logotipo a la izquierda y un menú que cambia a la derecha. Este cambio de menú puede ser increíblemente simple de increíblemente complejo. En este ejemplo, simplemente usaremos el texto “Menú”. Esto se hace agregando un elemento de texto normal al menú, etiquetándolo y luego agregando CSS personalizado que lo hace insectible y cambia el cursor en un indicador cuando pasa con el mouse sobre él. Cursor: puntero de selección de usuario: ninguno; Luego le damos una clase personalizada como “. Sin embargo, puede usar CSS o JavaScript para crear una animación única al hacer clic o pasar con el mouse. Muchos sitios web usan el ícono de la hamburguesa, pero cuando hago clic en él, las tres líneas que se componen se han combinado. Si necesita inspiración y código para cambiar el menú, aquí hay un excelente Codepen: después de cambiar el menú, configuraremos nuestro módulo. Tiene que estar en la pantalla completa, pasar con el mouse sobre cualquier otro contenido y ser fácil de cerrar. Para hacer esto, agregamos un elemento modal, lo establecemos en una altura de 100 VH, 100 VW de ancho y colocamos absolutamente por encima de cualquier otro contenido. En este ejemplo, no habrá desfile dentro del modal, pero puede configurarlo siguiendo este tutorial.

Nuestro primer paso después de crear el modal general es su conexión con nuestro interruptor de menú. Cuando alguien hace clic en el interruptor del menú, debería aparecer el menú de superposición de pantalla completa. Esto se hace activando y configurandolo para mostrar cuando el usuario hace clic en un elemento. Luego, simplemente agregue la clase CSS personalizada que dio al interruptor de menú en el campo. En nuestro caso sería “. Cuando el usuario hace clic en el elemento de la hamburguesa en el menú, el menú de pantalla completa se mostrará en su sitio web de Oxygen Builder. Por defecto, se desvanece, pero puede agregar muchos efectos de pantalla modales únicos (las transiciones adhesivas son geniales). El fondo general del modal será el fondo de nuestro menú de superposición. En este ejemplo, simplemente usaremos un color individual, pero puede agregar un fondo de video, una imagen o más. Piense en ello como agregar otra sección a su página, hay muchos que puede hacer aquí. Además, tenga en cuenta que este menú superpuesto se cargará en todas las páginas. Preste atención al diseño y los elementos que use en él, ya que afectará el tiempo de carga de sus páginas. Una vez que el modal base esté configurado, tiene más opciones sobre cómo proceder. El menú superpuesto más simple simplemente muestra los enlaces de las páginas principales. Por lo general, esto se hace verticalmente, pero puede hacerlo horizontalmente. Puede elegir agregar texto estándar y empacarlo en un paquete de enlaces. Por lo general, procedemos y agregamos efectos de flujo únicos. Por lo general, el texto tiene una opacidad del 80% hasta que alguien lo pasa.

Luego se convierte en 100% y agregue una presa. Esto muestra que el usuario pasa con el mouse a través del enlace apropiado. Tan pronto como hacen clic en el enlace, se redirigen a la nueva página. No necesita configurar ninguna función que cierre el menú al hacer clic en un enlace, aunque puede hacerlo si es necesario. Puede agregar cualquier componente de oxígeno estándar a este menú. Los ejemplos podrían incluir el uso de publicaciones simples para mostrar las últimas publicaciones de blog, llamadas estáticas a páginas de ventas, un formulario de contacto o más. Lo último en lo que debe pensar es la forma en que los usuarios cerrarán su menú superpuesto. Por defecto, hacer clic en la tecla de escape cerrará un modal y mantendrá esta funcionalidad para nuestro menú. Sin embargo, queremos establecer nuestro propio botón personalizado personalizado, que es muy visible. Esto se hace agregando una cadena de texto o botón. Por lo general, se escribe cerca y se encuentra en la esquina izquierda o derecha derecha. Para configurarlo para cerrar el menú, dale la clase personalizada “.oxi-modal-close”.
Conclusión Esta es una forma simple de agregar un menú de superposición de pantalla completa al constructor de oxígeno, sin código y sin tercer complementos. Si tiene alguna pregunta sobre cómo implementar esto en su propio sitio, no dude en comunicarse con los comentarios a continuación. Si tiene solicitudes de tutoriales, ¡háganoslo saber!