Hey guys I'm trying to build a website which includes a feature that toggles a side bar when the hamburger icon is clicked yet it doesn't seem to work. all my CSS tags linked to the JavaScript are correct. I just want you guys to look at my JavaScript code if it is right.
$(document).ready(function(){
$('.menu-btn').click(function(){
$('.navbar .menu').toggleClass('active');
});
}); ```
You may not have defined the jQuery reference. After reviewing the sample application below, you should submit a more detailed bug report.
$(document).ready(function() {
$("#menu-btn").click(function(e) {
e.stopPropagation();
e.preventDefault();
$(this).toggleClass("active");
$(".menu ul").toggleClass("active");
});
});.toggle-nav{
margin-left: 7px;
}
.menu ul.active {
display: none;
}
.menu ul {
position: absolute;
top: 20%;
padding: 10px 20px;
background: #F0F0F0;
}
.menu li {
margin: 5px 0px 5px 0px;
float: none;
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<button id="menu-btn" class="toggle-nav">Toggle</button>
<ul class="active">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Thirth</a></li>
</ul>
</div>