ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

18-CSS Navigation Bar

Here you will study about the CSS Navigation Bar which you almost see on every web page nowadays.It is actually the bars where all the important details are provided by the just name of the topic in a horizontal or vertical manner.

Two types of bar are:

Horizontal Bar

Vertical Bar

 

I have presented the codes for both types of bars.

Example of Vertical Bar:

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.     list-style-type: none;
  7.     margin: 0;
  8.     padding: 0;
  9.     width: 180px;
  10.     background-color: red;
  11. }
  12.  
  13. li a {
  14.     display: block;
  15.     color: #000;
  16.     padding: 10px 0 10px 18px;
  17.     text-decoration: none;
  18. }
  19.  
  20. li a.active {
  21.     background-color: orange;
  22.     color: white;
  23. }
  24.  
  25. li a:hover:not(.active) {
  26.     background-color: yellow;
  27.     color: white;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32.  
  33. <h2>Vertical Navigation Bar</h2>
  34. <p>Below is the vertical  bar presented with the local links .
  35. <ul>
  36.   <li><a class="active" href="#home">Home</a></li>
  37.   <li><a href="#location">Location</a></li>
  38.   <li><a href="#contact information">Contact information</a></li>
  39.   <li><a href="#aboutus">AboutUs</a></li>
  40. </ul>
  41.  
  42. </body>
  43. </html>

Example of Horizontal Bar:

 

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.     list-style-type: none;
  7.     margin: 0;
  8.     padding: 0;
  9.     overflow: hidden;
  10.     background-color: black;
  11. }
  12.  
  13. li {
  14.     float: left;
  15. }
  16.  
  17. li a {
  18.     display: inline-block;
  19.     color: white;
  20.     text-align: center;
  21.     padding: 16px 18px;
  22.     text-decoration: none;
  23. }
  24.  
  25. li a:hover {
  26.     background-color: green;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31.  
  32. <ul>
  33.   <li><a class="active" href="#home">Home</a></li>
  34.   <li><a href="#Location">Location</a></li>
  35.   <li><a href="#contact information">Contact information</a></li>
  36.   <li><a href="#aboutus">AboutUs</a></li>
  37. </ul>
  38.  
  39. </body>
  40. </html>
Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!