In this article, you will learn how to create a Toggle Menu Navigation JavaScript project. It is very useful for designing a navbar for mobile responsive size. Let’s see first what this project looks like:
GitHub Link for source code is provided below:
In this project, we used a button as the symbol for creating a toggle effect on the menu. Generally, we use a hamburger icon to display the toggle button.
What this Toggle Navigation Project all about?
In this project, we learn how to create that menu toggle effect that you see on your phone to access navigation. We will see how the logic works and how to implement that logic in our code. Believe me!! It is very simple to do it.
What will you learn from this Navigation Toggle Project?
You will learn how to add ‘class’ to your HTML page from JavaScript DOM tools. You will learn the logic to create this effect.
HTML PART: In Html, we simply created a container that will have our button and that navigation div.
We give class name, id name and imported JavaScript file using <script> tag.
<body>
<div class="menu">
<button id="clickme">Menu</button>
<div class="menubar" id="menubar">
<ul>
<li>Home</li>
<li>Shop</li>
<li>Contact</li>
<li>About</li>
<li>blog</li>
</ul>
<span id="cut">X</span>
</div>
</div>
<script src="js.js"></script>
</body>CSS PART:
Intuition: When we click the button, our menu div should come on the screen otherwise it should remain away from the screen. We will give the menu div position: absolute and right: -300px so that it will remain outside of the parent div.
Now when we click the button, we want to make it right: 0px so that it should come on screen from the right side. So, using JavaScript, we will add an ‘active’ class on the menu div and will apply CSS on the basis of this ‘active’ class.
.menu{
position: relative;
top: 20%;
left: 30%;
margin-top: 100px;
background-color: rgb(234, 190, 190);
width: 35%;
height: 50vh;
text-align: center;
overflow: hidden;
}
.menu .menubar{
width: 50%;
background-color: white;
position: absolute;
right: -300px;
top: 25%;
transition: 1s all ;
}
.menubar.active{
width: 40%;
background-color: white;
position: absolute;
right: 0px;
top: 25%;
cursor: pointer;
}
.menubar span{
position: absolute;
top: 0;
left: 5px;
padding: 8px;
background-color: rgb(189, 137, 137);
border-radius: 50%;
font-size: 10px;
}
.menu .menubar ul li {
margin-right: 50px;
padding: 10px;
list-style: none;
}
#clickme {
padding: 10px;
border-radius: 10px;
background-color: orange;
}JavaScript: In JavaScript, we use addEventListener DOM concept, to add the ‘active’ class in the HTML menu div. Now for each click, we want to add as well as remove the ‘active’ class from the container. For that, we use ‘toggle’ to meet the functionality.
const buttonEL=document.getElementById("clickme");
const menubar=document.getElementById("menubar");
const spanEl=document.getElementById("cut")
buttonEL.addEventListener("click",(e)=>{
menubar.classList.toggle("active");
},false)
spanEl.addEventListener("click",(e)=>{
menubar.classList.remove("active");
})Conclusion: Toggle Hamburger Navigation Project using JavaScript is useful in almost every web development frontend project having a navigation bar. We have seen the toggle menu html is very easy to understand as well. We used HTML, CSS & JavaScript to create this project very easily.
Code Link of this project: (Link)
To access more JavaScript Projects: Link