How to create a Responsive Bottom Navigation Menu with CSS and JavaScript.
Last Updated :
24 May, 2024
Improve
A responsive bottom navigation menu provides mobile-friendly access to important links. We will see how to create a responsive bottom navigation menu that adjusts to different screen widths. The menu will include elements like Home, Contact, and About. When viewed on a smaller screen, a hamburger menu appears, and clicking it displays the navigation options vertically.
Approach
- Create a basic HTML structure with navigation links and a hamburger menu icon.
- Create a CSS file to style the navigation menu.
- Create a JavaScript file to handle the toggle functionality for the hamburger menu.
- Ensure that the navigation items appear horizontally on bigger screens and vertically when the hamburger menu is engaged on smaller screens.
- Test the navigation menu on various screen sizes to ensure responsiveness.
Example: The example below shows how to create a responsive bottom navigation menu with CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Responsive Bottom Navigation</title>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<div class="nav-container">
<div class="hamburger">
☰
</div>
<ul class="nav-items">
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.nav-container {
position: fixed;
bottom: 0;
width: 100%;
background-color: #333;
}
.nav-items {
display: flex;
justify-content: space-around;
list-style: none;
margin: 0;
padding: 10px 0;
}
.nav-items li {
color: white;
}
.nav-items li a {
color: white;
text-decoration: none;
}
.hamburger {
display: none;
font-size: 30px;
color: white;
padding: 10px;
cursor: pointer;
}
@media (max-width: 600px) {
.nav-items {
display: none;
flex-direction: column;
background-color: #333;
}
.nav-items.active {
display: flex;
}
.hamburger {
display: block;
text-align: center;
}
}
const hamburger = document.querySelector('.hamburger');
const navItems = document.querySelector('.nav-items');
hamburger.addEventListener('click', () => {
navItems.classList.toggle('active');
});
Output:
