Diseñando un menú responsive con HTML5, CSS3 y jQuery.

Cómo adaptar el menú de nuestra página web a un diseño responsive

Índice de contenidos

1. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15 pulgadas (2.4 GHz Intel i7, 8GB 1333 Mhz DDR3, 500GB Flash Storage).
  • Sistema Operativo: Mac OS X Mavericks 10.9.5
  • Sublime text 2.0.2
  • jQuery 2.1.3
  • Normalize.css v3.0.2

2. Introducción

En los tiempos actuales, el diseño de las páginas web tiene que ser responsive para que pueda ser navegable desde cualquier tipo de dispositivo. El diseño responsive implica que las dimensiones y distribución de los elementos en la página varíen en función de las dimensiones de la pantalla que está mostrando el contenido.

Aunque ya disponemos de una gran cantidad de librerías que nos permiten dar un diseño responsive a nuestras web, como Bootstrap, a veces perdemos transparencia y no somos conscientes de qué aspectos hay que tener en cuenta para hacer un diseño lo más flexible posible.

En este tutorial aprenderemos cómo diseñar el menú de una página web responsive a través de CSS3 y JavaScript, de modo que en pantallas grandes se muestre de manera tradicional, opciones de menú alineadas en una cabecera, y para pequeños dispositivos quede oculto y mostrarse sólo al hacer click sobre un elemento concreto de la página.

3. Instalando las herramientas

Para el desarrollo de este tutorial, se han utilizado las herramientas normalize.css y jQuery. Para instalar las últimas versiones podemos acceder a los sitios web de jquery y normalize.css y descargar directamente los fuentes o instalarlos a través de npm:

  • Para jquery: npm install jquery
  • Para normalize.css: npm install normalize.css

En nuestro tutorial, hemos instalado estas dependencias a través de npm, por lo que las rutas son relativas al directorio node-modules.

4. Diseño inicial de nuestro menú

Vamos a diseñar una web muy sencilla que constará de lo siguiente:

  • Una cabecera con un logo en la parte izquierda y un menú en la parte derecha
  • El menú constará de las opciones Archivo, Sobre mí y Contacto
  • El body de nuestra página será un parráfo con texto

Utilizaremos HTML5 para la maquetación de la página index.html, quedando como sigue:

Añadimos los estilos en un fichero aparte styles.css en el directorio raíz:

Ubicacion del directorio

El contenido de la hoja de estilos es el siguiente:

La apariencia de nuestro menú inicial es la siguiente:

Menu inicial

5. Mostrando/ocultando el menú en la vista responsive

Aunque el diseño de nuestra página es responsive, el diseño del menú no es el más adecuado para dispositivos pequeños. Al igual que hacen librerías como Bootstrap, vamos a hacer que cuando el tamaño sea reducido el menú se comprima y sólo al seleccionarlo se despliegue y nos muestre las opciones.

Partiremos de un diseño inicial para resoluciones pequeñas en el que aparece nuestro menú oculto y una etiqueta que flote a la derecha de nuestra cabecera y a la que daremos comportamiento para que al hacer click sobre ella desplegue/oculte el menu:

Y las clases CSS que consiguen este efecto son las siguientes:

Como vemos, el menú se oculta a través de la propiedad de CSS3 de visibility. Para conseguir un efecto de que el menú se expande y contrae al mostrarse, hemos añadido transiciones en el height del header y en visibility del nav.

Ahora debemos añadir un manejador del evento de click sobre la etiqueta de menú para añadir/quitar las clases que muestran/ocultan el menú. Para ello, utilizaremos jQuery. Creamos en nuestro directorio raíz un fichero application.js y lo referenciamos inmediatamente después de la librería de jquery en nuestro index.html:

El script deberá controlar el evento de click y al capturarlo hacer un toggle de las clases .collapse y .menu-expanded en la etiqueta y header respectivamente. Los selectores de elementos siempre serán a través de clases CSS y no de identificadores:

La apariencia de nuestro menú oculto:

Menu oculto

Al desplegarlo:

Menu desplegado

6. Media queries: haciendo nuestro menú responsive

Una vez ya tenemos los dos diseños de menú, a través de media queries, podemos aplicar unas clases u otras a nuestros componentes para así ver el menú con el primer diseño para pantallas grandes (anchura mínima de 700px) y el oculto para pequeñas (mínima de 450px) :

Si cambiamos la resolución de nuestro navegador, vemos cómo la vista del menú cambia.

7. Conclusiones

Ya hemos visto cómo con CSS3 y jQuery podemos hacer un diseño responsive de nuestra web. Gracias a los nuevos recursos como transformaciones y media queries con muy poco código conseguimos un diseño adaptado y sin uso de librerías que pueden afectar al rendimiento de nuestra web.

El tutorial completo podéis verlo en mi repositorio de GitHub