Menú responsive para tu sitio web de manera sencilla

Menú responsive para tu sitio web de manera sencilla

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.

Al ser un diseño responsive, no podemos olvidar la etiqueta meta viewport en nuestro <head>

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:

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.

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.

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ú.

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@estudiosurestao.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

Descargar ejemplo

¡Compártelo!

Comentarios (36)

  • Oscar Wong Reply

    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

    27 octubre, 2014 at 5:35 pm
    • Jose A. Vila Reply

      Hola Óscar.
      He corregido el código, puesto que las comillas del jquery eran incorrectas.
      ¡Prueba ahora y nos cuentas!

      28 octubre, 2014 at 8:57 am
      • Jose Moronta Reply

        Hola, el menu salio muy bien pero cuando presiono menu no me desplega hacia abajo. Que hago alli?

        20 agosto, 2016 at 9:23 pm
  • Rosalino Reply

    Como Adapto esto al menu de mi web http://www.for-up.96.lt

    9 noviembre, 2014 at 11:44 am
    • Jose A. Vila Reply

      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.

      11 noviembre, 2014 at 3:53 pm
  • eduardo Reply

    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.

    10 noviembre, 2014 at 5:04 pm
    • Jose A. Vila Reply

      Hola Eduardo. Ponme tu código y vemos que falla

      11 noviembre, 2014 at 4:05 pm
  • Miguel Angel Reply

    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

    20 noviembre, 2014 at 5:54 pm
  • miguel angel Reply

    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

    20 noviembre, 2014 at 7:14 pm
    • Jose A. Vila Reply

      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@estudiosurestao.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 :)

      21 noviembre, 2014 at 8:54 am
  • francisco pinto Reply

    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

    12 enero, 2015 at 2:57 am
  • Gabriel Reply

    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

    19 enero, 2015 at 5:37 pm
  • Nacho Reply

    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!!

    25 enero, 2015 at 7:54 am
    • Nacho Reply

      lo puse en js, ya me va pero cdo se me hace pequeño no se me abre, qué puedo hacer. Muy bien explicado

      25 enero, 2015 at 12:45 pm
  • Jose A. Vila Reply

    Hemos añadido el código completo para que podáis descargarlo y utilizarlo sin ningún tipo de error.

    3 febrero, 2015 at 8:06 am
  • PepitoB Reply

    qué lástima que no anda!

    3 febrero, 2015 at 9:56 pm
    • PepitoB Reply

      Baje el archivo ese sí anda, pero cómo puedo agregarle submenú al último ítem? Gracias

      3 febrero, 2015 at 10:04 pm
  • Julio Reply

    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

    20 febrero, 2015 at 12:05 pm
    • Julio Reply

      Mejor te dejo aquí un duplicado de la web para poder seguir desarrollando la otra: http://magiamajara.miwp.eu/

      ¡Muchísimas gracias!

      20 febrero, 2015 at 2:18 pm
  • Irving R. Reply

    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

    15 abril, 2015 at 4:28 pm
  • Mario Reply

    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

    29 abril, 2015 at 4:56 pm
  • Romina Reply

    Muchisimas gracias!!! Solo una duda, sera posible que cuando presionas el botón en ves de desplegar hacia arriba, despliegue hacia abajo?

    21 mayo, 2015 at 4:07 pm
    • Jose A. Vila Reply

      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
      21 mayo, 2015 at 4:14 pm
  • Mauro Reply

    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!

    12 agosto, 2015 at 3:32 am
  • José Ramón Reply

    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

    12 septiembre, 2015 at 12:55 pm
  • Brian Reply

    Muchas gracias amigo me salvaste mi cabeza no lo iba a resistir mas XD

    13 octubre, 2015 at 5:28 am
  • EZEQUIEL Reply

    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

    23 diciembre, 2015 at 4:26 am
  • Frank Reply

    Genial colega ! Muchas gracias

    29 enero, 2016 at 8:01 pm
  • Teresa Diaz Reply

    Me siento frustrada, yaintente todo y no puedo hacer responsive una pagina, me podrias ayudar?
    Gracias de antemano….

    16 febrero, 2016 at 5:54 am
    • Jose Antonio Vila Reply

      Hola Teresa. Envíanos más información y detalles a info@estudiosurestao.com y vemos como podemos ayudarte.

      16 febrero, 2016 at 9:01 am
  • Freddy Reply

    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

    29 abril, 2016 at 3:39 pm
  • ezequiel Reply

    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

    6 agosto, 2016 at 7:48 am
  • alvaro saavedra Reply

    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.

    15 agosto, 2016 at 1:06 pm
  • Hector Reply

    Muy bueno !

    Gracias por compartirlo !!!

    21 septiembre, 2016 at 6:31 pm
  • Dana Reply

    oye me interesa tu menú, no tienes algún tutorial para hacerlo como el de esta pagina?, de ante mano gracias 😀

    1 noviembre, 2016 at 6:56 am
  • Ernesto Rogers Reply

    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

    22 febrero, 2017 at 8:12 pm

Deja un comentario

Tu dirección de email no será publicada.