Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 pill navigation menu with CSS?
The Pill navigation menu is used for navigation and enhances user experience. The navigation items are set within it. The <nav> element is used to create a menu and works the same for pill navigation menu as well. Let us see how to create a pill navigation menu on a web page.
Create a pill navigation menu
First, we will create a menu using the <nav> element. The links are set using the <a> element −
<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>
Position the menu
The menu is positioned using the overflow property with the value auto. Also, the height is set to auto −
nav{
width: 100%;
background-color: rgb(255, 251, 251);
overflow: auto;
height: auto;
}
Place the links
The links are placed in the menu using display property. The inline-block will set the links horizontally. The links are generally underlined. To avoid that, use the text-decoration property and set it to none −
.links {
display: inline-block;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
color:black;
}
Hover the link
The hover property is set using the :hover selector. On hover, the background color will change −
.links:hover {
background-color: rgba(129, 129, 129, 0.473);
}
The selected link
The background and text color of the link will change on selection −
.selected{
background-color: rgb(33, 126, 255);
color: rgb(255, 255, 255);
}
Example
The following is the code to create a pill navigation menu with CSS −
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<style>
nav{
width: 100%;
background-color: rgb(255, 251, 251);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
color:black;
}
.links:hover {
background-color: rgba(129, 129, 129, 0.473);
}
.selected{
background-color: rgb(33, 126, 255);
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<h1>Pill navigation example</h1>
<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>
1K+ Views
