Consultora SEO y Diseño Web en Barcelona

Cómo hacer un menú responsive desplegable o hamburguesa

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.

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):

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:

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:

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

3º – Scripts

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

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:

Y esta otra línea en el CSS:

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.

El resultado sería este:

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:

Deja una respuesta

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

Información básica sobre protección de datos Ver más

  • Responsable Montserrat Martinez Torres .
  • FinalidadModerar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios Cdmon.
  • Derechos Acceder, rectificar y suprimir los datos.

© 2020 Todos los derechos reservados. Hecho con ♥ en Barcelona by Seocreativa. Política de Privacidad | Política de Cookies | Política Privacidad RRSSAviso Legal