MENÚ DESPLEGABLE Y RESPONSIVE

Parece que, con la llegada del 2015, los “vientos de google” han traído la necesidad, más que nunca, de hacer que nuestros sitios sean responsive. Y es que, por si no te habías enterado, el gran titán ha empezado a etiquetar con un “para móvil” a aquellas páginas que ya hayan dado el paso.

 

Pues bien, mientras me planteo hacer un post especial sobre Diseño web responsivo (para más adelante), en este artículo voy a describir cómo crear un menú desplegable y que se adapte a las diferentes resoluciones de pantalla.

A quién no le suena la siguiente imagen?

menu

Corresponde a uno de los diseños más representativos y extendidos que podemos encontrar en la navegación con móvil. Se le conoce como “menú hamburguesa”, y al tocar con el dedo cualquier punto del rectángulo, éste se desplegará y mostrará todo su contenido.

 

Dicho esto, y sin más preámbulos, os describiré a continuación cómo implementar este recurso en vuestros diseños.

 

El código HTML5

Puesto que queremos “fluidificar” nuestro menú, es decir, que sea responsivo, lo primero que tenemos que hacer es introducir la meta-etiqueta viewport dentro de nuestro <head>, que será la encargada de lograrlo:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

También deberemos declarar la librería de jQuery. Por ello, introduciremos el siguiente código, nuevamente dentro del <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Para la construcción del menú, dentro ya del <body>, usamos la etiqueta <nav> para integrar los links de navegación que serán declarados a través de una lista <ul>. Fíjate, que asignamos a ambas etiquetas la clase “clearfix”, atributo que nos servirá después para hacer los ajustes necesarios con el código CSS3.

<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Inicio</a></li>
<li><a href="#">Galería</a></li>
<li><a href="#">Bebida</a></li>
<li><a href="#">Menú</a></li>
<li><a href="#">Eventos</a></li>
<li><a href="#">Contacta</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>

El código jQuery:

Con este sencillo <script> vamos a lograr que el menú se despliegue, cual acordeón, al tocarlo con el dedo en la pantalla de nuestro dispositivo. Recuerda que deberás introducirlo antes de la etiqueta </head>, y que otra opción sería pegarlo en un archivo externo con extensión .js (en este caso, deberás de omitir las etiquetas <script> y </script>:
<script>
$(function() {
var pull                                = $('#pull');
menu                   = $('nav ul');
menuHeight      = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>

El código CSS3

 

Primero empezaremos por definir el código básico y genérico del menú. Lógicamente, podremos personalizarlo a nuestro gusto:

/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

/* Basic Styles */
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 100%;
background: #000;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}

Con esto, obtendríamos algo así:

horizontal

 

 

No obstante, de momento nos encontramos ante un diseño estático que no se adaptará a las diferentes resoluciones de pantalla. Para lograrlo, deberemos de hacer uso de las media queries.

 

Empezaremos por definir los estilos de nuestro menú siempre y cuando no se superen los 600px:

 

/*Estilos de pantalla de hasta 600px*/

@media only screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}

Con esto tenemos que, por debajo de anchos de pantalla de 600px, nuestro menú se mostrará tal cual ilustra la foto:

menu-desplegado-sin

Sigamos definiendo anchos de pantalla inferiores. En esta ocasión, vamos a “dar el salto” y hacer que el menú se contraiga en la barra (primera foto).

 

/* Estilos de pantalla de hasta 480px*/

@media only screen and (max-width: 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #000;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
Así es como quedará el menú para anchos de hasta 480px:

menu-desplegado

Y ya para terminar, el último breakpoint (punto de rotura) en nuetras media queries, lo fijaremos en los archiconocidos 320px (ancho de referencia muy utilizado por determinados Smartphones):

 

/*Smartphones de hasta 320px*/

@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}

Y qué conseguimos con esto? Pues que para pantallas más estrechas, el menú se muestre organizado en una sola columna una vez desplegado. Pero por si no queda claro, veámoslo con una imagen, que vale más que mil palabras:

apilado

Y éste es el concepto de Responsive Web Design que tanto se comenta en estos tiempos, elevado a la enésima potencia.

 

Manuel Córdoba

 

Enlace para bookmark : Enlace permanente.

Deja un comentario

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