Css Navigation bar
The link of multiple web pages is given in the navigation bar, the website is a collection of many web pages, linking these web pages to the text / image displayed in the navigation bar, so that with the help of the user navigation bar, all web pages of the website Can be visited, so there is a navigation bar in all websites.
Navigation bar is created with the help of Css and it can be displayed vertically and horizontally in the web page.
Vertical Navigation bar
Step 1 : -
Use the <a> tag with the un ordered list to create a navigation bar.
Example 1
|
<!DOCTYPE html> <html> <body> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">PHP</a></li> </ul> </body> </html> |
Output
Step 2 : -
Example 2
|
<!DOCTYPE html> <html> <body> <ul style="list-style-type: none;"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">PHP</a></li> </ul> </body> </html> |
Output
Step 3: - Remove the underline of the link and apply the color in the background.
Example 3
|
<!DOCTYPE html> <html> <head> <style> li a { background-color: hotpink; text-decoration: none; } ul { list-style-type: none; } </style> </head> <body> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">PHP</a></li> </ul> </body> </html> |
Output
Step 4
Using Display block , margin, padding , hover etc..
Example 4
|
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; width: 150px; background-color: lightgray; } li a { display: block; padding: 10px 15px; text-decoration: none; } li a:hover { background-color: lightgreen; color: white; } </style> </head> <body> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">PHP</a></li> </ul> </body> </html> |
Output
step 5 - Link active state
Active/Current Navigation Link
Example 5
|
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; width: 150px; background-color: lightgray; } li a { display: block; padding: 10px 15px; text-decoration: none; } li a.active { background-color: springgreen; color: white; } li a:hover:not(.active) { background-color:lightgreen; color: white; } </style> </head> <body> <ul> <li><a class="active" href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">PHP</a></li> </ul> </body> </html> |
Output
2 css Horizontal Navigation Bar
You can create a Horizontal navigation bar with inline and float value.
Example 6
|
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: lightgray; } at the { float: left; } li a { display: block; text-align: center; padding: 16px 18px; text-decoration: none; } li a:hover { background-color: green; color: white; } </style> </head> <body> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">PHP</a></li> </ul> </body> </html> |
Output
Dropdown menu
The sub menu of a menu in the navigation bar is called the dropdown menu.
Example 7
|
<!DOCTYPE html> <html> <head> <style> .dbtn{ background-color: red; padding: 13px; font-size: 18px; } .ddown { position: relative; } .ddown-con { display: none; position: absolute; background-color: hotpink; width: 175px; z-index: 1; } .ddown-con a { padding: 16px 16px; text-decoration: none; display: block; } .ddown-con a:hover {background-color: springgreen} .ddown: hover .ddown-con { display: block; } .ddown: hover .dbtn { background-color: green; } </style> </head> <body> <div class="ddown"> <button class="dbtn">Web development</button> <div class="ddown-con"> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">Javascript</a> <a href="#">PHP</a> </div> </div> </body> </html> |
Output
Example 8
|
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: springgreen; } at the { float: left; } li a, .dbtn { display: inline-block; color: white; text-align: center; padding: 16px 16px; text-decoration: none; } li a:hover, .ddown:hover .dbtn { background-color: red; } li.ddown { display: inline-block; } .ddown-con { display: none; position: absolute; background-color: springgreen; width: 148px; z-index: 1; } .ddown-con a { padding: 16px 16px; text-decoration: none; display: block; text-align: left; } .ddown-con a:hover {background-color:hotpink} .ddown: hover .ddown-con { display: block; } </style> </head> <body> <ul> <li><a href="#">C</a></li> <li><a href="#">C++</a></li> <li class="ddown"> <a href="#" class="dbtn">Web development</a> <div class="ddown-con"> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">Javascript</a> <a href="#">PHP</a> </div> </li> </ul> </body> </html> |
Output
