Aunque existen muchas ofertas de menús responsive, os quería compartir este que me ha parecido muy completo, fácil de implementar y que, además, cumple con las pautas de accesibilidad AA, tanto para desktop como para móvil.

El recurso original lo podéis encontrar en http://www.smartmenus.org/ pero en la carpeta de recursos de Babel Creativa podéis encontrar una adaptación simplificada muy fácil de integrar.

Podéis acceder a él en esta ruta:  @RECURSOS\MENUS\Menú responsive accesible

Las características que cumple son:

• Menú basado en listados anidados.
• Toggle en el botón del menú en versión responsive.
• Adaptativo, manteniendo el cumplimiento de las pautas de accesibilidad:
  • WAI-ARIA y roles dinámicos.
  • Foco visible.
  • Se proporciona acceso a toda la funcionalidad mediante el teclado en desktop y móvil.

Pasos para implementar en el HTML:

• Enlace a menu.css 
• Incluir las siguientes clases / id en el <ul> principal:
  <ul id=»main-menu» class=»sm menu collapsed» role=»menubar»>
• Enlaces a los ficheros js<!–Código JS–>
  <script src=»../js/jquery-1.11.3.js» type=»text/javascript»></script>
  <!– SmartMenus jQuery plugin –>
  <script src=»../js/jquery.smartmenus.js» type=»text/javascript»></script>
  <script>
  $(function() {
    $(‘#main-menu’).smartmenus();
  });
  </script>

¡Espero que os sea útil!