Blog  //  Abril 2016  //  Menú Responsive Accesible

Menú Responsive Accesible

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/

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!
Escrito por:
BABEL Creativa
Publicado el 27/04/2016 por BABEL | con 0 comentarios
Comentarios:
Esta publicación no tiene comentarios.
 Security code