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ú.
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.
<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>
<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:
/* 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.
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.
@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ú.
$(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
Con el paso de los años, CSS se está haciendo cada vez más potente y… Leer más
Al igual que un artista mejora su técnica con la práctica constante, un programador aprende… Leer más
WordPress es, probablemente, el mayor CMS para la creación de páginas web en el mundo.… Leer más
Guste más o menos, Wordpress está detrás de un alto porcentaje de las webs activas… Leer más
Hoy, la gente de Xataka ha publicado un artículo muy interesante hablando de Estonia. Parece… Leer más
Aunque todos lo conocemos, seguro que hay algún despistado al que lo de Google reCAPTCHA… Leer más
Ver Comentarios
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