Introduction to Hamburger Menu JavaScript
Hamburger Menu in JavaScript is defined as a list of links or buttons or content on the navigation bar or Side Bar that can be hidden or shown simultaneously when we click a button like triple equal on the right side of the navigation bar. The hamburger menu is nothing but a navigation bar that is either vertically or horizontally. It is mainly more useful with smaller screen devices because mobile screens cannot have the same space as the PCs. Instead of showing the navigation bar, smaller devices shown with a hamburger menu to access all the features like PCs. Hamburger Menu is an advanced feature of JavaScript with a high animated look and feel.
Real-time Example: If we want to display the main content like Home, Register, Login, Order details, etc. In small-screen devices like mobiles, notepads, etc. Then prefer Hamburger Menu.
Advantage:
- Best suited for all types of screen sizes.
How does it work in JavaScript?
Hamburger Menu in JavaScript work is based on querySelector(), addEventListener() and toggle() functions.
- querySelector(): It creates a navigation bar by selecting a div class from HTML code and, also it makes the navigation bar to toggle by selecting one more div class from HTML code.
Example:
<div class="navbar"> //class="navbar" used by querySelector() for creating navigation bar
<div class="navToggle"> //class="navToggle" taken inside the querySelector() as argument for displaying navigation bar toggle
</div>
</div>- addEventListener(): It makes the navigation bar show or hidden by taking click.
- toggle(): It activates the toggle functionality either active or inactive.
Syntax:
let navigataionBar = document.querySelector('navigation class from HTML code');
let navigationToggle = document.querySelector('navigation toggle class from HTML code');
navigationToggle.addEventListener('click', function (event)
{
navigataionBar.classList.toggle('active')
});Examples of Hamburger Menu JavaScript
Different examples of hamburger menu are given below:
Example #1 – Hamburger Horizontal Menu with links
HTML Code: HamburgerHorizontalMenu.html
<!DOCTYPE html>
<html>
<head>
<title>Hamburger Menu in JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- adds jQuery libraries -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- adds ajax and bootstrap libraries -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- adds bootstrap libraries -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- CSS styles File-->
<link rel="stylesheet" href="HamburgerMenu.css">
<!-- JavaScript File -->
<script type="text/javascript" src="HamburgerMenu.js"></script>
</head>
<body>
<div class="navigationBar">
<h1>Hamburger Horizontal Menu</h1>
<nav>
<div class="navigation">
<ul class="navigationItems">
<li><a href="#">Courses</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">About</a></li>
<li><a href="#" >Book Course</a></li>
<li><a href="#" >EDCBA Faculty</a></li>
</ul>
<div class="navigationToggle"></div>
</div>
</nav>
</div>
</body>
</html>CSS Code: HamburgerMenu.css
h1
{
color:green;
}
body {
height: 100px;
padding: 0;
margin: 0;
overflow: hidden;
}
.navigation {
max-width: 500px;
border-radius: 8px;
background-color: white;
padding-right: 30px;
line-height: 3;
display: flex;
}
.navigationBar {
position: relative;
width: 100%;
height: 100%;
}
.navigationBar::before, .navigationBar::after {
width: 100%;
height: 50%;
background-color: #EAFBFF;
}
*, *::before, *::after {
box-sizing: border-box;
}
.navigationBar.active ul {
width: 420px;
margin-right: 20px;
}
.navigationToggle {
width: 40px;
height: 48px;
padding: 14px 5px;
cursor: pointer;
}
.navigationBar ul {
display: flex;
justify-content: space-between;
list-style: none;
width: 0;
overflow: hidden;
}
.navigationBar:not (.active ) .navigationToggle {
margin-left: -11px;
}
.navigationToggle::after {
margin-top: 10px;
}
.navigationBar.active .navigationToggle::before, .navigationBar.active .navigationToggle::after
{
position: absolute;
top: 52%;
transform: rotate(135deg);
}
.navigationToggle::before, .navigationToggle::after {
content: '';
position: relative;
display: block;
width: 30px;
height: 3px;
background-color: red;
}
.navigationBar.active .navigationToggle::after {
transform: rotate(-135deg);
margin-top: 0;
}
JavaScript Code: HamburgerMenu.js
let navWrapper = document.querySelector('.navigationBar'), navToogler = document
.querySelector('.navigationToggle')
navToogler.addEventListener('click', function(event) {
navWrapper.classList.toggle('active')
});Output:
Example #2 – Hamburger Vertical Menu with Buttons
HTML Code: HamburgerVerticalMenu.html
<!DOCTYPE html>
<html>
<head>
<title>Hamburger Menu in JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- adds jQuery libraries -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- adds ajax and bootstrap libraries -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- adds bootstrap libraries -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- CSS styles File-->
<link rel="stylesheet" href="HamburgerMenu.css">
<!-- JavaScript File -->
<script type="text/javascript" src="HamburgerMenu.js"></script>
</head>
<body>
<div class="navigationBar">
<h1 class="h">Hamburger Vertical Menu</h1>
<nav>
<div class="navigation">
<ul class="navigationItems">
<li><button href="#" class="btn btn-default">Login</button></li>
<li><button href="#" class="btn btn-primary">Register</button></li>
<li><button href="#" class="btn btn-success">Feedback</button></li>
<li><button href="#" class="btn btn-info">Know More</button></li>
<li><button href="#" class="btn btn-warning">Download</button></li>
</ul>
<div class="navigationToggle"></div>
</div>
</nav>
</div>
</body>
</html>CSS Code: HamburgerMenu.css
body {
height: 100px;
padding: 0;
margin: 0;
overflow: hidden;
}
.h
{
color:blue;
}
.navigation {
max-width: 500px;
border-radius: 8px;
background-color: brown;
padding-right: 30px;
line-height: 3;
display: flex;
}
.navigationBar {
position: relative;
width: 100%;
height: 100%;
}
.navigationBar::before, .navigationBar::after {
width: 100%;
height: 50%;
background-color: #EAFBFF;
}
*, *::before, *::after {
box-sizing: border-box;
}
.navigationBar.active ul {
width: 420px;
margin-right: 20px;
}
.navigationToggle {
width: 40px;
height: 48px;
padding: 14px 5px;
cursor: pointer;
}
.navigationBar ul {
justify-content: space-between;
list-style: none;
width: 0;
overflow: hidden;
}
.navigationBar:not (.active ) .navigationToggle {
margin-left: -11px
}
.navigationToggle::after {
margin-top: 10px;
}
.navigationBar.active .navigationToggle::before, .navigationBar.active .navigationToggle::after
{
position: absolute;
top: 52%;
transform: rotate(135deg);
}
.navigationToggle::before, .navigationToggle::after {
content: '';
position: relative;
display: block;
width: 30px;
height: 3px;
background-color: yellow;
}
.navigationBar.active .navigationToggle::after {
transform: rotate(-135deg);
margin-top: 0;
}JavaScript Code: HamburgerMenu.js
let navWrapper = document.querySelector('.navigationBar'), navToogler = document
.querySelector('.navigationToggle')
navToogler.addEventListener('click', function(event) {
navWrapper.classList.toggle('active')
});Output:
Example #3 – Hamburger Menu with Logo
HTML Code: HamburgerMenuLogo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- adds jQuery libraries -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- adds ajax and bootstrap libraries -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- adds bootstrap libraries -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- CSS style file -->
<link rel="stylesheet" href="HamburgerMenu.css">
<title>Hamburger Menu in JavaScript</title>
</head>
<body>
<div class="container">
<div class="divClass">
<div class="logoImage">
<a href="#"><img src="educba.PNG"></a>
</div>
<div class="navigationBar">
<div class="navigationItems">
<!-- code for triple equals structure -->
<div class="line firstLine"></div>
<div class="line secondLine"></div>
<div class="line thirdLine"></div>
</div>
<nav class="mainNavigation">
<ul class="navigationList"><!-- class="nav-link" default size for links -->
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#" class="nav-link">About Us</a></li>
<li><a href="#" class="nav-link">Services</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- JavaScript file -->
<script src="HamburgerMenu.js"></script>
</body>
</html>CSS Code: HamburgerMenu.css
.divClass {
width: 100%;
height: 100px;
}
.navigationItems {
width: 45px;
height: 35px;
position: fixed;
top: 40px;
right: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 100;
}
.logoImage {
height: 80px;
width: 80px;
position: fixed;
top: 20px;
left: 50px;
z-index: 100;
}
.logoImage img {
width: 100%;
}
.line {
width: inherit;
height: 5px;
background-color: #16c3cf;
border-radius: 25px;
transform-origin: right;
transition: transform .5s;
}
.secondLine {
height: 3px;
}
.change .secondLine {
transform: translate(5px, 20px);
}
.change .thirdLine {
transform: rotateZ(45deg);
}
.change .firstLine {
transform: rotateZ(-45deg);
}
.mainNavigation {
height: 15vh;
width: 100%;
background: green;
position: fixed;
top: -15vh;
z-index: 50;
transition: top .4s;
}
.change .mainNavigation {
top: 0;
}
.nav-link::after {
content: attr(data-text);
position: absolute;
left: 0;
bottom: -100%;
background-color: #000;
padding: inherit;
color: #16c3cf;
transform: rotateX(-90deg);
transform-origin: top;
}
.nav-link {
text-decoration: none;
font-size: 20px;
text-transform: uppercase;
color: #ccc;
background-color: brown;
letter-spacing: 1px;
padding: 5px 10px;
display: block;
position: relative;
}
.navigationList {
list-style: none;
width: 80%;
margin: auto;
height: inherit;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.nav-link:hover {
transform: rotateX(90deg);
}JavaScript Code: HamburgerMenu.js
document.querySelector('.navigationItems').addEventListener('click', () => {
document.querySelector('.navigationBar').classList.toggle('change');
});Output:
Conclusion
Hamburger Menu is used for displaying the content by clicking on the triple equals icon and hiding the content by the wrong symbol on the left-hand side. It is useful for all types of screen sizes.