HOME HTML 5 CSS 3 JAVASCRIPT MySQL PHP Python Pure CSS WordPress MS AD* Linux* Blog Howto Tools Online Editor »

CSS Navigation Bar

Navigation bar is a list of links which helps you to visit a website fully. It consist links of various important webpages of the website. The example below used lists to give a proper formatting to the navbar. You can also use table to make a navbar.

Simple Navigation Bar

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Navbar </title>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Output

CSS Navbar

Vertical Navigation Bar with CSS

Its an example of Navigation bar with background color defined and also display changes in the CSS when mouse moves over it.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Vertical Navbar </title>
<meta charset="UTF-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #1c2b5242 !important;
line-height:
}
li a {
display: block;
color: #000;
padding: 3px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555 !important;
color: white !important;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Output

CSS Vertical Navbar

Active Navigation Bar

A Navigation bar links can be made active by using active class in the links. This styling will be applied to only that link which is currently active, this way a user can know in which page they are on:

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Active Navbar </title>
<meta charset="UTF-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: seagreen;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Output

CSS Active Navbar

Horizontal Navigation bar

It's a horizontal navigation bar with list tags. The <li> has been given float:left;, which will align elements horizontally. It also has an hover effect.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Horizontal Navbar </title>
<meta charset="UTF-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a.active {
background-color: seagreen;
color: white;
}
li a:hover {
background-color: purple;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#more">More</a></li>
</ul>
</body>
</html>

Output

CSS Horizontal Navbar

Dropdown Navbar

Look at the example below to understand how to add a dropdown menu in the navbar and give it a particular CSS styling.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Dropdown Navbar </title>
<meta charset="UTF-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: green;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>

Recommended :
1 .  What are CSS Selector ?
2 .  How to Insert Images in HTML Pages
3 .  What is Wordwrap in CSS ?
4 .  Learn CSS Margin
5 .  How to make tooltip more Interactive using CSS
6 .  CSS 3 Transition
7 .  Photography Snippets using HTML and CSS
8 .  Create Simple Login Form






Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors



Follow Us: