23 noviembre 2022
BABEL - Corporativo, UX Avanzado
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:
Pasos para implementar en el HTML:
¡Espero que os sea útil!
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!
Otros artículos destacados
¡Recibido!
Gracias por rellenar el formulario. Se han enviado los datos correctamente.