Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Hamburger Menu for mobile devices?
The hamburger menu icon has three vertical bars, which the navbar uses to expand and collapse the menu on mobile and tablet devices. This tutorial will teach us to create a hamburger menu from scratch.
Here, we will use HTML, CSS, JavaScript, and Bootstrap to create a stylish hamburger menu with a navbar.
Steps
Users can follow the steps below to create a navbar with a hamburger menu icon.
Step 1 − Create a div with a container class containing a navbar and an expandable menu.
Step 2 − After that, create a div with a header class inside the container class which should contain a div with menu_icon and another with text.
Step 3 − In the menu icon div, create three empty divs and style them accordingly, like the hamburger menu.
Step 4 − Style the expandable menu and its elements using CSS.
Step 5 − Now, access the menu_icon div by id in JavaScript and add a click event listener.
Step 6 − In the click event listener, toggle the display of the expandable menu when the user clicks the hamburger menu icon.
Example
In the example below, we have used pure HTML, CSS, and JavaScript to create a hamburger menu from scratch. Also, we have given background colour and different styles to the menu icon and expandable menu div.
In the output, users can observe that when they click on the menu icon, the div with the menu item appears, and when they click again, it disappears.
<html>
<head>
<style>
.container {
width: 100%;
}
.navbar {
width: 100%;
height: 3rem;
background-color: aqua;
border-radius: 12px;
padding: 5px 10px;
align-items: center;
display: flex;
}
.header {
display: flex;
flex-direction: row;
width: 100%;
}
.menu_icon {
position: absolute;
width: 100%;
cursor: pointer;
}
.text {
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.menu_icon div {
width: 35px;
height: 5px;
background-color: black;
margin: 8px 0;
}
.menu_items {
display: flex;
flex-direction: column;
font-size: 1.2rem;
text-decoration: none;
height: 10rem;
background-color: blue;
border-radius: 12px;
margin-top: 0.5rem;
}
.menu_items a {
padding: 5px;
color: white;
cursor: pointer;
}
.menu_items a:hover {
background-color: grey;
}
</style>
</head>
<body>
<div class = "container">
<div class = "navbar">
<div class = "header">
<div class = "menu_icon" id = "ham_burger">
<div> </div>
<div> </div>
<div> </div>
</div>
<div class = "text"> Logo </div>
</div>
</div>
<div class = "menu_items" id = "menu_items">
<a href = "link1"> Link 1 </a>
<a href = "link2"> Link 2 </a>
<a href = "link3"> Link 3 </a>
<a href = "link4"> Link 4 </a>
<a href = "link5"> Link 5 </a>
</div>
</div>
<h2> Creating the hamburger menu using HTML, CSS, and JavaScript. </h2>
</body>
<script>
let menu = document.getElementById('ham_burger');
let items = document.getElementById('menu_items');
menu.addEventListener('click', () => {
if (items.style.display != "none") {
items.style.display = "none";
} else {
items.style.display = "flex";
}
})
</script>
</html>
Example
In the example below, we have used bootstrap to style the Navbar and hamburger menu icons. Users can see that we have imported the Bootstrap in the below code via CDN and added it into the head section.
Users can easily change the style of the navbar by changing the bootstrap classes in the HTML. Also, we have implemented the JavaScript to toggle the expandable menu as we have done in the first example.
<html>
<head>
<style>
.fa-1x {
font-size: 1.5rem;
}
.navbar-toggler.toggler-example {
cursor: pointer;
}
.dark-blue-text {
color: #0A38F5;
}
</style>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel = "stylesheet" />
<link href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel = "stylesheet" />
<link href = "https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.css" rel = "stylesheet" />
</head>
<body>
<nav class = "navbar navbar-light light-blue lighten-4">
<a class = "navbar-brand" href = "#">Menu</a>
<button class = "dark-blue-text toggler-example" type = "button" id = "toggle"> <span class="dark-blue-text"> <i
Class = "fas fa-bars fa-1x"> </i> </span> </button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent1">
<ul class = "navbar-nav mr-auto">
<li class = "nav-item active">
<a class = "nav-link" href="#">Item 1 <span class = "sr-only"> (current) </span> </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Item 2 </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Item 3 </a>
</li>
</ul>
</div>
</nav>
<h2> Creating the hamburger menu icon using Bootstrap.</h2>
</body>
<script>
let item = document.getElementById('navbarSupportedContent1');
let button = document.getElementById('toggle');
button.addEventListener('click', () => {
if (item.style.display != "block") {
item.style.display = "block";
} else {
item.style.display = "none";
}
})
</script>
</html>
In this tutorial, we learned to create a hamburger menu with a navbar for mobile devices. In the first example, we haven’t used any library to create a hamburger menu, and even we have created a menu icon using HTML, CSS, and JavaScript.
In the second example, we have used Bootstrap via CDN to give styles to the navbar. However, users can customize the style of the Bootstrap navbar according to their requirements, and for that, users can read the documentation of Bootstrap.
831 Views
