CSS Navigation
A navigation bar is a section of a graphical user interface (GUI) that helps users navigate through a website, app, or other software. It is essential for users to quickly and easily navigate to the content they are looking for.
The navigation bar can be horizontal or vertical, that contains links to important pages or features. Navbars can also contain other elements, such as the logo of the website or app, search bar, or social media icons. Navbars can be styled using CSS to change their appearance.
Horizontal NavBar
<html><head>
<title>CSS</title>
<style>
ul
{
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: lightgray;
}
li
{
float:left;
}
li a
{
display: block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active
{
background-color: gray;
color: white;
}
li a:hover
{
background-color: orange;
color: white;
}
</style>
</head>
<body>
<ul>
<li> <a class="active" href="#home">HOME </a> </li>
<li> <a href="#">Java </a> </li>
<li> <a href="#">Python </a> </li>
<li> <a href="#">HTML </a> </li>
<li> <a href="#">C++ </a> </li>
</ul>
</body>
</html>
Vertical Navigation Bar
<html><head>
<title>CSS</title>
<style>
ul
{
list-style-type: none;
margin: 0;
padding: 0px;
width: 200px;
background-color: lightgray;
}
li a
{
display: block;
color: blue;
font-size:20px;
padding: 8px 16px;
text-decoration: none;
}
.active
{
background-color: gray;
color: white;
}
li a:hover
{
background-color: orange;
color: white;
}
</style>
</head>
<body>
<ul>
<li> <a class="active" href="#home">HOME </a> </l1>
<li> <a href="#">Java </a> </l1>
<li> <a href="#">Python </a> </l1>
<li> <a href="#">HTML </a> </l1>
<li> <a href="#">C++ </a> </l1>
</ul>
</body>
</html>