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!
Contenidos
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
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:
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.
Deja una respuesta