Menú de navegación Responsive y Accesible en HTML5 CSS3 y jQuery - Hamburguesa, Horizontal, Multinivel, Submenús, Despegable, Off Canvas

El menú de navegación es sin duda una de las partes más importante de la web, ya que nos proporciona acceso a las secciones y por lo tanto al contenido de nuestra web.

Hoy en día, hacer un menú de navegación no es una tarea fácil.
Tiene que ser responsive, funcionar a la perfección (con eventos touch) en todo tipo de dispositivos y resoluciones y bajo un único marcado HTML.

A lo largo de nuestra experiencia como maquetadores web, nos han pedido hacer todo tipo de menús de navegación responsive, que hemos desarrollado con buenos resultados, sobre todo en webs pequeñas sin muchas secciones. Pero cuando hablamos de portales webs con muchas secciones, la cosa cambia y os aseguramos que puede ser una tarea realmente compleja.

Para que esto no ocurra, hemos recopilado un listado con diferentes soluciones de código abierto que seguro que nos van a ahorrar muchas horas y problemas de desarrollo, sobre todo en menús extensos con muchos elementos.

PUSHY

Si duda es el menú responsive que más nos ha gustado, llevamos bastante tiempo utilizándolo en nuestros proyectos.

Muy ligero, fácil de usar y modificar. Cuenta con soporte multinivel (submenús), es compatible con móviles y navegadores modernos, incluyendo Internet Explorer 7.

Por defecto se trata de un menú off canvas, es decir, que empuja el contenido hacia la izquierda o derecha, aunque con conocimientos de CSS, prácticamente puedes hacer lo que quieras con él.

SLICK NAV

Si lo que queremos es un menú que se preocupe por la accesibilidad, esta es sin duda, la mejor opción, ya que crea un menú compatible con ARIA y accesible a través del teclado, además funciona en Internet Explorer 7.

Muy completo y con muchas opciones de configuración. Muy recomendable para webs y aplicaciones con muchos enlaces y categorías.

SIDR

Inspirado en el menú de Facebook, este plugin de jQuery nos permite implementar todos los menús que queramos en la misma página, por ejemplo en ambos lados de la web.

RESPONSIVE NAV

Pequeño plugin de JavaScript sin dependencias externas  para crear un menú de navegación responsive accesible.

Utiliza eventos touch y transiciones CSS3  para obtener el mejor rendimiento posible. Pensado para accesibilidad, funciona perfectamente en los lectores de pantalla y con el JavaScript deshabilitado.

SMARTMENUS

Plugin de jQuery para crear menús responsive verticales y horizontales que funcionan en cualquier dispositivo.

Lo que más nos ha gustado es que es accesible y su panel de configuración. También destaca por su galería de ejemplos y temas que permite ver rápidamente lo que se puede hacer con este plugin.

JQUERY-MENU-AIM

Inspirado en el antiguo menú de Amazon, este plugin de jQuery crea un menú responsive que dispara un evento cuando el cursor del usuario apunta a los elementos del menú despegable.

Recomendable si tenemos un menú con muchos elementos.

NAVIGATUR

Menú de navegación responsive creado solamente con CSS, válido para versiones de Internet Explorer 9 y superiores.

HORIZONTAL NAV

Plugin de jQuery que crea un menú responsive horizontal cuyos elementos se expanden para ocupar el 100% del ancho del contenedor. Si alguna vez has intentado hacerlo, sabrás que es bastante difícil de hacer, sobre todo si se quiere que sea responsive.

RESPONSIVE-MENU

Plugin de jQuery que en versión móvil convierte el menú de navegación <ul / ol>  en una lista despegable <select>.

MEANMENU

Plugin de jQuery ligero que convierte un menú de navegación estándar en uno compatible para móviles y tablets.

STICKYNAVBAR.JS

Plugin de jQuery que ayuda a anclar el menú de navegación en la parte superior del navegador cuando se hace scroll.


Para terminar, como siempre, os animamos a que pongáis otros menús responsive de código abierto en los comentarios.