En esta cuarta clase del curso de técnicas de maquetación web, aprenderemos a hacer un menú hamburguesa que se abra sólo cuando pulsemos un botón.
Los menús hamburguesa son un tipo de componente web muy utilizado en el desarrollo front-end actual. Este tipo de forma de mostrar los menús, parten del hecho de que el menú en si está escondido, y solamente aparece en el momento en el que hacemos click en un ícono.
Estos íconos, generalmente se muestran en forma de tres líneas horizontales, cuya forma puede recordar a la de una hamburguesa, de ahí su nombre. ¡Vamos a ver cómo maquetarlos!
¡Ya lo tenemos! Hemos creado un menú hamburguesa de forma simple y rápida, y nos ha quedado la mar de resultón.
Habitualmente, los menús de hamburguesa se muestran únicamente cuando se visita un sitio web mediante un dispositivo móvil, como un smartphone o una tablet. Sin embargo, en esta ocasión, hemos visto cómo crear uno directamente en la versión desktop de un sitio web.
Además, gracias a la librería de iconos vista en el vídeo, hemos podido utilizar íconos animados en nuestra maquetación. Estos iconos, cambian de forma en el momento en el que los pulsamos, de tal forma que dotamos a nuestro proyecto de mayor dinamismo.
Como siempre, si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de soporte de la intranet de suscriptor. ¡Nos vemos en la siguiente lección, en la que veremos el fantástico mundo de las transiciones! :)
Todos los capítulos de este curso:
- Curso de técnicas de maquetación web #1. Hero Image
- Curso de técnicas de maquetación web #2. Sombras
- Curso de técnicas de maquetación web #3. Sticky menu
- Curso de técnicas de maquetación web #4. Menú hamburguesa
- Curso de técnicas de maquetación web #5. Transiciones
- Curso de técnicas de maquetación web #6. Acordeón
- Curso de técnicas de maquetación web #7. Pestañas o tabs
- Curso de técnicas de maquetación web #8. Animacioness
- Curso de técnicas de maquetación web #9. Formularios
- Curso de técnicas de maquetación web #10. Líneas con CSS