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 a responsive bottom navigation menu with CSS and JavaScript?
In this article we are going to discuss how to create a responsive bottom navigation menu with CSS and JavaScript.
Usually once you create a web page, when you alter the size of the page, some of the contents of the page will be hidden. A responsive page is the one which adjusts the contents of the page as we change the dimensions of the page.
To create a responsive navigation menu, we have to use CSS and JavaScript. The responsive menu resizes the browser menu to see how the navigation menu works on small and mobile−size displays.
In short in a responsive page the behavior is altered on different devices and screen widths.
Let’s see an example of responsive button navigation.
Example.html
Create an HTML file in which we will define the structure (view) of the page. In this example Using the HTML code we are creating the current page with required text, a bottom navigation menu and empty navigation Links for the menu.
<body>
<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);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Bottom Navigation </h2>
<p>Resize the browser window to see how it works.</p>
</div>
Example.css
Add css style to give background and hover effect on the bottom navigation menu bar for a better look. In this example we are styling the bottom navigation menu if we change the dimenstion of the page, then the menu will visible in the vertical direction.
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: rgb(124, 121, 121);
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: rgb(214, 39, 39);
color: black;
}
.navbar a.active {
background-color: #045faa;
color: white;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive .icon {
position: absolute;
right: 0;
bottom: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
Example.js
Using JavaScript, we can perform validation and handle event on the page. In this example we are adding active class. If you changing the dimesion of the page, then we are adding a menu bar button to open and close the bottom navigation menu. For this purpose, we can use the listener which will capture the mouse-click action.
<script>
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
Complete Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: rgb(124, 121, 121);
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: rgb(214, 39, 39);
color: black;
}
.navbar a.active {
background-color: #045faa;
color: white;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive .icon {
position: absolute;
right: 0;
bottom: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<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);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Bottom Navigation </h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
</body>
</html>
932 Views
