7 enero, 2014 Jose Antonio Vila

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

Descargar ejemplo Tagged: , , ,

Sobre mí

Jose Antonio Vila Desarrollador web freelance bajo la marca Kido Estudio.Jose en Google+

Comments (40)

    • Jose A. Vila

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

      • Jose Moronta

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

    • Jose A. Vila

      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.

  1. eduardo

    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.

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

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

    • Jose A. Vila

      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 🙂

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

  5. Nacho

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

    • Nacho

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

  6. Jose A. Vila

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

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

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

  9. Romina

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

    • Jose A. Vila

      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
  10. Mauro

    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!

  11. 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. EZEQUIEL

    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

  13. Teresa Diaz

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

  14. Freddy

    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

  15. ezequiel

    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

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

  17. Dana

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

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

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

  20. Johnny

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

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

Deja un comentario

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