CSS3 Navigation bar

Navigation bars are used to show links in some specific sequence and specific place.For a web page, navigation bars should be easy to use and also should be attractive for users.By applying some styling on html lists here are some examples of basic navigation bars.

A simple navigation bar

This is simple navigation bar. There is not any styling property is applied on it.It is simply unordered list,and there are some links in the lists.

<ul>
<li><a href="#"> Home </a> </li>
<li><a href="#"> Pages </a> </li>
<li><a href="#"> About </a> </li>
<li><a href="#"> Courses </a> </li>
<li><a href="#"> Contact </a> </li>
</ul>


Vertical Navigation Bar

This is an example of vertical navigation bar. Here unordered list is used and some styling properties are applied on it to make it vertical and hover-able.

<style type="text/css">
ul {
list-style-type: none;
padding-left: 0;
width: 250px;
background-color: lightgrey;
}
li a {
color: black;
display: block;
padding: 9px 17px;
text-decoration: none;
}
li a.active {
background-color: #6600cc;
color: white;
}
li a:hover:not(.active) {
background-color: grey;
color: white;
}
</style>

<ul>
<li><a href="#" class="active"> Home </a> </li>
<li><a href="#"> Pages </a> </li>
<li><a href="#"> About </a> </li>
<li><a href="#"> Courses </a> </li>
<li><a href="#"> Contact </a> </li>
</ul>


Horizontal Navigation Bar

This is an example of Horizontal Navigation Bar. Here unordered list is used and some styling properties are applied on it to make it Horizontal and hover-able.

<style type="text/css">
ul {
list-style-type: none;
padding: 0;
overflow: auto;
background-color: lightgrey;
}
ul li {
float: left;
}
ul li a {
display: block;
color: black;
text-align: center;
padding: 13px 15px;
text-decoration: none;
}
ul li a:hover:not(.active) {
background-color: grey;
color: white;
}
ul li a.active {
color: white;
background-color: #6600cc;
}
</style>

<ul>
<li><a href="#" class="active"> Home </a> </li>
<li><a href="#"> Pages </a> </li>
<li><a href="#"> About </a> </li>
</ul>

Output of above code








The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.