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 bottom navigation menu with CSS?
To create a bottom navigation menu, set the nav element with the bottom and position properties. The position property is set to fixed and the bottom is set to 0px. The bottom navigation menu looks like the following on a web page. The menu is placed is fixed in the bottom as shown below −
Create a Navigation Menu
First, set the navigation menu with some menus −
<nav> <a class="links selected" href="#"> Home</a> <a class="links" href="#"> Login</a> <a class="links" href="#"> Register</a> <a class="links" href="#"> Contact Us</a> <a class="links" href="#">More Info</a> </nav>
Style the Navigation Menu
The navigation menu is styled to appear in the bottom with the bottom and position CSS properties −
nav{
position: fixed;
bottom: 0;
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
Style the Menu Links
The menu links are set with the display property inline-block. It displays an element as an inline-level block container. Rest, the text of the links are styles with the text-decoration, font-size, and color properties −
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
Link Hover Color
The link hover is set with the :hover selector −
.links:hover {
background-color: rgb(100, 100, 100);
}
Style the Default Selected Link
The default link selected is also styled. It is the Home page −
.selected{
background-color: rgb(0, 18, 43);
}
Create a Bottom Navigation Menu
Example
Let us see how to create a bottom navigation menu −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:0px;
margin-top:10px;
padding: 0px;
}
nav{
position: fixed;
bottom: 0;
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
.selected{
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<h2>Bottom navigation menu</h2>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</body>
</html>
950 Views
