Hacer menu «Responsive»

por | Feb 2, 2018 | HTML | 4 Comentarios

menu-responsive

Para crear un sitio web que sea visualizado en todos los dispositivos móviles es necesario hacer un menú «Responsive». Para hacer este menú necesitaremos 3 archivos, uno sera el documento HTML que contendría la estructura de los elementos y la información del contenido, ademas el archivo de estilos CSS con la información de diseño y un archivo JAVASCRIPT que apoyara la transición del menú en los diferentes dispositivos. (Ver Ejemplo: Hacer menú responsive)

Archivo HTML – Estructura de menú responsive

Debemos crear el documento HTML con la estructura del menú, en el agregamos también alguna información de contenido para apoyar la organización de todos los elementos del sitio web. Añadimos las siguientes lineas de código al documento HTML que nombraremos index.html.

<!doctype html>
<html lang="es">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Responsive Sliding Navigation Demo</title>
  <link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" language="javascript" charset="utf-8" src="menu.js"></script>
</head>
 
<body>
	<div id="wrapper">
		<header id="topnav">
			<nav>
				<ul>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
					<li><a href="#">Item 4</a></li>
				</ul>
			</nav>
			<a href="#" id="navbtn">Nav Menu</a>        
			<img src="images/logo.png">
		</header>
 
      <div id="pagebody">
        <h1>Hacer Menu Responsive</h1>
        <p>Ver articulo en <a href="https://internetedadinero.com/">InternetedaDinero.com</a></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor volutpat neque, non ullamcorper ante pulvinar vel. Nullam pretium dui a felis facilisis pellentesque. Maecenas egestas laoreet ligula vel placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla nec metus quam. Nulla at lectus metus. Donec non dolor erat. Vestibulum vitae lorem id nibh facilisis vulputate. Aliquam venenatis, leo et semper posuere, urna quam sagittis arcu, quis convallis turpis nunc in erat.</p>
 
        <p>Nam vulputate purus vel sapien tempus mollis. Pellentesque semper dui at leo laoreet eu vulputate urna sodales. Suspendisse sed eros dictum mauris placerat vulputate. Sed fringilla consequat felis, vitae egestas magna eleifend ac. Sed quis ligula non tellus mattis ultrices. Suspendisse ornare ultricies ultricies.</p>
      </div>
	</div>
</body>
</html>

Archivo CSS – Estilos de menú responsive

Desarrollamos ahora el archivo CSS con los estilos del menú, agregamos algunos estilos adicionales para el diseño del contenido y sitio web. Añadimos las siguientes lineas de código al archivo CSS que nombraremos styles.css.

body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, ol, ul, li, footer, header, menu, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { 
  height: 100%; 
}
body { 
  background: #fff;
  font-family: 'open sans';
  font-size: 62.5%; 
  line-height: 1; 
  color: #343434;
  padding-bottom: 55px;
}
ol, ul { 
  list-style: none; 
}
img { 
  border: 0; 
  max-width: 100%; 
}
a { 
  color: #6992c0; 
}
a:hover { 
  color: #77a4dc; 
}
h1 { 
  font-size: 2.9em; 
  line-height: 1.4em; 
  color: #333; 
  font-weight: bold;
}
p { 
  font-size: 1.6em; 
  line-height: 1.7em; 
  color: #777; 
  margin-bottom: 15px; 
}
 
 
#wrapper {
  display: block;
  max-width: 900px;
  min-width: 300px;
  margin: 0 auto;
  background:#fafafa;
}
 
#pagebody {
  padding: 15px 25px;
}
 
/* Barra de navegacinón */
 
#topnav img {
  width:200px;
  margin:5px;
}
#topnav {
  display: block;
  width: 100%;
  position: relative;
  background:#333;
}
#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: 60px;
  color: #fafafa;
  padding: 0 20px;
}
#topnav nav ul li a:hover {
  color: #333;
  background: #fafafa;
}
 
/* Estilos Responsive */
 
@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;
}
}

Archivo JS – Transiciones de menú responsive

Por ultimo debemos crear el archivo JAVASCRIPT que apoyara las transiciones del menú en para la visualización en diferentes dispositivos. Debemos añadir las siguientes lineas de codigo al archivo JS el cual nombraremos menu.js.

$(function(){
  var nb = $('#navbtn');
  var n = $('#topnav nav');
  //creamos las variables
  $(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');
    }
  }); 
 
  //$('#topnav nav a,#topnav h1 a,#btmnav nav a').on('click', function(e){
    //e.preventDefault(); // detener todos
  //});
 
  $('#navbtn').on('click', function(e){
    e.preventDefault();
    $("#topnav nav").slideToggle(350);
  });
 
});

Conclusiones

Podremos visualizar el formato de nuestro menú responsive escalando el navegador, podremos observar que su comportamiento es el de adaptarse al tamaño de la pantalla de la cual se visualiza. Puedes agregar mas elementos a los enlaces del menú como un enlace a un formulario de contacto (ver articulo: Crear formulario de contacto) o intentar la creación de un sitio web completo (Ver articulo: Web responsive HTML5/CSS3). No olvides comentar si tienes alguna duda y te agradezco mucho que tomaras el tiempo de leer, si te gustó el articulo te agradezco lo compartas.

Ver Ejemplo: Hacer menú responsive
Descargar Archivos: Archivos menú responsive

4 Comentarios

    • Michel Haddad
      Michel Haddad el 20 julio, 2018 a las 7:36 pm

      Muchas gracias por tu comentario, es un gusto poder ayudar. Un saludo

      Responder
  2. Diego Rojas
    Diego Rojas el 1 abril, 2018 a las 2:18 pm

    Excelente artículo Michel, bastante completo y preciso, recién aprendo de CSS y HTML y este artículo me ha vendio bastante bien.

    Responder
    • Michel Haddad
      Michel Haddad el 1 abril, 2018 a las 3:28 pm

      Muchas gracias por tu comentario Diego, es un placer poder ayudar, un saludo

      Responder

Enviar comentario

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

 
Share This