Close Responsive Menu After Click On Menu Item
I have this custom js code for basic (open/close) menu movement that was great when I used it on multi page websites, but it only closes the menu when you click the menu symbol. No
Solution 1:
change
$('#nav-menu').click(function() {
if you want that your menu close only by clicking on the li element
$('#nav li').click(function() {
or if you want to close menu with both li and menu icon
$('#nav-menu, #nav li').click(function() {
Solution 2:
That's because you only bind the click function to the menu symbol. I'm not sure why you separate the symbol and text, but I would prefer to wrap it in single element. Also you can use jQuery slideToggle()
to slide down or up on click. Example:
$(document).ready(function() {
$('#nav-menu').click(function() {
$('#nav').slideToggle(300);
});
});
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="nav-hold"><divclass="nav-bar"><ahref="#one"class="nav-logo"><imgsrc="images/logo.png"alt="logo" /></a><ahref="#one"class="nav-logo-text">Company name</a><aid="nav-menu"class="nav-menu-symbol"><span>☰</span><span>Menu</span></a><ulclass="nav-list"id="nav"><li><ahref="#one">Top</a></li><li><ahref="#two">About us</a></li><li><ahref="#three">Services</a></li><li><ahref="#four">Portfolio</a></li><li><ahref="#five">Contact</a></li></ul></div></div></div>
Post a Comment for "Close Responsive Menu After Click On Menu Item"