Cómo construir un menú de navegación deslizante sensible

Después de un largo período de investigación de diseños de respuesta móviles, pasé bastante tiempo experimentando con varios diseños de UI. Un punto de acceso importante en la página es a menudo la navegación principal del sitio web. Los usuarios desean un acceso rápido a sus páginas de contenido, y esto siempre será así, ya sea en un monitor completo o en una pantalla móvil más pequeña.

Para este tutorial, quiero demostrar cómo podemos usar una combinación de consultas de medios CSS3 junto con algunos jQuery para administrar un menú de navegación deslizante. Los enlaces aparecerán como de costumbre en el frontend, pero caerán en un menú oculto después de cambiar el tamaño por debajo de 600px. En cambio, vemos un pequeño ícono de menú desplegable que cambiará el comando de apertura y cierre.

Demo en vivo - Descargar código fuente

Configuración del documento

El área del encabezado superior contiene una pequeña selección de archivos que necesitamos para crear este efecto. Incluyo una hoja de estilo personalizada junto con una copia de la última biblioteca jQuery alojada por Google. Todas las funciones JS personalizadas se almacenan en un archivo externo llamado menu.js.

Demostración de navegación deslizante sensible

La mayor parte del marcado de la página no es importante, aparte del área del encabezado. Intenté mantener todo a una altura fija, pero el encabezado no puede usar una propiedad CSS fija o la página no se expandirá al deslizar el menú para abrirlo y cerrarlo. Así que los enlaces de encabezado y navegación están configurados por altura de la línea Valores en CSS.

<ul> <li>Casa</li> <li>Acerca de</li> <li>Proyectos</li> <li>Blog</li> <li>Estar en contacto</li> </ul> Menú de navegación <h1>Designado</h1>

La página h1 el título se ajusta mejor como último elemento, por lo que el encabezado siempre mantendrá su altura constante. Justo al lado del título hay un enlace de anclaje con el ID #navbtn y esto contiene el icono de enlace del menú deslizante. Solo se mostrará usando CSS después de que el ancho caiga por debajo de un cierto umbral.

Posiciones de marcado en CSS

Típicamente no considero que requiera jQuery siempre que sea posible. El único problema con los menús alternativos es que no podemos hacerlo de manera eficiente en CSS. Y los métodos de jQuery aplicarán estilos CSS en línea que anulan la hoja de estilo predeterminada. Así que se trata de posicionar los elementos usando CSS y ayudarlos a animarse adecuadamente con JavaScript.

