I managed to implement a mobile menu on my single-page website by utilizing code I found online. Currently, the menu only opens or closes when the main navigation bar is selected due to the JavaScript I have integrated. Is it feasible for the menu to automatically close once a menu item is chosen? This way, when a menu option is clicked, and the page scrolls to an anchor point, the navigation menu will also close instead of remaining open.
For reference, here's a snapshot of my existing menu: https://jsfiddle.net/kmracozg/
HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>
</head>
<a id="touch-menu" class="mobile-menu" href="#"><div class="mobile-logo">LOGO HERE</div><div class="mobile-menu-dropdown">MENU</div></a>
<div class="header-logo">LOGO HERE</div>
<nav>
<ul class="menu">
<li><a href="#"></i>HOME</a>
<li><a href="#"></i>ABOUT</a>
<li><a href="#"></i>SOLUTIONS</a>
<li><a href="#"></i>WORK</a>
<li><a href="#"></i>CONTACT</a>
<li><a href="#"></i><b>CLIENT AREA</b></a>
</ul>
</nav>CSS:
/* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);
/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
body{background:#000;
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
width:100%;}
<!-- More CSS Code Snippet Here -->
.menu ul ul {left: 149px;
top: 0px;
}
.mobile-menu{display:none;
width:100%;
padding:16px;
background:#ffffff;
color:#393939;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#ffffff;
color:#393939;
text-decoration:none;
}
<!-- Rest of the CSS Code Snippet Here -->
@media (max-width: 900px) {
<!-- Media Queries CSS Code Here -->
});Javascript:
$(document).ready(function(){
var touch = $('#touch-menu');
var menu = $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 900 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});