Merida Design Blog

Publicado el | Tutoriales / , ,

Como hacer menús responsivos con CSS

Al desarrollar un sitio web responsivo lo más importante es la navegación, ya que éste será el elemento que brinde la mayor parte de la experiencia del usuario en el sitio.

Existen muchas formas de hacer un menú responsivo, sin embargo, hay ciertos patrones de diseño que son más comunes y se emplean para determinadas circunstancias, en éste tutorial te mostraré los 3 que he considerado los más populares, así como también describiré brevemente cuando es ideal el uso de cada uno de ellos.

Para fines de este tutorial, he creado unos menús de ejemplo en codepen.io que les dejo a continuación. Para ver el cambio del menú debes redimensionar tu navegador o visualizar este artículo desde un dispositivo móvil.

See the Pen Responsive Menu Design Patterns by Iván Villamil (@ivillamil) on CodePen.0

 

Diseño 1: Navegación Visible

Este tipo de navegación es la más sencilla de implementar y es común usarla para menús con pocas opciones.

Navegación visible
 

Objetivo

Lo que se busca con este tipo de diseño es mantener el menú visible con todas sus opciones generalmente debajo del logotipo, ambos centrados en la pantalla.

El HTML

    <header>
      <h1>Logo</h1>
      <nav>
        <ul>
          <li><a href="home">Home</a></li>
          <li><a href="about">About</a></li>
          <li><a href="services">Services</a></li>
          <li><a href="contact">Contact</a></li>
        </ul>
      </nav>
    </header>

En esta parte no hay mucho que explicar, solamente creamos la barra de navegación superior e incluimos el logotipo y el menú dentro del elemento nav de HTML5.

EL CSS

    header {
      background: #17729d;
      border-radius: 4px;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
      padding: 10px;
      margin-bottom: 1em;
      overflow: hidden; /* Evita que el header colapse con elementos flotantes */
    }

    h1 {
      float: left;
      margin: 0;
      padding: 0;
      text-transform: uppercase;
      text-shadow: -1px -1px 0 rgba(0,0,0,0.2);
    }

    nav ul {
      float: right;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    nav li {
        display: inline-block;
    }

    nav a {
      color: white;
      display: block;
      padding: .5em .8em;
      text-decoration: none;
    }

    nav a:hover {
      background-color: rgba(0,0,0,0.1);
    }

    /* Esta parte es la que determina los estilos para pantallas
     * de máximo 500px de ancho. */
    @media screen and ( max-width: 500px; ) {
      h1, ul { float: none; }
      h1, nav { text-align: center; }
      ul { display: inline-block; }
    }

NOTA: Yo estoy usando un ancho de 500px como referencia, pero lo ideal es que determines el ancho que mejor se adapta a tu contenido redimensionando la pantalla del navegador.

Diseño 2: Navegación Oculta

Es quizá el tipo de diseño de navegación mas usado y su popularidad se debe tal vez a que crea una experiencia similar a la de una aplicación móvil.

Navegación Oculta
 

Objetivo

Ocultar por completo el menú dejando como únicos elementos visibles un ícono de 3 líneas conocido también como menú hamburguesa (hamburguer menu) y el logotipo.

Si lo que buscas es crear una experiencia más nativa, éste es el estilo que debes usar. En este ejemplo yo mostraré como visualizar el menú oculto a manera de popover pero también suele emplearse para crear un menú off canvas (fuera del área visible) haciendo también que la barra de navegación se mantenga fija para emular por completo el comportamiento de una aplicación.

Si quieres ver como diseñar un menú off canvas puedes mirar este pen.

HTML

El HTML se mantiene exactamente igual que el del ejemplo anterior, lo único que modificaremos serán los estilos en el media para las pantallas pequeñas.

CSS

    ...

    @media screen and ( max-width: 500px ) {
      h1 { float: none; text-align: center; }
      nav {
        background-color: #fff;
        box-shadow: 0 10px 0 currentColor, 0 20px 0 currentColor;
        height: 5px;
        left: 12px;
        opacity: 0.6;
        position: absolute;
        top: 12px;
        width: 30px;
      }

      nav:before {
        background: transparent;
        content: '';
        display: block;
        height: 30px;
        width: 100%;
      }

      nav:hover,
      nav:focus,
      nav:active {
        opacity: 1;
      }

      nav:hover ul,
      nav:focus ul,
      nav:active ul {
        display: block;
      }

      nav ul {
        background-color: rgba(0,153,153, 0.9);
        display: none;
        position: absolute;
        top: 25px;
        width: 200px;
      }

      nav li {
        border-top: 1px solid rgba(white, 0.2);
        display: block;
      }

      nav li:first-child {
        border: none; 
        padding-top: 25px;
      }
      nav li a {
        padding: .8em;
      }
    }

En esta ocasión el código es un poco mas extenso, sin embargo lo mas importante es lo que ocurre con el elemento nav, al cual convertimos en el icono de 3 líneas, haciendo que el elemento sea la primera línea superior y con la propiedad box-shadow pintamos las 2 líneas inferiores.
Posteriormente los elementos de la lista los convertimos en bloques para tener uno por línea y mantenemos oculto el elemento ul y lo mostramos cuando se hace tap desde un dispositivo móvil.

La propiedad que permite que el menú se muestre al hacer tap desde un móvil es el :active que asignamos al elemento nav.

Diseño 3: Navegación Con Selectbox

Esta opción es bastante sencilla de implementar y se aprovecha bien cuando los menús cuentan con muchas opciones.

Menú con selectbox
 

Objetivo

Con este diseño se ahorra espacio, mantiene una apariencia limpia en la barra de navegación y se aprovechan elementos nativos del dispositivo, ya que al activar el select desde un móvil, se mostrará un elemento de la interfaz nativa que ocupa gran parte de la pantalla y permite elegir cualquiera de las opciones de manera mas cómoda.

HTML

En esta ocasión tenemos que agregar el select además del menú habitual.

    <header>
      <h1>Logo</h1>
      <nav>
        <ul>...</ul>
      
        <select>
          <option value="home">Home</option>
          <option value="about">About</option>
          <option value="services">Services</option>
          <option value="contact">Contact</option>
        </select>
      </nav>
    </header>

CSS

    ...
    header select { display: none; } /* Oculto por defecto */
    @media screen and ( max-width: 500px ) {
      h1 { float: none; text-align: center; }
      nav {
        ul { display: none; } /* Ocultamos el menú normal */
        select {
          background: rgba(0,0,0,0.3);
          border: none;
          color: $fontColor;
          display: block;
          height: 34px;
          line-height: 34px;
          width: 100%;
        }
      }
    }

En este tipo de diseño lo que hacemos es ocultar el select y lo mostramos hasta que el tamaño de la pantalla tenga cuando mucho el ancho que le especificamos, en ese momento ocultamos también el elemento ul que contiene la navegación para pantallas mas grandes.

Conclusión

Estos son los tres tipos de diseño para menús responsivos que se ven con mas frecuencia en la web, sin embargo existen otros tipos de diseño, si estás interesado en alguno en particular no dudes en dejar tu sugerencia o comentarios.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: