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/
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.
Comments