hogar › Internet › Diferentes menús regulares y móviles en WordPress, función wp_is_mobile, complemento WP Responsive Menu. Navegación adaptativa: dónde colocar el menú en los smartphones

Diferentes menús regulares y móviles en WordPress, función wp_is_mobile, complemento WP Responsive Menu. Navegación adaptativa: dónde colocar el menú en los smartphones

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. Vamos a empezar.

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:

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.

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.

Hogar
Sobre nosotros
- Historia
- El equipo
- Nuestra dirección
Contacto

Estilos de menú 1. Si el complemento encuentra una lista anidada, dentro de la etiqueta li principal agrega un enlace al que ya existe dentro de este li. Al hacer clic en el enlace agregado, se abre un submenú. Para hacer que un elemento del menú sea un enlace a un submenú completo en lugar de solo dos enlaces, debe usar una etiqueta span.

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

Javascript Necesitará un botón que, al hacer clic, abra un menú. Recomiendo usar estas hamburguesas. Allí podrás leer cómo usarlos. En resumen, deberá descargar los estilos de hamburguesa, conectarlos a la página y agregar aproximadamente el siguiente código html

Utilicé la clase Fija para establecer la posición: fija

Para 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 tenía, 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

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.

Marcado HTML

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
portafolio
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.

CSS que define estilos

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

en el contenedor de navegación nav . Esto le permitirá alinear los elementos del menú a la izquierda, a la derecha y exactamente al centro especificando la propiedad de alineación de texto en el elemento de la lista.

