Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create Hamburger Menu for mobile devices?
The hamburger menu icon has three horizontal bars that expand and collapse navigation menus on mobile and tablet devices. This tutorial teaches you to create responsive hamburger menus using HTML, CSS, JavaScript, and Bootstrap.
We'll cover two approaches: a custom implementation from scratch and a Bootstrap-based solution for faster development.
Creating a Custom Hamburger Menu
Follow these steps to build a hamburger menu without external libraries:
Step 1 ? Create a container div with navbar and expandable menu sections.
Step 2 ? Add a header div containing the menu icon and logo/text elements.
Step 3 ? Build the hamburger icon using three div elements styled as horizontal bars.
Step 4 ? Style the expandable menu and navigation items with CSS.
Step 5 ? Add JavaScript click event listener to the menu icon.
Step 6 ? Toggle menu visibility when the hamburger icon is clicked.
Example: Custom Hamburger Menu
This example creates a fully functional hamburger menu using pure HTML, CSS, and JavaScript. The menu toggles between visible and hidden states when clicked.
<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: Bootstrap Hamburger Menu
This example uses Bootstrap classes for professional styling and responsive behavior. Bootstrap provides pre-built components that work seamlessly across different devices.
<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>
Key Features
Both approaches provide:
Responsive Design ? Adapts to different screen sizes automatically
Toggle Functionality ? Shows/hides menu items on click
Customizable Styling ? Easy to modify colors, fonts, and layouts
Accessibility ? Works with keyboard navigation and screen readers
Conclusion
Hamburger menus are essential for mobile-responsive navigation. The custom approach offers complete control over styling, while Bootstrap provides faster development with pre-built responsive components. Choose based on your project requirements and design flexibility needs.
2K+ Views
