Landing Pages with dropdown (css and js)

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Eliezer, well done in trying to build this out. I just had a look at your code to see what's happening with the mobile nav. Firstly, I think a lot of things can be firstly simplified. Since you only got one container_list, you can use querySelector instead, since getElementsByClassName has the ability to modify your DOM.

  In any case, I think the main issue is, your showMobileMenu function only gets called once when the page loads, which is the only time the eventListener would be activated. The function doesn't get called again when the icon is clicked a second time. What you need to do is, you need to put the eventListener at the top level (as in, not have it nested or put within any functions). I think I would try something like this:

  const iconMenu = document.querySelector(".menu_icon");
  const menuDrop = document.querySelector(".container_list");
  const main = document.querySelector("main");
  
  iconMenu.addEventListener("click", function() {
      if (menuDrop.style.display == "flex") {
         menuDrop.style.display = "none";
         main.style.backgroundColor = "rgba(0,0,0,0.0)"
       } else {
         menuDrop.style.display = "flex";
         main.style.backgroundColor = "rgba(0,0,0,0.8)"
       }
  })
  

  Let me know if that works, and if not, we'll try something else!

  0