Hacer menu de navegación responsive

Menu Responsive Web Design: En estos últimos tiempos han aparecido diferentes tipos de resoluciones como son las tables, ipads, smartphones y diversas resoluciones de pantalla para desktop. nosotroscomo desarrolladores, diseñadores y programadores de sitios web no podemos obviar. debemos estar a la vanguardia en cuanto a la tecnologías que van apareciendo en el camino como es el DiseñoSensible o Responsive Web Design.

Uno de los “problemas” mas comunes es la creación de un sitio sensible es la creación del menu, es por eso que decidí hacer un pequeño tutorial de como crear un menuresponsivo de una manera muy sencilla, de echo que tengo por entendido que ya dominar el html, css y un tanto de jquery, pero si no lo dominas puedes usar el que brindo que es la base del menu sensible, comencemos!

**********************************


Responsive Sliding Navigation Demo



**********************************

Empezamos haciendo la llamaba a la hoja de estilos, jquery yel scrip que haremos mas adelante llamado “menu.js”.

***************************
$(function(){
var nb = $('#navbtn');
var n = $('#topnav nav');
//Creamos las variables para nuestro menu$(window).on('resize', function(){

if($(this).width() < 570 && n.hasClass('keep-nav-closed')) {
// si el menú de navegación y el botón de navegación son visibles.
//volver a ocultar el menú denavegación y retire la clase oculta.
$('#topnav nav').hide().removeAttr('class'); } if(nb.is(':hidden') && n.is(':hidden') && $(window).width() > 569) {
// si el menú de navegación y el botón denavegación son tanto oculta,
//ejecuta cambios cuando la resolución de la pantalla es de 569px
$('#topnav nav').show().addClass('keep-nav-closed');
}
});

$('#topnav nav a,#topnav h1a,#btmnav nav a').on('click', function(e){
e.preventDefault(); // detener todos
});

$('#navbtn').on('click', function(e){
e.preventDefault();
$("#topnav nav").slideToggle(350);
});

});...