Diseño web receptivo se ha convertido en una práctica estándar en Internet. Si su sitio web no responde, está alienando un estimado 60% de los usuarios web . Uno de los mayores obstáculos con el diseño web receptivo es elaborar sistemas de navegación que funcionan tan bien en las pantallas pequeñas como en pantallas más grandes. En este artículo veremos dos enfoques para crear una versión móvil de un menú con el deslizamiento hacia abajo y el deslizamiento. Desglosaré el HTML, CSS y JQuery reales que hacen que estos menús funcionen. Los dos ejemplos usan el estilo de menú de icono de hamburguesas que se ha convertido en una práctica aceptada común en la web para representar un menú colocado o oculto. Le animo a que use estas técnicas como el recurso final cuando el tamaño de la pantalla se vuelve demasiado pequeño para acomodar un menú tradicional. Por lo general, cambiar el tamaño y reposicionamiento del menú desde los tamaños de escritorio a los tamaños de tabletas y solo recurre a un menú colapsado por debajo de 767 píxeles de ancho, que es el tamaño máximo general de un dispositivo móvil paisajista. Descargo de responsabilidad: Al igual que mi último Artículo de ejemplo de diseño web receptivo , se volverá bastante nerd de aquí en adelante.

1. Deslice hacia abajo

El menú de deslizamiento hacia abajo es mi método preferido cuando un sitio web tiene ocho o menos opciones de menú (más que eso y esta técnica se vuelve engorrosa). Aquí está la estructura HTML básica para configurar todo.

Vea el bolígrafo xbxvvp por Alex Caldwell ( @acaldy ) en CodePen .

Here’s the CSS to set it up as a traditional horizontal menu as well as a collapsed menu with a hamburger icon. You’ll notice that the CSS is written in Sass. The heavy lifting happens in the media query at 767px.

Vea el bolígrafo xbxvvp por Alex Caldwell ( @acaldy ) en CodePen .

So at a screen width of 767px we show the .menuIcon class where the menu used to be. We also hide the menu with the combination of max-height:0; and overflow:hidden; Then we go through and style everything inside of the menu. The menu options stack with display:block; and span the full width of the page. We also prep the menu with a CSS transition when the max-height is changed with a Sass mixin. Finally here’s the jQuery function that toggles the class .menuOpen:

Vea el bolígrafo XBXVVP por Alex Caldwell ( @acaldy ) en CodePen .

2. Deslice

La diapositiva es una buena técnica cuando el sitio tiene una gran lista de opciones de menú (generalmente ocho o más). Al igual que el menú de deslizamiento hacia abajo, este menú se derrumba en un icono de menú de hamburguesas y luego toma la pantalla deslizándose desde un lado y empujando el cuerpo del sitio web. Es una buena técnica para dirigir la atención de los usuarios, ya que se convierte en lo único con lo que pueden interactuar en la pantalla. La técnica real es en gran medida la misma. Hay una consulta de medios para alterar el CSS y una función de alternativa jQuery para agregar y eliminar un par de clases. Es la estructura HTML inicial la que difiere para esta técnica, ya que el menú móvil debe colocarse fuera del contenedor del sitio web principal para empujarlo hacia un lado. La estructura HTML se vería algo así:

Vea el bolígrafo zyyqwx por Alex Caldwell ( @acaldy ) en Codepen .

Note that I'd normally use a php include for the menu options so that if we update it we only have to change it in one spot, but I can't do that with codepen. There’s also a .mobileDimmer class that we’ll use to fade the body of the website to shift all of the focus to the menu. The initial CSS to set up .menu and hide .mobileMenu looks like this:

Vea el bolígrafo Zyyqwx por Alex Caldwell ( @acaldy ) en CodePen .

Entonces hay un par de cosas que suceden aquí. Estamos diseñando. Menu en un diseño horizontal. Estamos configurando el .mobilemenu para apilar las opciones de menú verticalmente y luego ocultarlo con la posición: Absoluto, margen-izquierda: -100%, y visualización: ninguno. También estamos configurando .Mobiledimmer para llenar el cuerpo del sitio con un fondo negro al 50% y un valor de posicionamiento izquierdo del 50% (el ancho del .mobilemenu). Bajo 767px de ancho, nos escondemos .menu y show .Menuicon. También obtenemos .MobileBodyWrapper y .Mobilemenu preparados con la clase de .MenuOpen para la función jQuery Toggle. Cuando agregamos la clase .menuopen a .MobileBodyWrapper, deslizará todo el cuerpo por encima del 50%, lo hará posición: fijo y esconde todo fuera de la ventana de la ventana con desbordamiento: oculto. Cuando agregamos la clase .menuopen a .mobilemenu, cambiará para mostrar: bloquear, margen-izquierda: 0, un ancho del 50%y desbordamiento y: desplazarse. El MobiledimiledMer que configuramos anteriormente cubrirá el cuerpo y tendremos un buen enfoque en el menú a la izquierda a medida que atenuemos el cuerpo a la derecha.

Vea el bolígrafo ZyyQWX por Alex Caldwell ( @acaldy ) en CodePen .

Note that it’s set up in a jQuery function so that if the user clicks on the .mobileDimmer it will also close the .mobileMenu, which is good usability. It’s a nice little effect where the focus is put on the menu as the user interacts with it. Hopefully this article sheds some light on how to handle two different menu sizes in a user friendly manner. Creating a menu system that works on both desktop and mobile is challenging. A medida que el número de usuarios móviles continúa creciendo, estas prácticas se volverán más comunes e incluso pueden ser reemplazadas por nuevas soluciones que benefician aún más a los usuarios. || 132