Categorías: Tutorial

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.

<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

Descargar ejemplo
Menú responsive para tu sitio web de manera sencilla enero 12th, 2018Jose Antonio Vila
Jose Antonio Vila

Desarrollando webs desde hace más de 10 años. Hace mucho que dejé atrás la vida en agencias y me abracé a la vida de freelance. 🖥 Si tienes algún proyecto en mente, contacta conmigo. 📖 Si quieres leer más cosas que escribo, echa un ojo a mi web personal

Ver Comentarios

    • 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?

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

Compartir
Publicado por
Jose Antonio Vila

Posts Recientes

4 efectos con CSS3 para los textos de tu web

Con el paso de los años, CSS se está haciendo cada vez más potente y… Leer más

Hace 2 años

Buenas prácticas para ser mejor programador

Al igual que un artista mejora su técnica con la práctica constante, un programador aprende… Leer más

Hace 2 años

Como mejorar la seguridad en WordPress: evita ser hackeado

WordPress es, probablemente, el mayor CMS para la creación de páginas web en el mundo.… Leer más

Hace 3 años

Mi web WordPress ha sido hackeada, ¿ahora qué hago?

Guste más o menos, Wordpress está detrás de un alto porcentaje de las webs activas… Leer más

Hace 3 años

La digitalización de Estonia: educación y brecha digital

Hoy, la gente de Xataka ha publicado un artículo muy interesante hablando de Estonia. Parece… Leer más

Hace 3 años

Como integrar Google ReCaptcha

Aunque todos lo conocemos, seguro que hay algún despistado al que lo de Google reCAPTCHA… Leer más

Hace 7 años