Mobile menu drop down

Loculi

I'm using the responsive menu script from PureCss example. I'd like for the menu to disappear after the user clicks a link. How could I automatically hide the menu after a click has been made? I've tried to use hide() or .fadeOut(), but it doesn't work

https://jsfiddle.net/bpvm8b5L/3/
iomv

Add an Event Listener to your anchor elements inside the menu that on click trigger a function that reproduce the action of when the hamburger menu icon is pressed, so it removes the class active from

  • <div id="layout" class=" active">
  • <a href="#menu" id="menuLink" class="menu-link active">…</a>
  • <div id="menu" class='active'>…</div>

So try to add in your ui.js file, inside your main function:

var ulElem = document.getElementById('ulElem');

ulElem.onclick = function (e) {
     e.preventDefault();
     console.log(e.target.classList.value);
     if(e.target.classList.value === "pure-menu-link") {
     toggleClass(layout, active);
     toggleClass(menu, active);
     toggleClass(menuLink, active);
     }
} 

And remember to set the id name of the ui element on your HTML file as id=uiElem.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related