Menú Responsive con Plugin Responsive-Nav.js

Hay varias formas de crear menús de navegación con función responsive es decir, que responda con todos los dispositivos donde se pueda visualizar el sitio. Pero el problema es que muchas de esas formas no son totalmente compatibles con algunos navegadores si se usa CSS3 para hacer esta tarea.

Gracias a JavaScript podemos hacer que este tipo de trabajos de efectos y animaciones sean mucho mas compatibles con los navegadores y así dar el soporte necesario a estos.

En este tutorial veremos como hacer una barra de navegación totalmente responsive utilizando el plugin de JavaScript Responsive Nav. Este plugin es de código abierto y lo podemos usar en cualquier proyecto, viene con su hoja de estilos para poder personalizarlo y es totalmente dependiente de otras librerías de JavaScript como por ejemplo jQuery.

responsive-menu-tutorial

El HTML

En el HTML solo necesitaremos crear una lista para emplear el menú y darle un identificador para poder seleccionarla por medio del script que es requerido por parte del plugin.

También vinculamos el plugin Responsive Nav y lo vinculamos al documento, este lo podemos descargar desde su pagina oficial o directamente en Github, podemos descargar el archivo .js solamente o si quieres puedes descargar todo el archivo .zip, para este tutorial utilizare solo el archivo responsive-nav.min.js.

En la imagen que esta a continuación te explico lo que hicimos en el código HTML anterior.

responsive-menu-codigo-html

El CSS

Primero al body aplicamos un fondo y familia de tipografía al documento y colocamos márgenes y padding en 0, en img hacemos que las imágenes siempre tengan un máximo de ancho de 100% y el contenido damos color de fondo padding y centramos el contenido que ocupa el 80% del dispositivo de salida.

En los CSS anteriores creamos los estilos básicos de la barra de navegación, creamos calor del fondo del menú, hacemos que todos los ítems estén al 100% de ancho damos colores a los enlaces y también colocamos un fondo en su estado hover, en fin son los estilos básicos de un menú.

En el código anterior asociamos el #nav a ciertas clases que trae el repositorio Nav Responsive y aplicamos unas clases que se mostrara cuando este en funcionamiento Ejemplo: #nav-toggle, estos estilos se aplicaran a la tipografía u imagen que se mostrara cuando este menú este en estado responsive y se muestre en dispositivos.

responsive-menu-tutorial-2

Este simbolo lo podemos cambiar en la libreria responsive-nav.js que descargamos, solo buscamos el siguiente label.

img-responsive-menu-tutorial-responsive-nav

podemos colocar un caracter Unicode o simplemente agregar un texto. y esto remplazara las tres lineas verticales.

Por ultimo aplicamos unos estilos dentro de la propiedad Media Queries  de CCS3 que se aplicaran en dispositivos con resolución mínima a 640px. Son estilos que cambian un poco la apariencia del menú en los dispositivos de mayor resolución.

Y esto es todo, ya tenemos un elegante Menú Responsive que podemos utilizar en cualquier proyecto confiando que se mostrara y funcionara en cualquier dispositivo.

Aquí puedes ver su funcionamiento y descargar los archivos de este tutorial.

Nos vemos en otro Tutosytips.!!

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

2 Respuestas

  1. ruben dice:

    Gracias por el tuto amigo, Fácil, entendible y util.

  1. febrero 5, 2014

    Gracias por el tuto amigo, Fácil, entendible y util.