Comunidad de diseño web y desarrollo en internet

Barra de navegación adaptable con Media Queries y JS

¿Por qué desarrollar para móviles?


Con el auge de los smartphones y tablets hoy en día, los sitios no están optimizados para estos dispositivos lo que causa una mala experiencia de usabilidad a los usuarios, por eso es nuestra misión cambiar ese panorama desarrollando para móviles.

En esta ocasión les traigo un pequeño tip para sus desarrollos móviles, un navbar que cambia dependiendo de la resolución de pantalla.

Así se verá en resoluciones mayores a 450px:



Y así en resoluciones menores a 450px:



Estructura HTML5



Código :

<!doctype html>
<html lang="es">
<head>
   <meta charset="utf-8">
   <title>Navbar adaptable</title>
   <link href="css/style.css" rel="stylesheet">
</head>
<body>
   <header>
      <h1>Navbar adaptable</h1>
   </header>
   <nav>
      <a onclick="muestra_oculta('mostrar')"><!-- Al dar click aquí se mostrará u oculltará la lista -->
         <img src="imgs/menu.png">
      </a>
      <ul id="mostrar">
         <li>Inicio</li>
         <li>Blog</li>
         <li>Portafolio</li>
         <li>Contacto</li>
         <li>Redes Sociales</li>
      </ul>
   </nav>
   <script src="js/mostrarOcultar.js"></script>
</body>


Función "mostrarOcultar" Javascript



Código :

function mostrarOcultar(id) {
   if (document.getElementById) {
      var menu = document.getElementById(id);
      menu.style.display = (menu.style.display == 'none') ? 'block' : 'none';
   }
}
window.onload = function(){
   mostrarOcultar('mostrar');
}
// Con esto haremos que al dar click en la imagen "menu.png" muestre u oculte el contenido.


Maquetación CSS3



Código :

@charset ("utf-8");

@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"); /* Open Sans de Google Fonts */

a {
   padding: 8px 0;
}
body {
   font-family: Open Sans, Helvetica, Arial;
   font-size: 14px;
   margin: 0;
}
h1 {
   color: #fff;
   font-size: 18px;
   margin: 0;
   text-align: center;
   text-transform: uppercase;
}
header {
   background: #222;
   padding: 10px 0;
   width: 100%;
}
li {
   color: #fff;
   list-style: none;
   padding: 12px;
}
li:hover {
   background: rgba(0,0,0,.25);
}
nav {
   background: #08c;
   text-align: center;
   width: 100%;
}
ul {
   margin: 0;
   padding: 0;
}

/* Aquí viene la magia */

/* En resoluciones mayores a 450px */
@media screen and (min-width: 450px) {
   a {
      display: none;
   }
   li {
      display: inline-block;
   }
   ul {
      display: block !important;
   }
}

/* En resoluciones menores a 450px */
@media screen and (max-width: 449px){
   a {
      display: block;
   }
   li {
      display: block;
   }
}


Con esto tendríamos nuestro navbar completamente adaptable dependiendo de la resolución de pantalla.

Archivos del tutorial:

Descargar

Demo

El código ha sido adaptado en base a los consejos de @the_fricky comentados en este hilo

Cristalab y Mejorando.la te traen el Curso Profesional de Node.js y Javascript. Online, avanzado, con diploma de certificación y clases en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate