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 a responsive bottom navigation menu with CSS and JavaScript?
In this article we will create a responsive bottom navigation menu using CSS and JavaScript. A responsive bottom navigation adapts to different screen sizes and provides mobile-friendly navigation.
A responsive navigation menu adjusts its layout and behavior based on the viewport size. On larger screens, it displays all menu items horizontally. On smaller screens, it collapses into a hamburger menu to save space.
HTML Structure
First, let's create the HTML structure for our bottom navigation menu:
<div class="navbar" id="myNavbar"> <a href="#home" class="active">Home</a> <a href="#tutorials">Tutorials</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()">?</a> </div> <div class="content"> <h2>Responsive Bottom Navigation</h2> <p>Resize the browser window to see how it works.</p> </div>
CSS Styling
The CSS handles the responsive behavior using media queries and positions the navigation at the bottom:
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 60px; /* Space for fixed bottom nav */
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #555;
}
.navbar a.active {
background-color: #04AA6D;
}
.navbar .icon {
display: none;
}
/* Mobile styles */
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
.content {
padding: 16px;
text-align: center;
margin-top: 50px;
}
</style>
JavaScript Functionality
The JavaScript toggles the responsive class to show/hide menu items on mobile devices:
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (navbar.className === "navbar") {
navbar.className += " responsive";
} else {
navbar.className = "navbar";
}
}
Complete Working Example
<!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>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 60px;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #555;
}
.navbar a.active {
background-color: #04AA6D;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
.content {
padding: 20px;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="content">
<h1>Responsive Bottom Navigation Demo</h1>
<p>This page demonstrates a responsive bottom navigation menu.</p>
<p>Try resizing your browser window or viewing on mobile to see the responsive behavior.</p>
</div>
<div class="navbar" id="myNavbar">
<a href="#home" class="active">Home</a>
<a href="#tutorials">Tutorials</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">?</a>
</div>
<script>
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (navbar.className === "navbar") {
navbar.className += " responsive";
} else {
navbar.className = "navbar";
}
}
</script>
</body>
</html>
How It Works
The navigation menu uses CSS media queries to detect screen size. On screens wider than 600px, all menu items are visible horizontally. On smaller screens, only the active item and hamburger menu icon are shown. Clicking the hamburger icon toggles the visibility of other menu items.
Key Features
- Fixed positioning: The menu stays at the bottom of the viewport
- Responsive design: Adapts to different screen sizes automatically
- Touch-friendly: Large tap targets for mobile devices
- Smooth transitions: CSS transitions provide visual feedback
Conclusion
This responsive bottom navigation menu provides an excellent user experience across all devices. The combination of CSS media queries and JavaScript creates a smooth, mobile-friendly navigation solution that's perfect for modern web applications.
1K+ Views
