Versión móvil del menú. Diferentes menús regulares y móviles en WordPress, función wp_is_mobile, complemento WP Responsive Menu
Mientras trabajaba en uno, tuve una situación en la que la página horizontal principal contenía alrededor de dos docenas de enlaces. En el sitio web se pueden organizar fácilmente en forma de listas desplegables, pero en la versión móvil todo esto se acumula en un solo bloque. Este elemento parece "desordenado" y es probable que dificulte la navegación de algunos usuarios.
Una forma de salir de esta situación es crear un menú móvil alternativo en WordPress, que tendría una apariencia simplificada y contendría sólo enlaces a las secciones principales. Esto se puede hacer usando algunos módulos o la función wp_is_mobile. Consideremos todas las opciones:
función wp_is_mobileEste operador condicional verifica si una persona visita su sitio desde un dispositivo móvil y devuelve el valor Verdadero o Falso. Su sintaxis es la siguiente:
if (wp_is_mobile()) ( /* Se muestra información para dispositivos móviles */ ) else ( /* De lo contrario, información para un sitio normal */ )
La función funciona determinando el valor de la línea del Agente de usuario en el navegador del visitante: $_SERVER['HTTP_USER_AGENT'] (por ejemplo, Mobile, Kindle, Android, BlackBerry, Opera Mini, etc.). Sin embargo, no transmite datos sobre el tamaño de la pantalla o el nombre del dispositivo, solo Verdadero/Falso.
En Wodpress, wp_is_mobile no se utiliza para seleccionar/establecer estilos de diseño responsivos. Solo define elementos de un proyecto web que deben mostrarse exclusivamente en dispositivos móviles, independientemente del tamaño de la pantalla: clases correspondientes, ventana gráfica, scripts de pantalla táctil, etc.
¡Atención! La función tiene 2 matices:
Y si la primera situación ocurre con bastante poca frecuencia, entonces no funciona muy bien (en los sitios visitados no puede prescindir de ella).
Algoritmo para crear un menú móvil alternativo.1. En primer lugar, vaya a la sección de administración "Apariencia" - "Menú". Aquí necesitas diferentes para cada versión, por ejemplo:
- menú superior móvil: opción para dispositivos móviles;
- top-pc-menu: para la versión de escritorio normal.
| if (wp_is_mobile()) (wp_nav_menu(matriz ("menú" => "menú-superior-móvil")); ) else (wp_nav_menu(matriz ("menú" => "menú-superior-pc")); ) |
if (wp_is_mobile()) ( wp_nav_menu(array("menú" => "menú-superior-móvil")); ) else ( wp_nav_menu(array("menú" => "menú-superior-pc")); )
El código en su diseño puede ser ligeramente diferente debido a parámetros adicionales. La esencia del método es mostrar la opción como un menú móvil de WordPress. menú-movil-superior, por lo normal - menú-superior-de-pc(sustituya sus nombres si es necesario).
Después de la implementación, se comprueba el funcionamiento de la navegación en teléfonos inteligentes/tabletas. Como dije anteriormente, la función wp_is_mobile determina el Agente de Usuario, por lo que es recomendable acceder al sitio desde un teléfono; la opción con el panel de desarrollador Ctrl+Shift+I puede tener errores;
Si no tienes tiempo para ocuparte, siempre hay un módulo adecuado. Hay varias opciones, pero consideraremos solo la que es necesaria para la tarea actual: mostrar diferentes menús de WordPress en las versiones móvil y de escritorio.
Descargue WP Responsive Menu desde el repositorio desde aquí o . Esta solución le permite crear fácilmente un menú desplegable sencillo y totalmente personalizable para teléfonos inteligentes, tabletas, etc. Así es como se verá aproximadamente el resultado final (los colores son personalizables, hay un bloque de búsqueda):
El menú adaptable de WP es muy popular: 70 mil. descargas y 4,5 puntos de rating. Basado en el complemento de menú sidr jquery. A pesar de que la última actualización se realizó hace un año, se está trabajando activamente para corregir los errores (a juzgar por las estadísticas).
Funciones principales:
- solución totalmente adaptable con soporte para deslizar el dedo;
- funciona en todo tipo de dispositivos móviles;
- fácil integración con las funciones del menú del sistema WP;
- establecer una paleta de colores que se adapte a su tema;
- ocultar cualquier elemento innecesario en la versión móvil;
- determinar la ubicación donde aparecerá el menú;
- seleccionar un logotipo, línea y texto que se muestra en él;
Después de instalar el módulo, encontrará todas las configuraciones en la sección "Menú WPR", están divididas en 2 pestañas: General (principal) y Apariencia (apariencia).
Por lo tanto, en primer lugar, seleccione el objeto y, en segundo lugar, oculte los elementos innecesarios (en nuestro caso, esta es la navegación principal). Como resultado, podrás implementar diferentes menús en Wordpress para escritorio y teléfonos inteligentes.
Revise los parámetros restantes del complemento y márquelos como desee: deslizar, hacer zoom, bloque de búsqueda, visualización del logotipo, apariencia del lado del elemento y resolución de pantalla en la que se activa. También en la pestaña "Apariencia del menú" necesita un fondo y eliminar marcos si es necesario.
En general, trabajar con WP Responsive Menu es bastante sencillo. Aunque la función wp_is_mobile no causa demasiadas dificultades. Probé ambas opciones y funcionaron bien. Sin embargo, tenga en cuenta que la declaración condicional wp_is_mobile se vuelve inútil cuando el almacenamiento en caché está habilitado. Teniendo en cuenta la configuración del complemento con los tamaños de pantalla, no hay conexión con el agente de usuario, lo que significa que no teme tales restricciones.
Si conoces otras soluciones interesantes para implementar un menú móvil para WordPress, escribe en los comentarios. Creo que habrá una revisión separada para los módulos.
Trabajar con elementos anidados no es fácil porque, digamos, cuando mueves un elemento padre junto con él, todos sus hijos también se mueven. Por lo tanto, utilizaremos varias técnicas que respaldarán las traducciones 3D deseadas de submenús y sus hijos. La idea principal es aumentar el valor de traducción para garantizar que las subcapas no se muestren cuando movamos todo un poco para mostrar los bordes de los elementos principales. Por supuesto, esto no es necesario en el caso de que el submenú cubra el elemento principal.
Tenga en cuenta que utilizamos propiedades CSS (transformación, transición), que solo funcionan en navegadores modernos. Se puede encontrar un ejemplo de una alternativa para navegadores no compatibles al final del archivo componente.css, que simplemente muestra el menú de primer nivel. Hacemos lo mismo si no hay JS.
Para el menú necesitamos la siguiente estructura anidada:
Todas las categorias
- Dispositivos Dispositivos
- Teléfonos móviles Teléfonos móviles
- Teléfonos móviles Teléfonos móviles
Aquí, cada nivel está envuelto en una etiqueta div con una clase de mp-level. No podremos aplicar este tipo de posicionamiento fijo al menú porque las transformaciones harán que se comporte como un elemento posicionado absolutamente, por lo que tendremos que usar posicionamiento absoluto, lo que conducirá al problema de comportamiento no deseado del sitio (menús desplazamiento y dependiendo de la altura del documento).
Para evitar que el menú se desplace y se corte si el contenido del sitio es demasiado corto, usaremos un pequeño truco adoptando la siguiente estructura de página:
Ahora asignamos los siguientes estilos CSS a los elementos:
Html, cuerpo, .container, .scroller ( altura: 100%; ) .scroller ( overflow-y: scroll; ) .scroller, .scroller-inner ( posición: relativa; ) .container ( posición: relativa; desbordamiento: oculto; Antecedentes: #34495e)
Esto le permitirá desplazarse por el contenido cuando el menú de la versión móvil del sitio esté cerrado y también será igual a la altura de la ventana del navegador. Así imitamos lo que conseguiríamos con un posicionamiento fijo. El complemento en sí se puede llamar así:
Nuevo mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"));
O, si los submenús deben cerrar niveles anteriores:
Nuevo mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"), (tipo: "cover"));
Propongo que se considere una técnica para crear un menú adaptativo simple, muy flexible en la configuración y también bastante efectivo, utilizando marcado semántico puro, para implementar un diseño adaptativo, sin conectar JavaScript. Como resultado, usando CSS, obtendremos un menú que puede alinearse a la izquierda, a la derecha o colocarse exactamente en el centro, con los elementos activos/actuales resaltados, un menú que puede, al cambiar el tamaño de la ventana del navegador, reorganizarse rápidamente. en una barra de navegación vertical desplegable que se ve muy bien en las pantallas de varios dispositivos móviles de usuario (tabletas, teléfonos inteligentes, computadoras portátiles y teléfonos móviles).
Miramos el ejemplo y nos aseguramos de que nuestro menú funcione. Este método suele ser muy útil cuando un menú utiliza una gran cantidad de enlaces. Puede agrupar fácilmente todos los botones en un panel atractivo que se abre al pasar el mouse.
En primer lugar, debemos marcar toda la estructura principal de nuestro menú. Estamos creando un elemento de navegación, por lo que es lógico e incluso práctico utilizar un elemento HTML5, una etiqueta con una clase del mismo nombre asignada, para el posterior formateo de estilos CSS, así como para la creación y posicionamiento absoluto de una barra de navegación desplegable. La clase actual apunta al enlace del menú activo/actual, cuya apariencia se creará usando CSS.
- Hogar
- Sobre nosotros
- Cartera
- Nuestros Servicios
- Contactos
Como puede ver, el menú es una simple lista desordenada con una cierta cantidad de enlaces. El número de puntos puede ser diferente, pero aún así no hay necesidad de preocuparse, todo está dentro de límites razonables.
Además, antes de ir demasiado lejos, quiero recordarles y explicarles a aquellos que no saben que HTML5 y las consultas de medios no son compatibles con versiones de IE anteriores a la 9 (no es nada sorprendente). Para evitar dolores de cabeza en el futuro y hacer todo bien, existen scripts especiales con los que podemos solucionar el problema de compatibilidad conectándolos prudentemente al documento de la sección.
Todo. Hemos resuelto el marcado básico, se han registrado las clases y se han añadido las muletas. Pasemos ahora a definir los estilos de los elementos del menú, dando forma a la apariencia y haciendo que nuestro menú sea verdaderamente adaptable.
El conjunto de estilos de menú CSS para pantallas de monitores de escritorio es bastante estándar; no veo ningún sentido en entrar en detalles. Solo quiero llamar su atención sobre el hecho de que especifiqué display:inline-block en lugar de float:left elemento
- .
- puntos */ margen : 0 ;
- ) .nav .current (display: block; /* muestra solo actualmente activo
- @media screen y (ancho máximo: 600 px) ( .nav ( posición: relativa; altura mínima: 40 px; ) .nav ul ( ancho: 180 px; relleno: 5 px 0; posición: absoluta; arriba: 0; izquierda: 0 ; borde: sólido 1px #aaa; fondo: #FAFAFA url(images/icon-menu.png) sin repetición 10px 11px; radio del borde: 5px; sombra del cuadro: 0 1px 2px rgba(0,0,0,. 3); .nav li ( mostrar: ninguno; /* ocultar todo
- puntos */ margen: 0;
) .nav .current ( display: block; /* muestra solo el activo actualmente
elementos */ ) .nav a ( display: block; padding: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( background: none; color: #666; ) /* al pasar el cursor sobre los elementos del menú * / .nav ul:hover (imagen de fondo: ninguno; ) .nav ul:hover li ( pantalla: bloque; margen: 0 0 5px; ) .nav ul:hover .current ( fondo: url(images/icon-check. png) sin repetición 10px 7px; ) /* menú responsivo a la derecha */ .nav.right ul ( izquierda: auto; derecha: 0; ) /* menú responsivo en el centro */ .nav.center ul ( izquierda: 50%; margen izquierdo: -90px;
Traducción y adaptación libre: Andrey /conductor/Shifter es un complemento de JQuery para una navegación móvil deslizante sencilla. Shifter funciona verificando los elementos de destino en el DOM y vinculando eventos en ellos.
SlickNav SlickNav es un complemento de menú móvil responsivo para jQuery con características como soporte de menú de múltiples niveles, compatibilidad entre navegadores, diseño flexible y simple y se degrada elegantemente sin JavaScript.
Menutrón Menutron convierte sus menús de navegación de una lista a un menú de selección cuando cambia el tamaño de su navegador. En los dispositivos móviles, el menú de selección tiene su propio control, lo que facilita la selección de un elemento.
Menú responsivo y táctil Tutorial para crear una navegación desplegable responsiva y táctil. La técnica consta de 3 partes principales, que son una navegación desplegable simple basada en HTML y CSS, la implementación de la capacidad de respuesta mediante consultas de medios y su disponibilidad para dispositivos con pantalla táctil mediante un complemento jQuery súper pequeño.
jQuery.mmenú MMENU es un complemento de jQuery para crear menús deslizantes elegantes, similares a aplicaciones, para su sitio web móvil o sitio responsivo.
navobile JQuery Navobile es un complemento de jQuery que facilita la navegación móvil. Navobile utiliza CSS para aplicar traducciones CSS3, detección de dispositivos móviles y fijación de posición de navegación.
FlexNav FlexNav es un ejemplo de uso móvil de consultas de medios y de tener un agradable menú de varios niveles con soporte táctil, apertura al pasar el mouse y accesibilidad al teclado con pestañas.
Menú responsivo listo para retina Menú adaptable con tres diseños para diferentes tamaños de navegador. El menú cambia automáticamente a uno de tres diseños diferentes según el tamaño de la ventana del navegador: una versión en línea de "escritorio", una versión optimizada para tableta de dos columnas y una versión móvil con un enlace de menú para mostrar y ocultar la navegación para pantallas más pequeñas. Se utilizó una fuente como íconos para evitar que se desenfoquen en diferentes resoluciones.
menú delgado slimMenu es un complemento JQuery liviano que está diseñado para crear menús de navegación rápidos y de múltiples niveles sobre la marcha. Con slimMenu, ya no tendrá problemas con las solicitudes de medios para crear menús responsivos ni con ningún otro complemento pesado para crear submenús de varios niveles. Es 100% móvil responsivo.
Menú deslizable horizontal Un menú deslizante horizontal simple con un diseño de cuadrícula en miniatura, como para un submenú. El menú se desliza desde la parte superior cuando se hace clic en un elemento del menú principal y los subelementos desaparecen. Una vez que se hace clic en otro elemento, la altura del submenú aumentará. ajústelo y el contenido aparecerá y desaparecerá gradualmente cuando se cambie.
nuevo jugador 16 de enero de 2017 a las 01:28 Menú móvil para el sitio. Complemento de menú JQuery
- jQuery
En este artículo hablaremos sobre cómo crear un menú para la versión móvil del sitio que encajaría en el diseño adaptativo. Quiero hablarles sobre un complemento para JQuery llamado mmenu (puede seguir el enlace para descargar el complemento e inmediatamente ver cómo se verá el menú que crearemos). Usaremos el complemento porque construir tu propia bicicleta cada vez no es la mejor práctica. Nuestro camino es utilizar las mejores prácticas. Empecemos.
Conexión. El autor aconseja usar html 5 doctype, bueno, aquí creo que no necesitamos alternativas, lo usamos. En el área del encabezado de nuestro documento, necesitamos conectar el propio JQuery y dos archivos de complemento, conectamos:
Crear un menú El menú se crea de forma muy sencilla: como una lista HTML desordenada, el complemento admite el anidamiento de listas. Todo esto debe estar envuelto en una etiqueta de navegación, que tiene una identificación.
Si necesitamos un menú en el lienzo, debemos incluir los archivos jquery.mmenu.oncanvas.min.js y jquery.mmenu.oncanvas.css. On-canvas es una versión del menú que tiene posición:absoluta; ancho: 100%; altura: 100%, que lo estira para llenar toda la pantalla.- Hogar
- Sobre nosotros
- Historia
- el equipo
- Nuestra dirección
- Contacto
- Hogar
- Sobre nosotros
- Historia
- el equipo
- Nuestra dirección
- Contacto
2. Para que el submenú esté siempre visible, debe agregarle la clase "Insertar".
3. Agregue la clase "Seleccionado" al elemento del menú para resaltarlo.
4. Puedes crear separadores de la siguiente manera- Sitio web
- Hogar
- Sobre nosotros
- Contacto
Utilicé la clase Fija para establecer la posición: fijaPara que nuestro menú móvil funcione solo queda conectar el siguiente código javascript a la página:
$(documento).ready(función() ( var $menú = $("#mi-menú").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data ("mmenú"); $icon.on("hacer clic", función() ( API.open(); )); API.bind("abierto", función() ( setTimeout(función() ( $icon.addClass ("está activo"); $icon.on("clic", función() ( API.close(); )); setTimeout(función() ($icon.removeClass("está activo") ; , 100); $icon.on("clic", función() ( API.open(); ));
Problemas al utilizar mmenu Encontré dos problemas. Al principio intenté envolver todo el contenido del cuerpo en una etiqueta div, porque esto es necesario para que el complemento funcione. Pero en este caso, por alguna razón ocultó todo el contenido que envolví. Entonces lo dejé. Si no envuelves todo lo que hay en tu cuerpo en un div, entonces el complemento lo hará por ti. Pero habrá problemas con la doble ejecución de scripts js y otros. Después de eso, inmediatamente me encontré con el segundo problema: el complemento no incluye nada más que un div. Es decir, si tienes h1 directamente dentro del cuerpo (cuerpo > h1), como por ejemplo yo, entonces mmenu los omitirá y envolverá los divs que están detrás de él. Resolví esto simplemente envolviendo todas las demás etiquetas en divs. de modo que directamente dentro del cuerpo solo quedan divs.Esto hizo que todo funcionara para mí. Espero que este artículo te haya resultado útil.
Etiquetas: diseño responsivo, maquetación, complementos de jquery
| /* menú */ .nav (margen: 20px 0; ) .nav ul (margen: 0; relleno: 0; ) .nav li (margen: 0 5px 10px 0; relleno: 0; estilo de lista: ninguno; pantalla: bloque en línea; * pantalla: en línea; /* ie7 */) .nav a (relleno: 3px 12px; decoración de texto: ninguno; color: #999; altura de línea: 100%; ) .nav a: hover (color : #000 ; ) .nav .current a ( fondo : #999 ; color : #fff ; radio del borde : 3px ; ) |
/* menú */ .nav ( margen: 20px 0; ) .nav ul ( margen: 0; relleno: 0; ) .nav li ( margen: 0 5px 10px 0; relleno: 0; estilo de lista: ninguno; mostrar: bloque en línea; *display:inline; /* ie7 */ ) .nav a ( padding: 3px 12px; decoración de texto: ninguno; color: #999; altura de línea: 100%; ) .nav a:hover ( color : #000; ) .nav .current a ( fondo: #999; color: #fff; radio del borde: 3px; )
Las secciones .nav a:hover y .nav .current a son responsables de cambiar el color de los enlaces y el fondo de los elementos del menú activos/actuales, respectivamente. No intenté ser demasiado inteligente en este ejemplo, hice todo con un espíritu minimalista, cuando pasas el cursor sobre el enlace, el color cambia, el texto se vuelve negro: #000; , y para los elementos activos agregué background: #999; , reemplazó el color de fuente con color blanco: #fff; y redondeamos un poco los bordes border-radius: 3px; en el botón resultante. Puedes fantasear y experimentar a este respecto a tu gusto.
Alinear al centro y a la derechaComo mencioné anteriormente, podemos cambiar la alineación de los elementos de navegación usando la propiedad text-align agregando algunas líneas de código CSS:
| /* menú a la derecha */ .nav .right ul ( text-align : right ; ) /* menú en el centro */ .nav .center ul ( text-align : center ; ) |
/* menú a la derecha */ .nav.right ul ( text-align: right; ) /* menú en el centro */ .nav.center ul ( text-align: center; )
Adaptando el menúComienza la diversión. Nuestro menú en esta etapa tiene un formato de goma (el ancho se determina como un porcentaje) y aún no es adaptable en absoluto. Comience a cambiar el tamaño de la pantalla y verá que el menú está integrado en un caótico revoltijo de botones.
Corregiremos la situación mediante consultas de medios. En el punto de aplicación de consulta de medios en 600 px, configuro el posicionamiento relativo en posición: relativa; para el elemento de navegación para que luego podamos colocar la lista del menú
- encima en posición absoluta posición: absoluta; . Usando la propiedad display: none, ocultaremos todos los elementos del menú li, dejando solo los enlaces actualmente activos con la clase actual, asignándoles la propiedad display: block
Cuando pasa el cursor sobre una barra de navegación agrupada, todos los elementos del menú deben mostrarse como una lista desplegable. Para ello, definimos la regla .nav ul:hover li con la función code>display: block. Para los elementos activos/actuales agregamos un ícono para resaltarlos del resto.
Si necesita mover el menú hacia la derecha o centrarlo, use las propiedades de posicionamiento izquierda y derecha para la lista ul de nuestro menú.
| @media screen y (ancho máximo: 600px) (.nav (posición: relativa; altura mínima: 40px;).nav ul (ancho: 180px; relleno: 5px 0; posición: absoluta; arriba: 0; izquierda: 0 ; borde: sólido 1px #aaa; fondo: #FAFAFA url (images/icon-menu.png) sin repetición 10px 11px; radio de borde: 5px sombra de cuadro: 0 1px 2px rgba (0, 0, . 3) ; .nav li (mostrar: ninguno; /* ocultar todo |
elementos */ ) .nav a ( display : block ; padding : 5px 5px 5px 32px ; text-align : left ; ) .nav .current a ( background : none ; color : #666 ; ) /* al pasar el cursor sobre los elementos del menú * / .nav ul: hover (imagen de fondo: ninguno;) .nav ul: hover li (pantalla: bloque; margen: 0 0 5px;) .nav ul: hover actual (fondo: url (imágenes/icon-check. png ) sin repetición 10px 7px ) /* menú responsivo a la derecha */ .nav .right ul ( izquierda : auto ; derecha : 0 ; ) /* menú responsivo en el centro */ .nav .center ul ( izquierda : 50%;) margen izquierdo: -90px;
