const burguerMenu queda bien jaja
Introducción
¿Ya tomaste el Curso Básico de JavaScript?
Prueba de JavaScript
Test de JavaScript
Variables
Funciones
Condicionales
Ciclos
Arrays y objetos
Bonus: reducción de condicionales
Quiz: Prueba de JavaScript
Manipulación del DOM
Cómo conectar JavaScript con HTML
Leyendo HTML desde JavaScript
Escribiendo HTML desde JavaScript
Eventos en JavaScript: interactuando con usuarios
addEventListener
Quiz: Manipulación del DOM
Contribución a proyectos
Conectando GitHub a proyectos de JavaScript
Proyectos con JavaScript y GitHub desde cero
Fork a proyectos en GitHub
Analizando código de proyectos open-source
Fusión del menú en desktop
Fusión del menú en mobile
Carrito de compras
Lista de productos: HTML a partir de arrays
Detalles de un producto
Interacción entre todos los componentes
Pull Requests: aportando código a proyectos en GitHub
Quiz: Contribución a proyectos
Despliegue
Deploy con GitHub Pages
Quiz: Despliegue
Próximos pasos
¿Cuál es tu sueño con JavaScript?
Quiz: Próximos pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 10
Preguntas 3
const burguerMenu queda bien jaja
Pregunta y respuesta del chat antes de publicarla. pero no me voy a quedar con las ganas 😃
Escribi esto:
Que lastima que el addEventListener no permite enviar parametros/argumentos en la funcion invocada.
Se podria usar una sola funcion para todos los clickleables del menu.
quedaria asi
menuEmail.addEventListener("click", toggleElement(desktopMenu));
hamburguesa.addEventListener("click", toggleElement(menuMobile));
function toggleElement(elemento){
elemento.classList.toggle("inactive");
}
Alguien sabe porque no se puede?
Probe y no funciono 😦
Antes publicar la pregunta el automaticamente se me recomendo esto:
https://platzi.com/comentario/2932415/
Y este es el resultado que si funciona 😃
menuEmail.addEventListener("click", function(){toggleDesktopMenu(desktopMenu)});
hamburguesa.addEventListener("click", function(){toggleDesktopMenu(menuMobile)});
function toggleDesktopMenu(elemento){
elemento.classList.toggle("inactive");
}
Resulta que si llamamos una funcion directamente no funciona, pero si lo hacemos por medio de una funcion anonima ssi, que loco no?
A mi los menus de mobile me gusta animarlos entrando y saliendo de la pantalla de forma fluida, para esto escondo el menu a la izquierda del documento usando position y luego con una clase lo muevo devuelta a la posicion 0 de esta forma:
.mobile-menu {
position: absolute;
top: 61px;
left: -400px;
transition: 400ms;
}
.slide-right {
left: 0;
}
Al hacer esto y aplicando el transition a la clase de .mobile-menu, hace que el cambio se vea fluido lo cual creo no seria posible con la clase de .inactive.
Asi lo hago yo, me gustaria saber si conocen una forma distinta o mas efectiva de lograr este efecto
Buenas amigos, en esta clase, antes de verla quise intentar realizarlo por mi cuenta, y le agregué una transición, para que cuando el menú saliera, lo hiciera con un desplazamiento lateral, miren cómo quedó, y diganme qué les parece y si hay una forma más profesional de hacerla también la acepto, le agregué a mis estilos del mobile menu lo siguiente. {
document.documentElement.scrollWidth <= 640 &&
desktopMenu.classList.add('inactive');
};
onresize();
Si alguno gusta aventurarse a manejar los Media Queries con JavaScript, aquí un post de CSS Tricks para hacerlo ✨
https://css-tricks.com/working-with-javascript-media-queries/
const mobileBurguerMenu
Así le puse a mi trabajo:
const leftIconMenu = document.querySelector('.menu');
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.