CSS Navigation bar
Navigation-bar is nothing but just the list of links vertically or horizontally which gives a great look to our webpage.
Navigation-bar can create also through <ul> and <li>elements in HTML and styling we can do here
through by CSS only. And this navigation-bar can be in vertical or horizontal position.
Vertical navigation-bar
Here the navigation-bar we can create in vertical position through HTML elements and styling we will give through CSS.
Let's understand this by following program:-
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type:none;
}
li a {
display:block;
width:80px;
background-color:white;
}
</style>
</head>
<body>
<p> Navigation vertically </p>
<ul>
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> NEWS </a> </li>
<li> <a href="#"> CONTACT </a> </li>
<li> <a href="#"> SUPPORT </a> </li>
</ul>
</body>
</html>
Output of the Program
So this is how we can create navigation-bar vertically.
Horizontal navigation-bar
Here the navigation-bar we can create in horizontal position through HTML elements and styling we will give through CSS.
Let's understand this by following program:-
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type:none;
}
li {
display:inline;
background-color:white;
}
</style>
</head>
<body>
<p> Navigation horizontally </p>
<ul>
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> NEWS </a> </li>
<li> <a href="#"> CONTACT </a> </li>
<li> <a href="#"> SUPPORT </a> </li>
</ul>
</body>
</html>
Output of the Program
So this is how we can create navigation-bar horizontally.
