Crear un menú desplegable responsivo es una tarea complicada. Hay muchas decisiones que tienes que tomar, tanto en el diseño como en las fases de desarrollo. Las soluciones recomendadas generalmente dependen de las características del sitio web o aplicación que estás creando. Sin embargo, también hay algunas mejores prácticas generales que se recomiendan para todos los tipos de menús desplegables responsivos.

Recabé estas mejores prácticas mientras escribía mi tutorial cómo elaborar una barra de navegación responsiva con flexbox. Como es más bien un tutorial práctico, no tuve mucho espacio para explicar cuáles decisiones del diseño y del desarrollo tienen que tomarse, así que aquí las tienes. Estas recomendaciones no solo para menús flexbox sino para toda clase de desplegables responsivos.

• Flexbox
  Cómo elaborar una barra de navegación responsiva con Flexbox
  Anna Monus

1. Usar el diseño primero dispositivos móviles

Problema

Aunque podría parecer más fácil diseñar un menú primero para pantallas de escritorio y luego adaptarlo a ventanas gráficas más pequeñas, generalmente este no es el caso, especialmente si tu menú tiene un submenú desplegable.

Si primero diseñas el menú para pantallas de computadoras de escritorio, puede complicarse rápidamente y tal vez termines con un menú muy largo en dispositivos móviles que los usuarios ¡solo se mantendrían desplazándose y desplazándose sin llegar al final!

Solución

Puedes implementar el diseño primero dispositivos móviles usando las media queries min-width en lugar de las max-midth:

@media all and (min-width: 960px) {
    // ...
}

Con media queries min-width, el diseño para dispositivos móviles será el predeterminado y añadirás reglas al hacerlo más grande para las tabletas, luego para las pantallas de computadoras de escritorio (o en algunos casos, ni siquiera necesitas un diseño separado para las tabletas).

Esto también es importante desde un punto de vista del rendimiento. Si usas el diseño primero dispositivos móviles, los teléfonos inteligentes (que acceden frecuentemente a tu sitio por una conexión de uso medido o wifi inconsistente) tienen que evaluar menos reglas de estilo, pues pueden omitir los bloques de media query.

2. Reordenar los elementos del menú

Problema

En muchos casos, podrías querer mostrar los elementos del menú y del submenú en un orden diferente en pantallas de teléfonos, tabletas y computadoras de escritorio, pero quieres mantener el esquema de HTML lógico y accesible.

Solución

Con la propiedad order, puedes cambiar el orden visual de los elementos del menú mientras mantienes el DOM sin cambio.

Como regla de oro, los elementos del menú en el esquema del HTML deberían seguir un orden que sea el mejor para los usuarios de lectores de pantalla y otras tecnologías asistivas. No olvides que los bots del motor de búsqueda también son similares a los lectores de pantalla en el sentido de que solo ven el esquema HTML pero no el orden visual.

