Tres alternativas CSS para la navegación JavaScript

 

 

 


Índice
  1. Alternativa 1: poner el menú en una página separada
  2. Alternativa 2: el desplazamiento horizontal
  3. Alternativa 3: el menú de hamburguesas solo con CSS

¡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.

Alternativa 1: poner el menú en una página separada

¿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; }/script

Entonces, 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!

Alternativa 3: el menú de hamburguesas solo con CSS

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!






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La anatomía de un componente Tablist en Vanilla JavaScript versus React
  2. Trabajar con consultas de medios JavaScript
  3. Uso de JavaScript para ajustar la saturación y el brillo de los colores RGB
  4. Los tipos de programación orientada a objetos (en JavaScript)

Tres alternativas CSS para la navegación JavaScript

Tres alternativas CSS para la navegación JavaScript

Alternativa 1: poner el menú en una página separadaAlternativa 2: el desplazamiento horizontalAlternativa 3: el menú de hamburguesas solo con CSSTal vez te

programar

es

https://pseint.es/static/images/programar-tres-alternativas-css-para-la-navegacion-javascript-1613-0.jpg

2024-06-13

 

Tres alternativas CSS para la navegación JavaScript
Tres alternativas CSS para la navegación JavaScript

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences