01 Introducción
La aparición de dispositivos cada vez más pequeños con acceso a internet ha traido consigo la necesidad de adaptar las Webs, utilizando el código que en los últimos tiempos ha surgido para cubrir esta necesidad. Estoy hablando de HTML5, CSS3 y, como no, del siempre útil del lado del cliente JavaScript. He resumido los pasos, pero abajo tienes el videotutorial que me ha servido de guÃa.
02 Pasos para hacer la web adaptable ( responsive design )
HTML
Lo primero es colocar en la cabecera html (head) la etiqueta de nombre «viewport«, (todo el dódigo está abajo), que permitirá definir la «ventana» correcta, dependiendo del dispositivo. También habrá que agregar el código de la capa que contendrá un menú alternativo para resoluciones pequeñas, se puede colocar justo antes de la capa que contiene el menú actual.
Si usamos Font-aweson para el icono, agregar en la cabecera (head) el enlace a la hoja de estilos de Font-aweson. Previamente se deben haber descargado y situado estos ficheros en la web.
CSS
Incluir las Media Queries en la hoja de estilos, con las modificaciones necesarias. Lo que intentamos conseguir es lo siguiente: cuando un dispositivo tenga una resolución inferior a 500 pixeles , por ejemplo, se ocultará o desplazará el menú actual y se mostrará la nueva capa, mucho más simple, que incluye el texto e iconos identificativos. Al pulsar sobre el icono, aparecerán todos los elementos del menú que tenÃamos previamente, pero adaptados a las nuevas medidas. Esto lo conseguimos con Javascript, especÃficamente con su librerÃa jquery.
JQuery
Agregar el código javascrip necesario para cargar la biblioteca Jquery y el archivo menu_responsive.js, con las funciones que permitirán alternar entre menús. Este código se coloca justo antes del cierre de la equiqueta html body.
03 Conclusión
A continuación tienes el código para un ejemplo sencillo de Menú adaptable, pero es sólo una referencia que deberás sustituir según tus propias necesidades. Por ejemplo, en el caso de este blog, como todos los enlaces eatán dentro de la columna derecha, la he considerado como la capa de menú.
Recuerda que las etiquetas de los iconos también deben llevar sus propias clases según las intrucciones que encontrarás en la página de Font Awesome.
Fuentes / Recursos
Font aweson > | videotutorial > | videotutorial (inglés)> | Media queries | CSS clip Property (para recortar imágenes) |
Ver Código (+/-)
HTML
Menu adaptable (responsive)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at sapien tempor, placerat augue sit amet, luctus odio. Morbi tempor sem quis arcu lacinia, sit amet finibus magna venenatis. Nam ac sem et sem vulputate semper. Curabitur justo tellus, pretium at consequat vel, fermentum in arcu. Integer sit amet mi in turpis maximus egestas. Donec ornare pharetra ultrices. Cras tristique non nunc eget condimentum. Ut neque orci, elementum id mattis non, pellentesque quis lectus. Aliquam at risus metus. Mauris eleifend nunc non tellus blandit luctus. Phasellus consectetur rutrum dolor, non interdum arcu vulputate non. Donec interdum sagittis vestibulum. Proin facilisis porta diam, in condimentum risus maximus a. Phasellus lorem dolor, lacinia sit amet sagittis in, commodo in urna.
CSS
/* estilos.css */
* {
margin:0;
padding:0;
}
body {
backgrond:#fffffa;
}
p {
margin-bottom:1em;
}
section {
width:90%;
min-width:320px;
margin:0 auto;
padding-top:40px;
}
header {
width:100%;
}
header nav {
left:-100%;
width:90%;
max-width:1000px;
margin:20px auto;
background:#024956;
overflow:hidden;
}
.menu_bar {
display:none;
}
ul {
overflow:hidden;
}
ul li {
list-style:none;
float:left;
overflow:hidden;
}
ul li a {
font:Arial, Helvetica, sans-serif;
font-size:18px;
color:#CCCCFF;
text-decoration:none;
padding:20px;
display:block;
}
ul li a:hover {
background: #037e8c;
}
ul li a i {
padding-right:7px;
}
@media screen and (max-width:720px) {
header nav {
width:80%;
height:100%;
margin: 65px 0 0;
position:fixed;
}
header nav li {
display:block;
float:none;
border-bottom:1px solid rgba(255,255,255, .3);
}
.menu_bar {
display:block;
position:fixed;
width:100%;
background:#037e8c;
}
.menu_bar .btn_menu {
display:block;
padding:20px;
background: #037e8c;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
text-transform: uppercase;
font-family:Arial, Helvetica, sans-serif;
font-size:22px;
box-sizing:border-box;
letter-spacing: 0.5em;
}
.menu_bar .btn_menu i {
float: right;
font-size:32px;
}
section {
padding-top: 75px; /*Para que el texto no quede oculto tras fijar el menú*/
}
}
JQuery
// menu_responsive.js
$(document).ready(main);
var contador = 1 ;
function main(){
$('.menu_bar').click(function(){
//$('nav').toggle(); opción simple, sin variable contador
if(contador == 1){
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}
});
}