Crear un menú responsive para tu nuevo diseño web adaptativo es uno de los pasos más importantes que debes tener en cuenta, pues el menú es el centro de la navegación de tu web y los diseños más habituales no servirán y serán dificiles de adaptar.
Si accedes a alguna web con diseño responsive desde tu móvil, o haces pequeño el tamaño del navegador de tu ordenador, verás que el menú de navegación desaparece dejando paso a un botón con un desplegable en el cual se mostrarán los enlaces a todas las secciones de la página. ¿Y cómo creamos este tipo de menú? Fácil. CSS3 y jQuery.
Vamos a dividir el proceso en tres partes: el código de la hoja de estilos, el código jQuery y el código HTML de nuestro menú.
Creando el menú responsive
Lo primero de todo es tener nuestro código HTML preparado para lo que vendrá después. En este caso tenemos el menú dentro de una pestaña <ul>, que a su vez se encuentra contenida dentro de la pestaña <nav>, además de un enlace (etiqueta <a>) con un id que será lo que se muestre en dispositivos más pequeños.
|
1 2 3 4 5 6 7 8 9 10 |
<nav> <ul> <li><a href="#">Sección 1</a></li> <li><a href="#">Sección 2</a></li> <li><a href="#">Sección 3</a></li> <li><a href="#">Sección 4</a></li> <li><a href="#">Sección 5</a></li> </ul> <a id="pull" href="#">Menu</a> </nav> |
Al ser un diseño responsive, no podemos olvidar la etiqueta meta viewport en nuestro <head>
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> |
Lo siguiente será darle el aspecto deseado a nuestro menú desde la hoja de estilos.
Primero, añadimos un pequeño «hack» contra los float y ocultamos el enlace que sólo se mostrará cuando el tamaño de pantalla sea más pequeño:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* Clearfix */ .clear:before, .clear:after { content: " "; display: table; } .clear:after { clear: both; } .clear { *zoom: 1; } a#pull { display: none; } |
Después, damos a nuestro menú el estilo deseado para la versión «ordenador». Hay que tener en cuenta que se trata de un menú para responsive design, por lo tanto tendremos que andar con cuidado maquetando.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
nav { height: 40px; width: 100%; background: #666; position: relative; border-bottom: solid 1px #DDD; } 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; line-height: 40px; } nav li a { border-right: 1px solid #576979; } nav li:last-child a { border-right: 0; } nav a:hover, nav a:active { background-color: #333; } |
Y una vez que lo tenemos para versión PC, tenemos que crear la versión «smartphone». Para ello, hacemos uso de los media queries de CSS3 y su propiedad max-width. Cuando el ancho de la pantalla sea menor de 500px, será cuando entre en funcionamiento este estilo en vez de el escrito anteriormente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
@media only screen and (max-width : 500px) { nav { border-bottom: 0; height: auto; } nav ul { display: none; height: auto; width: 100%; } nav li { width: 50%; float: left; position: relative; } nav a { text-align: left; width: 100%; text-indent: 25px; } nav a#pull { display: block; background-color: #666; 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; } } |
Por último, el jQuery que hará que todo esto funcione. Utilizaremos slideToggle(); para que el menú responsive se pliegue y despliegue y controlaremos el tamaño de la página y cuando se redimensiona para ocultar el menú principal y mostrar el botón Menú.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(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'); } }); |
Y esto es todo. Como veis, pocas lineas de código y muy sencillas que permiten tener un menú fantástico y completamente acorde al diseño de nuestra web responsive.
Si tenéis cualquier duda, podéis dejarnos un comentario en este mismo post o en nuestro correo info@kidoestudio.com
ACTUALIZACIÓN:
Vamos a añadir un ejemplo para descargar visto los problemas que teníais varios de vosotros a la hora de implementar el código
Hola estoy intentanto aplicar el tutorial a un web ya existente, sin embargo me aparece un error de sintaxis en esta línea del jquery: var pull = $(‘#pull’);
mi menú principal ya tiene un id, no sé si será esa la razón del error…
Inicio
Nuestros beneficios
Sobre nosotros
Contáctenos
Menu
Hola Óscar.
He corregido el código, puesto que las comillas del jquery eran incorrectas.
¡Prueba ahora y nos cuentas!
Hola, el menu salio muy bien pero cuando presiono menu no me desplega hacia abajo. Que hago alli?
Como Adapto esto al menu de mi web http://www.for-up.96.lt
Hola Rosalino.
Tu web tiene varios menús, habría que tener claro cual quieres que tenga este funcionamiento, porque probablemente no te merezca la pena aplicar este tutorial a todos.
hola la verdad es que soy estudiante y soy algo inexperto, quería preguntarte lo siguiente: realizo el menú con tu código pero creo que no se donde va el jquery o como lo coloco pues no funciona el desplegable cuando no es para escritorio, gracias por tu colaboración y comprensión.
Hola Eduardo. Ponme tu código y vemos que falla
Hola Jose A. , buscando por la red el problema que tengo he llegado hasta ti, te comento: seria posible hacer responsive la web http://www.caracolmoderno.com siguiendo tu tutorial? En su día cuando se hizo no se pensó en el tema de los móviles pero hoy en dia es fundamental. Agradecería mucho tu ayuda. Un saludo
buenooo ya he metido parte de los codigos , pero no me queda claro que tengo que hacer en la última parte , la del jQuery, no entiendo bien eso de » Utilizaremos slideToggle();»…. espero tu ayuda, mil gracias
Hola Miguel Angel,
hacer la web responsive sería mucho más que seguir este tutorial para cambiar el menú, esto es solo una parte del trabajo que hay que hacer.
Respecto al funcionamiento, ponme por aqui el código que tienes o enviamelo a info@kidoestudio.com y te echo un cable.
De todas formas, vamos a poner para descargar un ejemplo, porque estoy viendo que no este tutorial no nos ha salido muy claro 🙂
buenas
deseo organizar unos códigos php, tengo una pagina realizada en joomla
y quiero cambiarla a un sistema mas rapido
necesito hacer un formulario de incripcion de clientes,
mostrar en el mapa de google unos clientes.
podri escribirme a mi correo para explicarle mejor. y cotizar costos.
muchas gracias
mi email: francisco_vidalp@gmail.com
Hola, para los que quieren adaptar su sitio web a movil les recomiendo visiten http://www.gamnet.net
Esta empresa usa una tecnologia mejor que la responsive para hacer sus sitios moviles!
Suerte, Gabriel
Hola!
tengo el mismo problema que muchos donde se coloca la parte final para q funcione el menú desplegable? lo puse en el css y no va y al ponerlo antes de la etiqueta de cierre del head no va tampoco.
Muchas gracias!!
lo puse en js, ya me va pero cdo se me hace pequeño no se me abre, qué puedo hacer. Muy bien explicado
Hemos añadido el código completo para que podáis descargarlo y utilizarlo sin ningún tipo de error.
qué lástima que no anda!
Baje el archivo ese sí anda, pero cómo puedo agregarle submenú al último ítem? Gracias
Buenos días Jose,
muchas gracias por este tutorial, es exactamente lo que estaba buscando.
Estoy haciendo una web con wordpress y he intentado implementar este menú pero no me funciona correctamente.
¿Podrías indicarme qué debería hacer para corregirlo?
La web es http://www.magiamajara.com y el código lo puedes descargar aquí: https://dl.dropboxusercontent.com/u/6932054/codigo.zip
Mejor te dejo aquí un duplicado de la web para poder seguir desarrollando la otra: http://magiamajara.miwp.eu/
¡Muchísimas gracias!
Que tal estoy desarrollando un sitio web desde Mac al subirla y verla en otra maquina no me aparece centrada me comentaron que metiera el Responsive, no se si me puedas ayudar a modificar o que me des algunos tips.
GRACIAS
Tengo un problema que me trae de cabeza. Yo no se nada de programación pero me estoy intentando diseñar una plantilla con artisteer 4 para exportarla a wordpress y no soy capaz de hacer que en la vista movil el menu se me vea como a vosotros. A mi me sale todo desplegado.
http://www.le2.es aqui teneis el link a mi web
Muchisimas gracias!!! Solo una duda, sera posible que cuando presionas el botón en ves de desplegar hacia arriba, despliegue hacia abajo?
Hola Romina! Sólo tendrías que poner el enlace de «Menu» (el que tiene como id pull) delante del
en vez de después
Hola, gracias por el aporte. La verdad no he podido implementar un responsive dentro del código del menú del proyecto que tengo. Tal vez podrías ayudarme. No sé si tengas algún correo donde pueda enviarte el archivo html y el css para ajustar de igual forma el estilo. Muchas Gracias!
Hola, somos un centro de Yoga en Getafe y tenemos una web casi responsive.
yogagetafe.com
Como el menú no es responsive he descargado vuestro menú y lo he incorparado a la web anterior en
http://www.yogagetafe.com/12programa0.php que es vuestra descarga y luego nuestra web está en 12programa1.php, 12programa2.php, etc.
El menú funciona perfectamente, sin embargo toda la gestión de las fotos ya no es responsive y el contenedor deja de funcionar en los móviles. ¿Nos podéis ayudar?
Gracias
Muchas gracias amigo me salvaste mi cabeza no lo iba a resistir mas XD
hola, no entiendo el «CLEARFIX» …
¿para que sirve? porque he puesto el codigo css en mi style principal y me desalineo todos los float que tenia en mi web 🙁
si puedes darme info sobre eso, y como arreglarlo te lo voy a agradecer :D, muy buen tutorial
saludos desde buenos aires
Genial colega ! Muchas gracias
Me siento frustrada, yaintente todo y no puedo hacer responsive una pagina, me podrias ayudar?
Gracias de antemano….
Hola Teresa. Envíanos más información y detalles a info@kidoestudio.com y vemos como podemos ayudarte.
Hola, ante todo, muy buena la información, pero me causa una duda, pues en la parte que le aplicamos el estilo para nuestro ordenador porque separa (nav a) de (nav li a) cuando se podría poner todo junto, quedando así
nav a{
color: #FFF;
display: inline-block;
width: 100px;
text-align: center;
line-height: 40px;
border-right: 1px solid #576979;
}
Gracias
hola he estado construyendo una web pero el menú quiero me quede en el centro de la web y darle un estilo al contenido de navegación que este como un borde
Hola. Tengo un menú responsive en mi sitio y funciona todo, excepto que resoluciones entre 481 y 768 se queda el menú desplegado. Es decir, que no sale el icono del menú, si no ya desplegado como cuando ya has hecho click sobre el icono.
Supongo que tengo que tocar el query-latest.js, pero no tengo ni idea en donde. ¿Podrías ayudarme? Gracias de antemano.
Muy bueno !
Gracias por compartirlo !!!
oye me interesa tu menú, no tienes algún tutorial para hacerlo como el de esta pagina?, de ante mano gracias 😀
José Antonio, muchas gracias por excelente tutorial, modifiqué un poco el ejemplo y bien me fue, pero al momento de desplegar el «Menú» en forma responsive, no muestra los nombres y queda todo tal cual.
Te dejo el link de prueba http://www.pruebadominio.cl
A ver, si me puedes dar una mano. Millón de gracias de antemano
Muy bueno yo comencé a usar los hyper menú ya en paginas de wordpress, ahora que uso blogger los uso con las nuevas plantillas. Desde que los vi me gustaron mucho por que hace la web más interactiva, pudiendo colocar mucho información, más que un menús normal.
Hola! gracias por el tutorial. Lo he puesto en el index y funciona perfectamente. Sin embargo en la siguiente página no. En el indez el menú esta bajo una imagen y de maravilla, pero en la segunda página el menú esta arriba del todo y al cambiar el tamaño si que hace el efecto de desaparecer y aparecer la palabra Menu clickable, pero no se despliega el menú. ¿Alguna idea de por que puede ocurrir? Muchas gracias!!
Buenos días.
Lo que estamos buscando es un código html que nos sirva para web, blogger, wordpress, app en android, etc. que funcione como el que tienes tú en la barra lateral: Más comentados | Últimos
Es decir, que la info que metamos figure en ese espacio, no sean links a otro sitio.
Muchas gracias.
Gracias por compartir y dejar como descarga el codigo, me asuste cuando vi que no se puesde copiar directamente el codigo. Gracias. Es para la web . http://www.electroservicios.es
Muchas gracias. Impecable!
no hay un puto enlace para ver si el codigo es una mierda o una maravilla 🙁
Excelente menú muchas gracias
hola, estoy introduciendo el codigo del ejemplo en mi web, pero adaptandolo a lo que ya tengo y no funcioona. me podrias ayudar? necesito que el menu desaparezca en pantallas moviles y se despliegue desde el enlace del icono hamburguesa.
Todavia no esta publicada, como puedo pasarte el codigo??