CSS Navigation Bar
CSS Navigation Bar is a UI element on a web page. It helps visitors navigate between different sections easily. CSS Navigation bar consists of list of links. A navigation bar is mostly displayed on the top of the page in the form of a horizontal list of links.
There are two types of Navigation bars as follows.
- Horizontal Navigation bar: Horizontal Navigation bars are usually placed at the top of the web page.
- Vertical Navigation bar: Vertical Navigation bars are usually placed along the sides of the web page.
To add Navigation Bars, we need to create a list with the links to direct different sections on the website. And then we have to add css properties to change the <li> elements.
Code:-
<html><head><style>ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #666;}li { float: left;}li a { display: block; color: white; text-align: center; padding: 13px 15px; text-decoration: none;}li a:hover:not(.active) { background-color: #112;}.active { background-color: #03AA6D;}</style></head><body><ul> <li><a class="active" href="#main">Main Page</a></li> <li><a href="#second">Second Page</a></li> <li><a href="#third">Third Page</a></li> <li><a href="#fourth">Fourth Page</a></li></ul> <p>This is a vertical navigation bar. Click HTML tab to view the code.</p></body></html>Output:-
Written by: W.A. Eranga Dewmini
No comments:
Post a Comment