Tenemos un buen comienzo en el diseño receptivo. El menú en los tamaños de pantalla más pequeños se divide en una cuadrícula de 2 × 4. Encaja muy bien en la pantalla, pero entre eso y la marca ocupa una gran cantidad de espacio. Lo abrimos en el simulador de iOS y vemos que, en algunos casos, no puede ver ningún contenido real.
Echamos un vistazo a algunos recursos sobre cómo manejar los patrones de navegación, como el artículo Responsive Navigation Patterns de Brad Frost y Off Canvas de Jason Weaver. También vemos una demostración interesante de MDN llamada Paperfold.
Agregamos un enlace adicional a la navegación que finalmente llamamos "Navegación 'n' Búsqueda", que actuará como el botón para revelar la navegación móvil cuando se toca. A través de los puntos de interrupción de las consultas de medios, ocultamos y mostramos este botón según sea necesario.
El cambio de navegación lo manejaremos principalmente con JavaScript. Un poco arriesgado, ya que aleja a los que están en pantallas pequeñas con JavaScript deshabilitado, pero lo sigo. Ese número es tan pequeño (más pequeño que el de escritorio sin JavaScript, que ciertamente es menos del 1%) que voy a ser un idiota y correr con él.
Todo lo que realmente hacemos con JavaScript es alternar el nombre de una clase. Eso es lo que me gusta pensar en el desarrollo de CSS impulsado por el estado. Todo el control de lo que se muestra y cuándo y cómo se maneja con CSS. JavaScript simplemente establece una clase para declarar el estado actual.
Pasamos mucho tiempo jugando añadiendo el CSS “paperfold”, haciendo que funcione correctamente y luego colocando la búsqueda en un espacio que creamos sobre el contenido principal a través de un relleno.
En última instancia, el tamaño y la posición se ajustan para que quepan aún mejor y se agrega un pequeño botón de cierre. Voy y vengo en mi cabeza proporcionando UI para alternar estados en cosas como esta. Por un lado, ahora que el usuario ha revelado la navegación, ¿por qué tendría que cerrarla? Ya lo han visto. Si no quieren usarlo, simplemente pueden pasarlo. Por otro lado, me resulta un poco molesto cuando no puedo alternar estados como este en otras aplicaciones (por alguna razón), así que me inclino a proporcionar un mecanismo para hacerlo.
