I am looking to create a mobile menu that opens a list of options with a toggle feature.
I want the menu list to appear when the toggle is clicked, and I also want to disable scrolling for the body. When the toggle menu is clicked again, the list should close, enabling scrollability for the body once more.
Is there a way to achieve this functionality?
Here is my code:
<body class="cbp-spmenu-push">
<div class="headerArea clearfix">
<div class="LogoArea"> <a href="#"><img src="images/smallogo.png" width="100"></a> </div>
<div class="container">
<section>
<div class="main">
<div class="toggle_menu" id="showRight">
<i></i>
<i></i>
<i></i>
</div>
</div>
</section>
</div>
<div class="menuArea">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
<a href="#">COMPANY</a>
<a href="#">PRODUCTS</a>
<a href="#">INTERNATIONAL</a>
<a href="#">BUSINESS OPPORTUNITIES</a>
<a href="#">CAREER</a>
<a href="#">CONTACT</a>
</nav>
</div>
</div>
</body>
CSS:
.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Javascript:
<script>
$(document).ready(function(e){
$('.toggle_menu').click(function(){
$('body').css("overflow","hidden")
});
});
</script>
The current jQuery code successfully disables scrolling when the toggle menu is clicked. However, it does not re-enable scrolling when the menu list is closed.
Any assistance on how to achieve this functionality would be greatly appreciated.