No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Nuevo Curso Práctico de JavaScript

Nuevo Curso Práctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Fusión del menú en mobile

19/26
Recursos

Aportes 10

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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.![](

Y en mi JavaScript ![](
Y el resultado fue este

Si les quedó duda como funciona el método toggle, aquí hay mas métodos de classList

Yo le puse así😂😂:

const burgerBtn;

Así lo hice para ocultar el menú desde JS

window.onresize = function () {
  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');