html, body, div, span, applet, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, forma, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, aparte, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menú, nav, salida, ruby, sección, resumen, tiempo, marca, audio, video {margen: 0; relleno: 0; borde: 0; tamaño de letra: 100%; fuente: heredar; alineación vertical: línea de base; esquema: ninguno; -webkit-font-smoothing: suavizado; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-box-dimensionamiento: cuadro de borde; -mano caja de tamaño: cuadro de borde; tamaño de caja: caja de borde; } html {altura: 101%; } body {background: # f8f8f8 url ('images / bg.png'); / * BG Neutral http://subtlepatterns.com/ps-neutral/ * / font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; tamaño de letra: 62.5%; línea de altura: 1; color: # 343434; parte inferior de relleno: 55px; } :: selection {background: # b9e9b9; color: # 555; } :: - moz-selection {background: # b9e9b9; color: # 555; } :: - webkit-selection {background: # b9e9b9; color: # 555; } a {color: # 6992c0; } a: hover {color: # 77a4dc; } h2 {font-size: 2.9em; altura de la línea: 1.4em; color: # 626262; margen inferior: 22px; } p {font-size: 1.6em; altura de la línea: 1.7em; color: # 777; margen inferior: 15px; } #w {display: block; ancho máximo: 900px; ancho mínimo: 300px; margen: 0 auto; } #content {margin: 0 1em; fondo: #fff; relleno: 0 10px; } #pagebody {padding: 15px 25px; }

Los restablecimientos de mi navegador CSS predeterminado incluyen un conjunto de códigos personalizados para la tipografía de la página. Además, nuestro mosaico de fondo del cuerpo es PS Neutral salvado de patrones sutiles. Tuve que dividir el contenedor de envoltorio y el contenedor de cuerpo en 2 divs porque estamos usando el relleno lateral de la izquierda y la derecha para evitar que la página crezca al 100% de ancho. Agregando valores de margen en el margen: 0 auto; La propiedad dará lugar a perder el posicionamiento centrado.

/ * barra de navegación * / #topnav {display: block; ancho: 100%; posición: relativa; } #topnav #navbtn {mostrar: ninguno; flotar derecho; arriba: 0; ancho: 20px; altura: 70px; fondo: url ('images / menu.png') centro no-repetir; texto-sangría: -99999px; desbordamiento: oculto; } #topnav nav {position: absolute; arriba: 0; derecha: -10px; } #topnav nav ul {estilo de lista: ninguno; } #topnav nav ul li {display: block; flotador izquierdo; tamaño de letra: 1.4em; margen derecho: 4px; } #topnav nav ul li a {display: block; texto-decoración: ninguno; línea de altura: 70px; color: # 8ea188; font-weight: negrita; relleno: 0 10px; borde inferior: 2px sólido #fff; } #topnav nav ul li a: hover {color: # 6f8767; fondo: # ddecd9; color de borde inferior: # bdd8b5; }

Al estilizar el interior.

Elemento que conservamos el control sobre la barra de cabecera. Y al establecer la posición en absoluta, controlamos la distancia que seguirán los enlaces de navegación después del título. Observe cómo #navbtn se mostrará oculto hasta que se redimensione a menos de 560 px mediante consultas de medios. Todo lo demás está configurado, incluyendo la altura, el ancho y el posicionamiento.

Estilos responsivos

Hay solo una pequeña cantidad de cambios que he realizado cuando la ventana del navegador cambia de tamaño en menos de 560px. No creo que este sea un número mágico, simplemente resulta que es un área agradable cuando la navegación predeterminada comenzará a toparse con el texto del logotipo. Esto es cuando necesitamos ocultar el menú de navegación y mostrar el icono de alternar.

/ * estilos de respuesta * / @media screen y (max-width: 560px) {h2 {font-size: 2.2em; } p {font-size: 1.45em; línea de altura: 1.55em; } #topnav {altura: auto; } #topnav nav {mostrar: ninguno; posición: estática; ancho: 100%; arriba: auto; derecha: auto } #topnav nav ul li {float: none; margen: 0; } #topnav nav ul li a {display: block; ancho: 100%; altura de la línea: 1.4em; borde: 0; relleno: 6px 9px; fondo: # dcf4dc; } #topnav nav ul li a: hover {background: # cbdcc5; } #topnav nav ul li a.sel {color: # 6f8767; fondo: # cbdcc5; } #topnav #navbtn {display: block; }}

También significa eliminar el posicionamiento absoluto del elemento de navegación para que se renderice como un bloque estático. Los enlaces de anclaje de navegación se mostrarán como filas de ancho total del 100% para un acceso más rápido al tocar en una pantalla móvil. Además, los encabezados de página internos + párrafos se redimensionarán un poco más pequeños, junto con los valores de altura de línea ajustados.

Interacciones con JavaScript

El bit final de código en menu.js También podría incluirse directamente en el documento HTML. Pero como tenemos que manejar más de un solo método de conmutación, es más limpio y eficiente separar el marcado de los efectos dinámicos. Voy a desglosar este archivo en secciones para que sea más fácil de leer.

$ (function () {var nb = $ ('# navbtn'); var n = $ ('# topnav nav'); $ (window) .on ('resize', function () {if (nb.is ( ': oculto') && n.is (': oculto') && $ (window) .width ()> 569) {// si el menú de navegación y el botón de navegación están ocultos, // entonces se cierra el navegador de respuesta y el menú de navegación aún está oculto. // simplemente muestra el menú de navegación que se ocultará automáticamente en <560px de ancho y eliminará la clase. $ ('# topnav nav'). show (). addClass ('keep-nav-closed') ;}});

La primera gran parte es sin duda la más confusa. Se trata de errores menores al cambiar el tamaño de los navegadores de sensible a no sensible y no debería afectar en absoluto a los teléfonos inteligentes. Adjuntamos un controlador de eventos a la ventana que verifica el tamaño de .on (). Las dos declaraciones lógicas distintas están comparando con la variable que apunta al elemento de navegación del encabezado, junto con el enlace de alternar del menú de navegación.

Cuando el navegador responde y el usuario activa / desactiva el menú, agregará una línea estilo atributo. Esto tendrá prioridad sobre cualquier cosa escrita en la hoja de estilo y es un problema después de que el menú se haya abierto y cerrado. El nav tendrá un estilo permanente de pantalla: ninguna; incluso después de cambiar el tamaño más grande que 560px.

Esto es lo que está comprobando la segunda declaración if {}. Cuando tanto el botón de navegación como el botón de menú están ocultos, el diseño responde, el usuario abrió / cerró el menú y luego volvió a cambiar su tamaño a la vista normal. Así que solo necesitamos mostrar el navegador de nuevo, pero hay un problema. El método show () de jQuery también adjuntará estilos en línea, lo que significa que al volver a cambiar el tamaño para responder, el menú de navegación permanece abierto permanentemente. Para arreglar esto estaré agregando una clase. .keep-nav-closed. Esto solo se agregará si el navegador está cerrado y luego se redimensiona. Si se deja abierto cuando responde, permanecerá abierto cuando se redimensione más y vuelva a bajar.

if ($ (this) .width () <570 && n.hasClass ('keep-nav-closed')) {// si el menú de navegación y el botón de navegación están visibles, // entonces la navegación de respuesta responde de abierto a no responde, luego de nuevo. // volver a ocultar el menú de navegación y eliminar la clase oculta $ ('# topnav nav'). hide (). removeAttr ('class'); }

Ahora la otra afirmación si {} debería tener sentido en cuanto a por qué estamos revisando esta clase. Solo aparecerá después del segundo tiempo de cambio de tamaño y apertura de la navegación, por lo que sabemos que, en cambio, eliminamos la clase de la forma en que permanece cerrada cuando el tamaño vuelve a tener un ancho de respuesta. Es un error extraño y todavía tengo que encontrar una solución más pequeña o más rápida para manejar los estilos jQuery en línea, además de eliminar el atributo por completo (lo que aún causa problemas). Así que ahora avancemos y echemos un vistazo al segmento final de JavaScript.

$ ('# topnav nav a, # topnav h1 a, # btmnav nav a'). en ('clic', función (e) {e.preventDefault (); // detiene todos los enlaces de anclaje hash (#) desde la carga) ); $ ('# navbtn'). en ('clic', función (e) {e.preventDefault (); $ ("# topnav nav"). slideToggle (350);});

Ambos controladores de eventos están buscando eventos de clic en diferentes objetivos. El primero está bloqueado en todos los diferentes enlaces de anclaje en las secciones de navegación de encabezado y pie de página. Los valores href son símbolos hash (#) que no van a ninguna parte, así que simplemente los configuro para que no carguen nada. Esto es similar al hacer clic en el botón de navegación porque no queremos cargar un hash en la URL de la página. En su lugar, el menú de navegación oculta de respuesta se abrirá y cerrará a 350 milisegundos, ignorando completamente el valor href.

Demo en vivo - Descargar código fuente