Responsive Nav: un complemento de JavaScript simple para navegación responsiva
Índice
- Características
- ¿Cómo funciona?
- ¿Por qué elegir esta solución en lugar de otra?
- Demostración y descarga
En este artículo, Ariel Salminen se complace en presentar Responsive Nav, un complemento JavaScript gratuito y de código abierto. Una solución que no requiere una gran biblioteca y está lanzada bajo Licencia MIT, por lo que puedes usarla en todos tus proyectos de forma gratuita y sin restricciones. La solución no es única, ni pretende serlo. Pero para aquellos que buscan una solución que haga bien una cosa, definitivamente es una buena opción.
Hay varias formas de hacer que la navegación responda y, por lo general, la solución que necesitamos es bastante sencilla. Pero a pesar de la aparente simplicidad, hay muchos factores subyacentes que, cuando se analizan detenidamente y se implementan adecuadamente, pueden hacer que una solución simple sea aún mejor sin agregar más complejidad a la interfaz de usuario.
Uno de los problemas que he encontrado al crear navegaciones responsivas es que los navegadores actualmente no admiten transiciones CSS3 a una altura definida auto. La mayoría de las veces, tampoco deberíamos usar una altura fija porque la altura de los elementos del menú puede no ser la misma en todos los navegadores y la cantidad de elementos puede cambiar. También siempre trato de reducir el peso de las páginas que construyo, por lo que quería una solución que no requiera una gran biblioteca como jQuery para funcionar.
Hoy, me complace presentarles Responsive Nav , un complemento JavaScript gratuito y de código abierto que resuelve estos problemas y más en un pequeño paquete. Se publica bajo la licencia MIT , por lo que puedes usarlo en todos tus proyectos de forma gratuita y sin restricciones. La solución no es única, ni pretende serlo. Pero para aquellos que buscan una solución que haga bien una cosa, definitivamente es una buena opción.
El sitio oficial, visto en vivo en responsive-nav.com .
Responsive Nav es un pequeño complemento de JavaScript que pesa solo 1,6 KB minimizado y comprimido en Gzip, y le ayuda a crear una navegación alternada para pantallas pequeñas. Utiliza eventos táctiles y transiciones CSS3 para obtener el mejor rendimiento posible. También contiene una solución alternativa "inteligente" que permite realizar la transición de height: 0a height: auto, lo que normalmente no es posible con las transiciones CSS3.
- Marcado semántico simple.
- Pesa sólo 1,6 KB minificado y comprimido con Gzip.
- No requiere ninguna biblioteca externa.
- Utiliza transiciones CSS3 y eventos táctiles.
- Elimina el retraso de 300 ms entre un toque físico y el evento de clic.
- Hace posible utilizar transiciones CSS3 con
height: auto. - Creado teniendo en cuenta la accesibilidad, lo que significa que todo funciona en lectores de pantalla y también con JavaScript desactivado.
- Funciona en todos los principales navegadores de escritorio y móviles, incluido IE 6 y superiores.
- De uso gratuito bajo la licencia MIT.
La demostración oficial, vista en vivo en responsive-nav.com/demo .
Responsive Nav es el sucesor de TinyNav.js que se lanzó en 2011. Si bien TinyNav trabajó para convertir una navegación normal en un menú de selección, Responsive Nav solo oculta la navegación original y agrega una palanca que la abre y la cierra. Responsive Nav básicamente no altera la estructura html del documento en absoluto, por lo que, en ese sentido, es una solución mucho más simple.
Responsive Nav funciona calculando en segundo plano la altura máxima necesaria para ajustarse a todos los elementos del menú. Cuando el usuario toca el botón de navegación, el complemento usa transiciones CSS3 para pasar de una altura establecida en 0 a la altura máxima que calculó anteriormente. Responsive Nav también adjunta un touchstartdetector de eventos al interruptor, lo que permite eliminar el retraso predeterminado de 300 ms que ocurre cuando se usan eventos de clic.
Responsive Nav es liviano y no depende de ninguna biblioteca externa. La navegación se abre instantáneamente touchstart: no más demoras de 300 ms en dispositivos táctiles. También es (hasta donde yo sé) el único complemento de navegación responsivo que utiliza transiciones CSS3 con altura variable (aunque corríjame si me equivoco). Responsive Nav también está diseñado teniendo en cuenta la accesibilidad, lo que significa que todo funciona en lectores de pantalla y con JavaScript desactivado, desde el primer momento. Finalmente, se ha probado que Responsive Nav funciona en más de 60 navegadores móviles y de escritorio , por lo que no tendrás que preocuparte por la compatibilidad del navegador. Consulte la lista completa de plataformas probadas.
- Sitio web oficial , que incluye instrucciones (¡también funciona como demostración!)
- Demo en vivo
- Descargar (el archivo ZIP incluye siete ejemplos)
- repositorio de GitHub
Otras lecturas
- Navegación responsiva en sitios web complejos
- Los menús fijos son más rápidos de navegar
- Navegación progresiva y responsiva
- Cómo establecer un laboratorio de dispositivos abiertos para mejores pruebas móviles
(al, ea, mrn)Explora más en
- Codificación
- Herramientas
- javascript
- Navegación
- Complementos
- Mejoramiento
Tal vez te puede interesar:
- ¿Deberían abrirse los enlaces en ventanas nuevas?
- 24 excelentes tutoriales de AJAX
- 70 técnicas nuevas y útiles de AJAX y JavaScript
- Más de 45 excelentes recursos y repositorios de fragmentos de código