I have implemented a custom JavaScript code for a basic open/close menu movement on multi-page websites. The code works by closing the menu only when the user clicks the menu symbol. However, I now need to incorporate this code into a one-page website and make it so that the menu closes after a user clicks on a menu item. Since I have limited experience in JavaScript, I am seeking assistance in solving this issue.
The JavaScript code:
$(document).ready(function() {
var n = '#nav', no = 'nav-open';
$('#nav-menu').click(function() {
if ($(n).hasClass(no)) {
$(n).animate({height:0},300);
setTimeout(function() {
$(n).removeClass(no).removeAttr('style');
},320);
}
else {
var newH = $(n).css('height','auto').height();
$(n).height(0).animate({height:newH},300);
setTimeout(function() {
$(n).addClass(no).removeAttr('style');
},320);
}
});
});
The HTML:
<!-- Navigation Bar -->
<div class="nav-hold">
<div class="nav-bar">
<a href="#one" class="nav-logo"><img src="images/logo.png" alt="logo" /></a>
<a href="#one" class="nav-logo-text">Company name</a>
<a id="nav-menu" class="nav-menu-symbol">☰<!-- menu symbol --></a>
<a class="nav-menu">Menu</a>
<ul class="nav-list" id="nav">
<li><a href="#one">Top</a></li>
<li><a href="#two">About us</a></li>
<li><a href="#three">Services</a></li>
<li><a href="#four">Portfolio</a></li>
<li><a href="#five">Contact</a></li>
</ul>
</div>
</div>
</div>