EDUCBA

Home Software Development Software Development Tutorials JavaScript Tutorial Hamburger Menu JavaScript

Hamburger Menu JavaScript

Priya Pedamkar
Article byPriya Pedamkar

Updated March 27, 2023

Hamburger Menu JavaScript

 

 

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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:

hamburger menu in javascript

hamburger menu in javascript 2

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:

hamburger menu in javascript 3

Vertical Menu with Buttons.

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:

with Logo

hamburger menu in javascript 6

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.

Recommended Articles

This is a guide to the Hamburger Menu JavaScript. Here we discuss the introduction, examples and how does it work in JavaScript? You may also have a look at the following articles to learn more –

  1. JavaScript Iterate Array
  2. Reverse String in JavaScript
  3. JavaScript prompt
  4. trim() Function in JavaScript
quiz