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!