Hacer menu de navegación responsive
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);
});
});...
Regístrate para leer el documento completo.