Tutorial: Crear Menu Responsive Web Design

septiembre 30, 2013

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. nosotros como 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ño Sensible 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 menu responsivo 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!

<!doctype html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
Responsive Sliding Navigation Demo
<link href="styles.css" rel="stylesheet" media="all" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script charset="utf-8" type="text/javascript" src="menu.js" language="javascript"></script>

Empezamos haciendo la llamaba a la hoja de estilos, jquery y el 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ú de navegació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 de navegación son tanto oculta,
 //ejecuta cambios cuando la resolución de la pantalla es de 569px
 $('#topnav nav').show().addClass('keep-nav-closed');
 }
 });

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

});

Empezamos el scrip que nos ayudara a la creación de nuestro menu sensible, recuerden que a este scrip hemos echo llamada en nuestro «head» con el nombre de «menu.js» como lo indico al principio de este tutorial.
Comenzamos creando un par de variables para el menu: «#navbtn» y «#topnav nav». en el código hay comentarios que les ayudará a entender un poco mas.


#wrapper {
  display: block;
  max-width: 900px;
  min-width: 300px;
  margin: 0 auto;
  background:#CCC;
}

#pagebody {
  padding: 15px 25px;
}

/* navigation bar */
#topnav img{
width:200px;
height:50px;
margin-top:4px;
}

#topnav {
  display: block;
  width: 100%;
  height:70px;
  position: relative;
  background:#272822;
}

#topnav #navbtn {
  display: none;
  float: right;
  margin-right:10px;
  margin-top:10px;
  width: 30px;
  height: 35px;
  background: url('images/menu.png') center no-repeat;
  text-indent: -99999px;
  overflow: hidden;
}

#topnav nav {
  position: absolute;
  top: 0;
  right: -10px;
}

#topnav nav ul {
  list-style: none;
}
#topnav nav ul li {
  display: block;
  float: left;
  font-size: 1.4em;
  margin-right: 4px;
}

#topnav nav ul li a {
  display: block;
  text-decoration: none;
  line-height: 70px;
  color: #ccc;
  padding: 0 25px;

}
#topnav nav ul li a:hover {
  color: #272822;
  background: #ccc;
}
/* responsive styles */
@media screen and (max-width: 560px) {
  h2 { font-size: 2.2em; }
  p { font-size: 1.45em; line-height: 1.55em; }
  #topnav { height: auto; }
  #topnav nav {
    display: none;
    position: static;
    width: 100%;
    top: auto;
    right: auto;
  }
  #topnav nav ul li { float: none; margin: 0; }
  #topnav nav ul li a {
    display: block;
    width: 100%;
    line-height: 1.4em;
    border: 0;
    padding: 6px 9px;
    background: #272822;
  }
  #topnav nav ul li a:hover {
    background: #ccc;
  }

  #topnav #navbtn {
    display: block;
  }
}

Ahora solo nos queda darle los estilos correspondiente a nuestro menu, recuerden que son muy importartes agregarle las media queries necesarias poniendo las resoluciones que necesites,  tú puedes agregarles los que te parezca mas conveniente, este es solo un ejemplo básico. pueden ver la demo y por supuesto dejo la descarga de los archivos originales(contraseña: antocas.com) para puedan analizar con cautela el código.

Relacionados