logo

Cómo hacer un menú responsive desplegable o hamburguesa

2 comentarios

No digo nada nuevo cuando hablo de el diseño web adaptativo o responsive web design, pero hacer un menú puede volverse un agobio si queremos que se vea bien en dispositivos móviles.

Vamos a ver cómo podemos hacer un menú responsive desplegable (en mi opinión, la mejor) que resulte atractivo y práctico en algunos pasos, será fácil…

Y muchos os preguntaréis… ¿y eso de hamburguesa? Este menú se conoce coloquialmente por menú hamburguesa, aunque su nombre técnico es toggle.

¡Vamos a empezar!

1º – Estructuramos nuestro HTML

Lógicamente, editamos nuestro HTML (yo utilizo el editor Sublime Text 3) con las secciones o apartados que va a tener nuestro menú. Lo más básico que necesitamos es la estructura. Luego iremos ampliando con las hojas de estilo y scripts para darle forma.

estructura_HTML

 

2º – CSS básico

Para dar un estilo determinado a nuestro HTML necesitamos un fichero CSS. Desde Sublime Text, abrimos un fichero nuevo y le damos el nombre style.css.

Aquí os dejo un ejemplo del css básico (entiendo que todos lo conocéis):

css_básico

Ahora vamos a declarar este CSS en nuestro HTML. Lo haremos añadiendo en el <head> lo siguiente:

<link rel=”stylesheet” href=”css/style.css”>

Y este sería su resultado en pantalla:

css_básico_pantalla

Si comprobáis con vuestro navegador, veréis que al disminuir la pantalla el menú no se adapta todavía. De momento sólo tenemos un menú básico.

Como recomendación para eliminar todos los floats, incluiremos la clase “clearfix” en nuestro CSS, de esta manera evitamos futuros desajustes. Únicamente tenemos que añadir lo siguiente al principio de nuestro CSS:

clearfix

 

Obviamente, una clase no sirve de nada si no la tenemos en nuestro HTML. Así quedaría en nuestro código:

clearfix_html

3º – Scripts

Para poder hacer este menú desplegable, tenemos que añadir el siguiente <script> en nuestro HTML:

script

 

En este caso, igual que hemos hecho al declarar el CSS, lo haremos también con el <script>. Veréis que en la línea 10 del código está declarado:

<script src=”js/jquery.min.js”></script>

En foros encontraréis muchos más ejemplos, a mí este me parece sencillo y práctico… pero podéis investigar hasta dar con el que más os guste. Si de momento utilizáis este, aquí os dejo el enlace: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

4º – Icono del menú desplegable

Para añadir el famoso icono de hamburguesa, vamos a añadir en nuestro código HTML la siguiente línea:

icono_hamburguesa

Y esta otra línea en el CSS:

css_icono_hamburguesa

A pesar de haber incluido estas líneas, seguimos sin tener nuestro menú responsive. Ahora vamos a lo que interesa…

5º – Media Queries

En este paso, el más importante, vamos a ver cómo quedará nuestro menú responsive desplegable.

Lo haremos para tres medidas standard: 320px, 480px y 600px.

 

media_queries

El resultado sería este:

menu_desplegable              menu_plegado

Y hasta aquí nuestro menú responsive desplegable o de hamburguesa.

Espero que os haya ayudado con el paso a paso. Ahora sólo tenéis que adaptarlo a vuestro gusto. Y lo más importante: practicar, practicar y practicar.

Aquí os dejo los archivos utilizados durante el paso a paso:

  1. jr

    17 abril, 2015 a las 4:00

    lo que buscaba

  2. angelo

    1 abril, 2015 a las 21:23

    super

Leave a reply

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.