Comunidad de diseño web y desarrollo en internet

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

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

Este sábado el más importante inversionista de Silicon Valley y presidente de Y Combinator dará una clase en vivo en Platzi. Unete ya mismo.

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