ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

8 recursos para añadir un menú de navegación responsive

5 marzo, 2014 por Pedro Mendez 6 comentarios

Hay muchas técnicas para implementar menús de navegación responsive en tu sitio. Una de las opciones puede ser construir el menú desde cero, donde hay muchos tutoriales en la web para aprender como hacerlo.

Pero algunos de nosotros nos puede interesar tener la tarea hecha lo más rápida y sencilla posible. En este caso en particular podemos usar las fuentes de código libre.

En este artículo voy a hablar de algunos de estos excelentes proyectos de código abierto para la creación de menús de navegación sensibles. Hay muchas opciones por en la red, pero para no abusar de un contenido demasiado largo vamos a ver estos 8.

Al final del artículo, encontraremos un resumen en una tabla que tiene enlaces a los sitios oficiales, demos, guías de uso, y el repositorio oficial de código abierto para cada proyecto que vamos a ver.

1. Responsive Nav

esponsive_nav

Este es un ligero sistema de menús de navegación responsive, menos de 1 KB cuando esta optimizado. Responsive Nav no tiene dependencias externas, lo que significa que no es necesario incluir una biblioteca JS como jQuery para que funcione.

2. Bootstrap Navs and Navbar

bootstrap_navs

Bootstrap tiene dos componentes para la construcción de menús sensibles. Se llaman Navs and Navbar . Si necesitas un menú responsive, debes personalizar el constructor Bootstrap para incluir sólo Navs y/o archivos relacionados con Navbar.

3. menu-aim

query menu aim

Este plugin jQuery permite hacer menús desplegables responsive mega-dropdown como el modelo de los menús rápidos y sensibles de Amazon.com. Esto es ideal para sitios con mucho contenido. Lee acerca de la génesis de este plugin en este artículo.

4. Sidr

sidr

Sidr es un plugin jQuery para crear esos menús verticales deslizables de cajones que suelen aparecer en los sitios web responsive y aplicaciones móviles, como por ejemplo en Facebook.

5. FlexNav

flexnav

FlexNav fue creado solo para móviles en primera instancia. Tiene buena compatibilidad con exploradores: Por ejemplo es compatible con Internet Explorer 7. FlexNav depende de jQuery.

6. TinyNav.js

tinynav

Si simplemente deseas cambiar el HTML que ya posees en tu menu a responsive utiliza este complemento para menús dropdown desplegables de HTML para mostrar un formato como en los dispositivos móviles, echa un vistazo a la primera versión de Responsive Nav (el primero que vimos) llamado TinyNav.js.

También hay una extension jQuery-independiente de TinyNav.js llamada SelectNav.js .

7. Pushy

pushy

Pushy permite construir un fácil menú responsive móvil de cajón deslizante. Requiere jQuery y Modernizr para soportar los navegadores antiguos como Internet Explorer 7.

8. SlickNav

slicknav

SlickNav es un sistema de navegación de menú responsive robusto que tiene un montón de opciones. Es adecuado para sitios y aplicaciones con muchos enlaces y subcategorías. La filosofía de desarrollo también hace hincapié en la accesibilidad web. SlickNav es ARIA-compliant.

Resumen

SitioDemoGuía de usoRepositorioLicencia
Responsive NavDemoResponsive Nav usage guíaGitHubMIT
Boostrap NavsEjemplosBoostrap Navs docsGitHubMIT
menu-aimDemomenu-aim guía de usoGitHubMIT
SidrDemoSidr «Get Started» guíaGitHubMIT
FlexNavDemoFlexNav guía de usoGitHubSin licencia
TinyNav.jsDemoTinyNav.js guía de usoGitHubMIT
PushyDemoPushy guía de usoGitHubMIT
SlickNavDemoSlickNav guía de usoGitHubMIT

..Entradas Relacionadas

  • Como hacer que los mapas de Google tengan un diseño responsive
  • Como Incluir Diferentes Menús en Distintas Páginas de WordPress
  • 3 razones por las que el diseño web responsive es la mejor opción para una estrategia SEO móvil
  • Como crear dos columnas responsive en Contact Form 7
  • 30 Themes Wordpress Responsive Gratis listos para Descargar

Publicado en: Diseño Etiquetado como: menus, responsive

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Comentarios

  1. IVAN dice

    15 septiembre, 2014 a las 9:19 AM

    Buen artículo. Voy a probar en nuestra web uno de ellos a ver que tal funciona. Muchas gracias.

    Responder
    • Pedro Mendez dice

      17 septiembre, 2014 a las 10:27 AM

      Gracias a ti Ivan. Ya nos cuentas como a ido. Saludos!

      Responder
  2. detectives dice

    3 octubre, 2015 a las 4:15 PM

    gracias por su ayuda me sirvió de mucho

    Responder
  3. Nela Conde dice

    7 abril, 2016 a las 11:34 PM

    Gracias por esta información.

    Quisiera saber si puedes ayudarme en lo siguiente:

    Crear un menu desplegable desde una imagen (el logo). Es decir, que cuando una persona pase su raton encima del logo, aparezca el menu, y que este menu este hecho con iconos. (en wordpress).

    Gracias.

    Responder
  4. Pilar dice

    29 agosto, 2016 a las 1:52 PM

    Muchas gracias!! Por tan buen aporte

    Responder
    • Pedro Mendez dice

      30 agosto, 2016 a las 11:09 AM

      A ti Pilar por comentar 😉

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (48)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (13)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (511)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)