CSS Navigation bar

Home / CSS – Tutorial / CSS Navigation bar

It is easy-to-use navigation is important for any website and it plays an important role in the website.CSS(Cascading Style Sheets) you can transform boring HTML menus into good-looking navigation bars.

horizontal navigational bar :

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
 list-style-type: none;
 margin: 0;
 padding: 0px;
 overflow: hidden;
 background-color: #ffcccc;
}

li {
  float: left;
}

li a {
  display: block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: #99ffcc;
color: white;
}
li a:hover {
  background-color: #ff6699;
  color: white;
}
</style>
</head>
<body>
<h2>horizontal navigational bar </h2>
<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
</ul>

</body>
</html>

OUTPUT:

Border dividers:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
 list-style-type: none;
 margin: 0;
 padding: 0px;
 overflow: hidden;
 background-color: #ffb3d9;
}

li {
  float: left;
   border-right: 1px solid #ff9933;
}

li a {
  display: block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: #cc6666;
color: white;
}
li a:hover {
  background-color: #d279d2;
  color: white;
}
</style>
</head>
<body>
<h2>Border dividers</h2>
<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
</ul>

</body>
</html>

OUTPUT:

Fixed Navigation bars:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
 list-style-type: none;
 position: fixed;
 width:100%;
 top:0;
 margin: 0;
 padding: 0px;
 overflow: hidden;
 background-color: #bbff99;
}

li {
  float: left;
   border-right: 1px solid blue;
}

li a {
  display: block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: #ffccff;
color: white;
}
li a:hover {
  background-color: #ffccdd;
  color: white;
}
</style>
</head>
<body>

<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Fixed Navigation bars</h1>

</body>
</html>

OUTPUT:

Sticky Navbar:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
 list-style-type: none;
 position: sticky;
 width:100%;
 top:0;
 margin: 0;
 padding: 0px;
 overflow: hidden;
 background-color: #00cc99;
}

li {
  float: left;
   border-right: 1px solid #ff9966;
}

li a {
  display: block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: #ffb3d9;
color: white;
}
li a:hover {
  background-color: #ffffb3;
  color: white;
}
</style>
</head>
<body>
<h1>sticky navigation bar</h1>
<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
</ul>
</body>
</html>

OUTPUT:

Dropdown Navbar:

Example:

<!DOCTYPE html>
<html>
<head>
<style>

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #99ff99;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: #ff0066;
color: white;
}
li a:hover , .dropdown:hover .dropbtn{
  background-color: #ffcccc;
  color: white;
}

.dropdown-content {
 display: none;
 position: absolute;
 background-color: #ffb3ff;
 min-width: 160px;
 box-shadow: 5px 8px 10px 0px black;
 }

.dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;
}

.dropdown-content a:hover {
background-color: gray;
color:white;
}

.dropdown:hover .dropdown-content {
 display: block;
}
h1,h2,h3{
text-align:center;
color: green;
}
</style>
</head>
<body>
<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">C</a></li>
 <li><a href="#">C++</a></li>
 <li class="dropdown">
  <a href="#" class="dropbtn">Web-designing</a>
  <div class="dropdown-content">
   <a href="#">HTML</a>
   <a href="#">CSS</a>
   <a href="#">Bootstrap</a>
  </div>
 </li>
</ul>
</body>
</html>

OUTPUT:

Vertical Navigation bar:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 200px;
 background-color: #ff80ff;
}

li a {
  display: block;
  color: white;
  font-size:20px;
  padding: 8px 16px;
  text-decoration: none;
}
.active{
 background-color: #9999ff;
 color: white;
}
li a:hover {
  background-color: #ffb3b3;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
 <li><a href="#" class = "active">Home</a></li>
 <li><a href = "#">Java</a></li>
 <li><a href = "#">CSS</a></li>
 <li><a href = "#">HTML</a></li>
 <li><a href = "#">Bootstrap</a></li>
</ul>

</body>
</html>

OUTPUT:

Full-height fixed Vertical Navbar:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #ff0066;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
height:100%;
top:0;
width:150px;
overflow: auto;
background-color: #ffb3d1;
border: 1px solid blue;
position: fixed;
}
li a {
display: block;
color: white;
font-size:20px;
padding: 10px 20px;
text-decoration: none;
border-bottom: 1px solid blue;
}
.active{
background-color: #ff66ff;
color: white;
}
li a:hover {
background-color: #ccffcc;
color: white;
}
</style>
</head>
<body>

<ul>
<li><a href = "#" class = "active">Home</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">HTML</a></li>
<li><a href = "#">Bootstrap</a></li>
</ul>
</div>
</body>
</html>

OUTPUT: