Menú de hamburguesa
Menú de hamburguesa
Crea un menú de hamburguesa que se pueda usar en la vista móvil para navegar entre páginas del sitio.
Creado: 11/06/2023 por Dustin Usey
Nivel de habilidad: principiante
Temas utilizados:
Tiempo estimado de finalización: 30 minutos
Crea un menú de hamburguesa que se pueda usar en la vista móvil para navegar entre páginas del sitio.
Conceptos Básicos de CSS
Aprende los conceptos básicos de CSS, una de las tecnologías principales para diseñar y construir sitios web y aplicaciones.
Diseño de Diseño CSS Flexbox
Flexbox es un conjunto de propiedades de CSS que te proporciona una forma flexible de diseñar contenido.
Transiciones y Transformaciones CSS
Con transiciones y transformaciones de CSS, puedes crear animaciones simples que mejoren las interacciones del usuario en sitios web y aplicaciones.
Interactuando con el DOM
Junto con la selección de elementos DOM en JavaScript, también podemos escribir código que les dé comportamiento a los elementos. En este curso, primero exploraremos cómo observar la interacción y responder usando el método addEventListener.
Menú de Hamburguesa Animado
¿Deseas configurar un menú de hamburguesa para tu navegación móvil con una animación elegante? No es tan difícil como podrías pensar. ¡Acompáñame mientras abordo esta pequeña característica de UX!
-
0
Para comenzar, haz clic en Comienza la Aventura en la parte superior de la página y luego descarga tus archivos de inicio.
-
1
Utiliza CSS Flexbox o Grid para diseñar el menú de hamburguesa.
-
2
Utiliza JavaScript para agregar escuchadores de eventos al menú de hamburguesa.
-
3
Utiliza JavaScript para alternar el menú entre abierto y cerrado.
-
4
Desafío Extra: Utiliza transiciones o animaciones CSS para animar el menú de hamburguesa cuando se abre y se cierra.
-
5
Desafío Extra: Crea una vista de escritorio de la navegación que esté oculta en la vista móvil. Utiliza consultas de medios CSS para ocultar el menú de hamburguesa y mostrar la navegación de escritorio en su lugar.
-
6
Desafío Extra: Ampliar la ventana del navegador a tamaños de pantalla de escritorio cerrará el menú de hamburguesa si está abierto y el icono del menú debe estar oculto, mostrando la navegación de escritorio en su lugar.