I need help making the menu icon toggle the navigate menu between showing and hiding when clicked on the top right corner of the screen.
For better understanding, here is an accompanying image:
https://i.stack.imgur.com/oy6d9.png
However, the current code does not seem to toggle the menu at all. Below is the snippet of the code I have so far:
var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")
menuBtn.onclick = function(){
if(sideNav.style.right == "-250px"){
sideNav.style.right = "0";
}
else{
sideNav.style.right = "-250px";
}
}#sideNav{
width: 250px; /*change font size of text in nav bar*/
height: 100vh;
position: fixed;
right: 0;
top:0;
background: #009688;
z-index: 2;
}
nav ul li{
list-style: none;
margin: 45px 15px;
}
nav ul li a{
text-decoration: none;
color: #fff;
}
#menuBtn{
width: 50px;
height: 50px;
background: #009688;
text-align: center;
position: fixed;
right: 30px;
top: 20px;
border-radius: 3px;
z-index: 3;
cursor: pointer;
}
#menuBtn img{
width: 20px;
margin-top: 15px;
}<div id="sideNav">
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">COVID-19</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">REVIEWS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
<div id="menuBtn">
<img src="images/menu.PNG" id="menu">
</div>