Aquí está un ejemplo de un menú que consiste de botones de llamada a la acción y enlaces de menú. Queremos que las llamadas a la acción aparezcan al inicio del menú en teléfonos y tabletas y al final del menú en pantallas de computadoras de escritorio. En el HTML, los enlaces del menú van primero (sin embargo, no es una norma, pues en algunos casos, podrías querer poner los botones de llamada a la acción para usuarios de lectores de pantalla.

<nav>
        <ul>
            <li class="mlink">Menu Link 1</li>
            <li class="mlink">Menu Link 2</li>
            <li class="mlink">Menu Link 3</li>
            <li class="cta">CTA 1</li>
            <li class="cta">CTA 2</li>   
        </ul>
    </nav>

Como valor predeterminado de order es 0, no tienes que cambiarlo para el primer elemento. Para el segundo elemento en el orden visual su valor será 1. Para el tercero, será 2, y así sucesivamente. Nota que order también puede tomar valores negativos. Así, el CSS lucirá como se muestra a continuación:

ul {
    display: flex;
}
.mlink {
    order: 1;
}
@media all and (min-width: 960px) {
    .mlink {
        order: 0;
    }
}

Nota: la propiedad order funciona únicamente con los maquetados flexbox y CSS grid, así que si quieres usarla necesitas añadir display: flex; o display: grid; al elemento padre del menú.

3. Usar Event Listeners (controladores de eventos) en teléfonos y tabletas

Problema

En computadoras de escritorio, el submenú generalmente se activa usando la pseudo clase :hover. Cuando los usuarios colocan el puntero del mouse sobre el elemento padre del menú, el submenú asociado aparece en la pantalla. Cuando retiran el puntero del mouse, el submenú desaparece. Sin embargo, no existe :hover en teléfonos, tabletas u otros dispositivos con pantalla táctil.

Solución

Usando event listeners de Javascript, puedes abrir y cerrar el submenú cuando el usuario hace clic o toca el elemento padre del menú. El método addEventListener() es parte de la DOM API e integrado en todo navegador más reciente que Internet Explorer 9.

El siguiente ejemplo de código es de mi tutorial sobre menú en flexbox mencionado anteriormente, y añade o elimina la clase .submenu-active cuando el usuario hace clic en el elemento padre del menú. Los estilos de display de .submenu-active pueden añadirse con CSS.

/* Activate Submenu */
function toggleItem() {
  if (this.classList.contains("submenu-active")) {
    this.classList.remove("submenu-active");
  } else if (menu.querySelector(".submenu-active")) {
    menu.querySelector(".submenu-active").classList.remove("submenu-active");
    this.classList.add("submenu-active");
  } else {
    this.classList.add("submenu-active");
  }
}

/* Event listeners */
for (let item of items) {
    if (item.querySelector(".submenu")) {
      item.addEventListener("click", toggleItem, false);
    }   
}

El ciclo for...of itera por todos los elementos del menú, luego el bloque if selecciona los que tienen un submenú y les añade un event listener de clic. La función personalizada toggleItem() es llamada cuando el usuario hace clic/toca un elemento del menú que tenga un submenú.

Hay muchos eventos en la DOM API a los que puedes apuntar con event listeners. Para dispositivos con pantalla táctil, click y touchstart son los más frecuentemente utilizados. Arriba, hemos usado click pues funciona para clic y touch, mientras que touchstart solo funciona para touch pero no para clic.

Nota: puedes apuntar únicamente un tipo de evento con el método addEventListener(). Esta es una diferencia importante comparada con jQuery donde puedes agregar más de un evento al método on() utilizado para event listeners.

4. Elegir entre clic y hover en computadoras de escritorio

Problema

Ahora que tu submenú funciona en teléfonos y tabletas, hay otro problema: en computadoras de escritorio, tal vez quieras permitir a los usuarios mostrar el submenú en hover en lugar de hacer clic. Sin embargo, si ya has agregado el event listener con clic para mostrar el submenú en dispositivos de pantalla táctil, el menú para computadoras de escritorio reaccionará para clic y para hover.

Las dos acciones del usuario puede interferir fácilmente una con otra, lo cual puede causar confusión o en algunos casos, incluso romper el diseño del menú.

Solución

En pantallas de computadora de escritorio, necesitas decidir si el submenú se mostrará en hover o con un clic. Generalmente, diría que si estás creando una aplicación web, elige clic, pues es el comportamiento que buscarán la mayoría de los usuarios de aplicaciones web. Y si estás creando un sitio web, elige hover, pues se siente más natural en un sitio web.

Si eliges clic

Si decides mantener el manejador de evento clic para pantallas de computadoras de escritorio, hay un pequeño error de experiencia de usuario para corregir. Cuando el usuario navega desde el área del menú, el submenú no se cerrará por sí mismo (lo cual sería el comportamiento normal en hover). Para cerrar el submenú, el usuario tendrá que navegar de vuelta hacia el elemento padre del menú y hacer clic otra vez, lo cual no es la experiencia de usuario ideal.

Para arreglar este problema, puedes usar el siguiente script que permite al usuario cerrar el submenú haciendo clic en cualquier parte de la página.

/* Close Submenu From Anywhere */
function closeSubmenu(e) {
  let isClickInside = menu.contains(e.target);

  if (!isClickInside && menu.querySelector(".submenu-active")) {
    menu.querySelector(".submenu-active").classList.remove("submenu-active");
  }
}

/* Event listener */
document.addEventListener("click", closeSubmenu, false);

Añade un event listener al objeto document y elimina la clase .submenu-active cuando sucede un clic dentro del documento, pero afuera del área del menú.

Si eliges Hover

Si eliges hover, necesitarás detectar el tamaño de la ventana gráfica con Javascript y añadir una declaración if adicional al event listener para verificar si la anchura de la ventana gráfica es más pequeña que el punto de quiebre de la media query. Puedes usar la propiedad clientWidth del objeto document para detectar la anchura de la ventana gráfica (excluyendo cualquier barra de desplazamiento).

Así que, en el código de arriba, la iteración del event listener que llama a la función personalizada toggleItem() cambiará de la siguiente manera:

if (document.documentElement.clientWidth < 960) {
  for (let item of items) {
      if (item.querySelector(".submenu")) {
        item.addEventListener("click", toggleItem, false);
      }     
  }
}

En el CSS, necesitarás añadir las reglas responsables del diseño del submenú en las computadoras de escritorio a la pseudoclase :hover.

5. Usar la etiqueta <a> sin el atributo href para elementos padre del menú que están vacíos

Problema

Muchas veces, los elementos padre del menú solo sirven para abrir y cerrar el submenú que tienen, pero no enlazan a ningún lado. Sin embargo, si quieres mantener el esquema HTML consistente y la hoja de estilos CSS sencilla, necesitarás añadir también la etiqueta ancla <a href="#"> a estos elementos de menú "vacíos".

Sin embargo, en ese caso, cuando el usuario hace clic en el elemento padre del menú para abrir o cerrar el submenú, la página se recargará y subirá hasta la parte superior en los dispositivos móviles. Esto es particularmente incorrecto si tienes un menú largo.

Solución

Una solución frecuente a este problema es añadir el valor "javascript: void(0);" al atributo href. No obstante, esto se considera una mala práctica, pues usa una pseudo URL que regresa undefined como valor que puede resultar en diferentes errores y comportamiento inesperado.

La manera más fácil de manejar este problema es usar la etiqueta <a> sin un atributo href para estos elementos del menú que no tienen un submenú, que es una solución válida, pues href no se requiere como atributo. De acuerdo a la documentación de W3C:

"El atributo href en los elementos a y area no se requiere; cuando esos elementos no tienen atributos href no crean hipervínculos."

Sin embargo, hay dos problemas con etiquetas <a> vacías:

1. No son accesibles desde el teclado, pues se omiten del orden de tabulación por defecto. Puedes resolver esto añadiendo el atributo tabindex="0" a cada etiqueta <a> que no tenga un atributo href.
2. Aún si elementos <a> vacíos se incluyen en el orden de tabulación, los usuarios no pueden abrir/cerrar el submenú asociado pulsando Intro en su teclado. Esto se puede resolver creando un event listener para el evento keypress.

Así que, así es cómo se estructurará el HTML:

<ul class="menu">
    <li class="item"><a href="home.html">Home</a></li>
    <li class="item"><a href="about.html">About</a></li>
    <li class="item has-submenu">
        <a tabindex="0">Services</a>
        <ul class="submenu">
            <li class="subitem"><a href="service1.html">Service 1</a></li>
            <li class="subitem"><a href="service2.html">Service 2</a></li>
            <li class="subitem"><a href="service3.html">Service 3</a></li>
        </ul>
    </li>
    <li class="item has-submenu">
        <a tabindex="0">Plans</a>
        <ul class="submenu">
            <li class="subitem"><a href="plan1.html">Plan 1</a></li>
            <li class="subitem"><a href="plan2.html">Plan 2</a></li>
            <li class="subitem"><a href="plan3.html">Plan 3</a></li>
        </ul>
    </li>
    <li class="item">li><a href="blog.html">Blog</a></li>
    <li class="item"><a href="contact.html">Contact</a></li>
</ul>

Para el event listener, puedes usar la misma función personalizada toggleItem() que creamos para abrir/cerrar el submenú. Solo tienes que añadir un event listener keypress a la iteración de arriba for...of de la siguiente manera:

for (let item of items) {
    if ( item.querySelector(".submenu")) {
      item.addEventListener("click", toggleItem, false);
      item.addEventListener("keypress", toggleItem, false);
    }    
}

6. Hacer íconos disponibles sin conexión

Problema

Si usas bibliotecas de fuentes de íconos online como Font Awesome para añadir íconos a los submenús desplegables, como la frecuentemente utilizada flecha hacia abajo, los íconos desaparecerán cuando se acceda al sitio web o la aplicación desde un dispositivo sin conexión. Nota que la disponibilidad sin conexión también es un problema de accesibilidad.

Solución

La solución es relativamente fácil para este problema. En lugar de cargar bibliotecas de íconos de un CDN, también puedes cargarlas de manera local. Por ejemplo, así es como puedes albergar la FontAwesome tú mismo. Si solo cargas las partes de las bibliotecas que usas en tu sitio, podrías incluso disminuir la carga de la página, aunque también esto depende de cómo está estructurada la biblioteca particular de íconos.

¡Eso es todo respecto a las mejores prácticas de menú desplegable responsivo!

Elaborar un submenú desplegable responsivo aparentemente es fácil, sin embargo, hay muchos detalles a los que necesitas prestar atención. Debe funcionar en diferentes dispositivos, reaccionar adecuadamente a diferentes eventos, ser accesible a usuarios de teclados, estar disponible sin conexión y más.

Si piensas en los casos de uso en los que los usuarios van a acceder típicamente a tu sitio web o aplicación, será más fácil decidir cómo abordar todos los problemas que puedan surgir cuando traten de utilizar tu submenú.

¿Sabes de algunas otras prácticas que no mencionamos? ¡Déjanos saberlas!

Bifurca esto: Solución de menú desplegable responsivo

Consulta mi menú desplegable responsivo en CodePen, que usa todas las mejores prácticas que hemos cubierto en esta guía. ¡Bifúrcalo y cámbialo para adaptarlo a tus propios proyectos!

Aprende más de diseño de navegación en Tuts+

Tenemos muchos más tutoriales sobre diseño de navegación en Tuts+, ¡Adéntrate y aprende!

• Flexbox
  Cómo elaborar una navegación franjeada con Flexbox
  George Martsoukos
• Bootstrap 4
  Cómo hacer que funcione en estado hover la barra de navegación desplegable de Bootstrap
  George Martsoukos
• Diseño de navegación
  Cómo elaborar un menú fuera del lienzo con CSS y un toque de JavaScript
  George Martsoukos
• Experiencia de usuario
  Los 3 principios para una sólida experiencia de usuario a través de la navegación
  Joel