Tres alternativas CSS para la navegación JavaScript
¡Oye rápido! Debes crear la navegación para el sitio y comenzar a trabajar en el comportamiento móvil. ¿Qué patrón eliges? Si es como la mayoría de la gente, probablemente sea el menú “hamburguesa” que, al hacer clic, utiliza un poco de JavaScript para expandir una lista vertical de enlaces de navegación.
Pero esa no es la única opción.
Dependiendo del contexto y el contenido de la navegación, puede haber un método sin JavaScript que haga el trabajo y al mismo tiempo proporcione una experiencia más accesible.
Se considera una mejor práctica utilizar un enfoque de mejora progresiva, creando primeras páginas web para usuarios con la tecnología más antigua y menos capaz, y luego introduciendo mejoras adicionales según lo permita el soporte. Si puede brindar una experiencia de calidad a los usuarios con tecnología básica, entonces podría considerar si su página web requiere o no la funcionalidad de JavaScript. Dejar JavaScript fuera de la navegación puede garantizar que los usuarios puedan navegar por su sitio web incluso si JavaScript está deshabilitado o problemas de red impiden que se carguen los scripts, lo que definitivamente es una ventaja.
Veamos tres patrones alternativos al menú de hamburguesas basado en JavaScript.
¿Quién dijo que la navegación tiene que estar en el encabezado de cada página? Si su interfaz es extremadamente liviana o si tiene una larga lista de elementos de menú para mostrar en su navegación, el método más práctico podría ser crear una página separada para enumerarlos todos. El tema liviano de WordPress Susty utiliza este método para su navegación.
Este patrón es especialmente útil para sitios web estáticos que utilizan enrutamiento de sistema de archivos. Si el proyecto se crea utilizando un generador de sitios estáticos, la carga de la página puede ser imperceptible para el usuario y tener el beneficio adicional de mantener sus plantillas lo más modulares posibles.
Básicamente, todo lo que se necesita es reemplazar el botón “Menú” con un botón de cerrar cuando el usuario esté en la página del menú. Al hacer clic, podemos llevar al usuario a la última página en la que se encontraba de varias maneras. Si usamos un CMS del lado del servidor, como WordPress, entonces podemos tomar la última URL $_SERVER['HTTP_REFERER']y configurarla como la URL del botón “cerrar”.
Pero si no utilizamos una configuración del lado del servidor, entonces sí, es posible que necesitemos algunas líneas de JavaScript para obtener la última URL.
a href="https://MyHomePage.com"×/a
script function handleClick(event) { // Don't follow the link event.preventDefault(); // Go back to last visited page window.history.back(); // Bail out of the function return false; }/scriptEntonces, si bien me gusta este método y patrón, es posible que JavaScript requiera según el proyecto.
Alternativa 2: el desplazamiento horizontal
Este enfoque es perfecto para listas de enlaces más cortas y permite a los usuarios acceder a todos los elementos de navegación sin abrir nada ni hacer clic fuera de donde se encuentran. GitHub utiliza este enfoque para los submenús.
¡Usar flexbox combinado con un desbordamiento de desplazamiento en CSS será suficiente!
El hecho de que el patrón del menú de hamburguesas a menudo se haga con JavaScript no significa que tengamos que usar JavaScript. Utilizando pseudo-selectores CSS y HTML input, podemos crear un menú móvil enriquecido y guardar JavaScript para otras funciones que realmente lo requieran.
¿Ver? Sólo porque una convención sea popular no significa que sea la única forma de hacer las cosas. A menudo existen métodos más sencillos y accesibles, especialmente en lo que respecta a la navegación. No requiere mucho trabajo crear una navegación funcional, liviana e inmersiva sin JavaScript y obtenemos algunos beneficios interesantes a lo largo del camino. Si ha creado algún patrón de navegación interesante solo con CSS, me encantaría verlo. ¡Compártalo en los comentarios!
Deja un comentario