/* 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.

Como 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; )

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ú

@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

puntos */ margen : 0 ; ) .nav .current (display: block; /* muestra solo actualmente activo

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;

@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;
¡Eso es probablemente todo! Nuestro maravilloso menú 100% adaptativo ya está listo, como podrás comprobar mirando de nuevo el ejemplo. Para un estudio más detallado del material, puedes descargar las fuentes y con tranquilidad, sin complicaciones innecesarias, profundizar en el tema.
La lección se preparó utilizando materiales.
Traducción y adaptación libre: Andrey /conductor/

Trabajar con elementos anidados no es fácil porque, por ejemplo, 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 movemos 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
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 con posición absoluta, por lo que tendremos que usar posicionamiento absoluto, lo que conducirá al problema de comportamiento no deseado del sitio (menú 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; fondo: #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"));

Hoy en día, los menús de navegación de jQuery son más que simples bloques de texto con enlaces. En Compartí cómo puedes usar JQuery y CSS3 para crear un menú de navegación que se vea realmente genial.

Usando el poder de JQuery, podemos convertir el menú de navegación en un menú dinámico. Si bien actualmente solo puedes usar CSS3 para crear navegación dinámica, JQuery hace que los menús sean aún más poderosos.

Además de las funciones dinámicas, el diseño también juega un papel importante. Aunque sólo sea porque esto es lo que los visitantes ven primero cuando llegan a su sitio.

Si el menú no se puede presentar, brindará a los usuarios una mala experiencia de usuario. Un buen diseño de menú, a su vez, aumentará la calidad de su sitio web y brindará una mejor experiencia de usuario.

Hoy les presento 30 fantásticos ejemplos de menús de navegación de jQuery.
1.agresivo
Pushy es un menú de navegación responsivo que no es un lienzo y utiliza transformaciones y transiciones CSS. Funciona muy bien en dispositivos móviles. Asegúrate de ver la demostración y definitivamente te gustará.

Demostración | Descargar
2. Furtivo

Este es otro excelente menú de jQuery para crear hermosas listas de navegación desplazables. Su característica distintiva es el pequeño tamaño de los archivos fuente.

Demostración | Descargar
3. Menú emergente de jQuery

Este es un menú emergente simple y responsivo con características muy interesantes. Cuando hace clic en el ícono de menú, aparece una ventana de menú con íconos de elementos. Mira la demostración.

Demostración | Descargar
4. Barras deslizantes

Slidebars es un marco JQuery para implementar rápida y fácilmente estilos de aplicaciones sin estar atado a un lienzo. Las barras deslizantes también manejan cambios de orientación y cambios de tamaño.

Demostración | Descargar
5. Menú cuadrado de jQuery

Menú JQuery, que muestra un menú de sitio web cuadrado animado usando JQuery y CSS3. Asegúrate de esto mirando la demostración.

Demostración | Descargar
6. Navegación en vista de página en perspectiva

Este menú de navegación jQuery convierte una página en un menú 3D. La idea es crear un diseño de aplicación móvil en el que cuando haces clic en un ícono de menú, el contenido de la página se desliza hacia un lado y el menú pasa al frente.

Demostración | Descargar
7. Navegación inteligente

Complemento para crear un menú jQuery móvil responsivo con varios niveles y configuraciones flexibles pero simples. Compatible con diferentes navegadores, es posible la navegación mediante el teclado.

Demostración | Descargar
8. Menú

Menú jQuery para aplicaciones con y sin vinculación al lienzo con subelementos emergentes. Gracias a numerosas opciones, complementos y extensiones, es posible una personalización del menú muy flexible.

Demostración | Descargar
9. Sidr

Complemento jQuery para crear menús y agregar fácilmente funciones de respuesta. Con Sidr puedes crear varios elementos de tu sitio web, así como menús responsivos.

Demostración | Descargar
10. menú delgado

slimMenu es un pequeño complemento de jQuery que le ayudará a desarrollar menús de navegación responsivos de varios niveles. Lo bueno de esto es que puedes tener varios menús diferentes y todos responderán completamente.

Demostración | Descargar
11.Navegación horizontal

Menú de navegación jQuery, que le permite configurar un menú horizontal en todo el ancho del contenedor. Este complemento lo hace muy fácil. Además, se puede implementar soporte para IE7.

Demostración | Descargar
12.FlexNav

Este es un primer ejemplo móvil del uso de consultas de medios y JavaScript para crear excelentes menús de varios niveles con soporte para pantallas táctiles, efectos de desplazamiento y navegación con teclado.

Demostración | Descargar
13. Menú jQuery-Apuntar

Menú jQuery que activa eventos cuando el mouse pasa sobre un elemento del menú desplegable. Ideal para crear menús desplegables responsivos como el de Amazon.

Demostración | Descargar
14. Menús inteligentes

Un complemento de menú jQuery que ofrece una forma sencilla e intuitiva de mostrar menús. Crea listas de menú responsivas. ¡Funciona en todos los dispositivos!

Demostración | Descargar
15. Cambiador

Shifter es un complemento jQuery fácil de usar para dispositivos móviles para crear menús deslizantes que se deslizan desde el lado derecho cuando haces clic en el botón de cambio. Sólo hay una opción de maxWidth para configurar. Le permite ajustar la resolución/orientación para dispositivos móviles.

Demostración | Descargar
16.Hamburguesa

Hamburger es un complemento de jQuery para crear un menú deslizante estilo aplicación de Android que coloca un menú emergente en el borde derecho de la pantalla. Cuando el menú se expande a tamaño completo, se superpone al área de contenido, pero no a la barra de acciones.

Demostración | Descargar
17. Enfoque

Focucss es un menú de navegación jQuery que crea un menú de barra lateral sin lienzo con interesantes funciones de desenfoque que pueden ayudarle a atraer la atención de los usuarios hacia las secciones principales del sitio y hacer que las secciones menos visibles sean menos notorias.

Demostración | Descargar
18. Cajón

Drawer es un complemento de jQuery para crear un menú animado y responsivo que aparece desde el costado de la pantalla cuando se hace clic. Es posible que hayas visto funciones similares en aplicaciones de Android.

Demostración | Descargar
19.Menú de datos

Datmenu es un menú responsivo jQuery premium con varias funciones de animación CSS3. Lo bueno de este complemento es que es totalmente personalizable con opciones js.

Demostración | Descargar
20. jPanelMenú

jPanelMenu es un menú jQuery hermoso y moderno que le permite crear un menú de navegación de panel con funciones de transición de animación CSS3. El estilo de jPanelMenu recuerda a las versiones móviles de Facebook y Google. El complemento se puede utilizar para una variedad de aplicaciones móviles.

Demostración | Descargar
21. Menú lateral de vuelo

Fly Side Menu es un fantástico complemento de menú de navegación que utiliza CSS3 para crear un menú lateral con transformaciones y transiciones 3D.

Demostración | Descargar
22. Complemento de menú PageScroll jQuery

PageScroll es un menú jQuery móvil personalizado recomendado para su uso en cualquier sitio web, así como en páginas de destino.

Demostración | Descargar
23.Menú de iconos DD

DD Icon Menu es un complemento de jQuery que le permite crear un menú vertical de íconos ubicados en el borde de la pantalla con subelementos de menú que se expanden al pasar el mouse.

Demostración | Descargar
24. Navegación por fecha móvil JQuery

Menú jQuery que permite navegar por fechas en un rango seleccionado (semana, mes o año). Ideal para solicitar información mediante llamadas AJAX.

Demostración | Descargar
25. Navóbil

Complemento de menú de navegación jQuery que facilita la creación de menús móviles. Utiliza transiciones CSS para establecer la posición del menú en dispositivos móviles.

Demostración | Descargar

26. Menú push de varios niveles

El menú push multinivel es una biblioteca de Javascript creada por MARY LOU de Codrops. Crea menús de varios niveles que se deslizan desde el lado izquierdo de la pantalla y desplazan el contenido hacia la derecha.

Demostración | Descargar

Una de las áreas que requiere especial atención a la hora de desarrollar un diseño de interfaz para un dispositivo móvil es el menú de navegación. Si el sitio tiene muchas secciones o páginas, se requiere habilidad especial para acomodar todos los elementos en una resolución de pantalla pequeña. Muy a menudo, la navegación se convierte en un montón de líneas o un montón de botones apilados uno encima del otro. En este tutorial veremos una forma de crear navegación usando jQuery.
Tarea
Las capturas de pantalla siguientes muestran situaciones con plantillas en pantallas de dispositivos móviles. Si la navegación tiene 3 o 4 botones, su ubicación se guardará en una línea. Pero cuando el menú contiene 6 o más elementos, se convierte en un montón feo.

Solución
Una forma común es convertir la navegación en un menú desplegable basado en el elemento seleccionado. Esta solución tiene la desventaja de que al elemento seleccionado no se le puede aplicar estilo usando CSS. Los complementos de Javascript como Chosen te permiten personalizar el menú, o tendrás que conformarte con los estilos del sistema para la lista desplegable. El usuario también puede confundirse cuando la versión de pantalla ancha de la estructura del menú se transforma en una lista desplegable en un dispositivo móvil.

2) Salida como bloque
Otra forma popular es formar elementos de menú como elementos de bloque con elementos dispuestos verticalmente. Sin embargo, este enfoque ocupa mucho espacio en el título. Si la navegación contiene muchos botones, el usuario tendrá que desplazarse por una larga lista para llegar a la información.

3) Icono de menú
Y el último método que veremos en nuestro tutorial es usar el ícono de menú para habilitar la navegación. Este enfoque ahorra espacio en la página (lo cual es importante para un dispositivo móvil) y brinda control total sobre la apariencia mediante CSS. El icono del menú y la navegación en sí se pueden presentar de acuerdo con el estilo general del sitio.

Navegación móvil habilitada usando jQuery
En este tutorial le mostraremos cómo crear navegación para la pantalla pequeña. jQuery se utilizará para preparar el ícono del menú y habilitar la navegación. No se requieren etiquetas HTML adicionales para que funcione la navegación.

Nuestro menú utilizará una estructura simple:
- Botón
- Botón
El menú requiere código JavaScript para funcionar. La función prepara el elemento en el archivo . Cuando un visitante hace clic en el elemento #menu-icon, la navegación se desliza hacia afuera.

jQuery(document).ready(function($)( /* Preparar el icono de menú */ $("#nav-wrap").prepend("Menu"); /* Habilitar navegación */ $("#menu-icon " ).on("click", function())( $("#nav").slideToggle(); $(this).toggleClass("active"); ));

Como resultado del script, la estructura del documento cambiará:

Menú
- Botón
- Botón
Nuestra demostración utiliza un código CSS bastante simple. El punto clave se presenta en la siguiente figura. El elemento #menu-icon inicialmente tiene la propiedad display:none. Utiliza una consulta de medios para cambiar #icono de menú para mostrar: bloquear si el ancho de la ventana gráfica es inferior a 600 px.

El resultado será una navegación con la funcionalidad presentada: