18-CSS Navigation Bar

0
39

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
(Visited 47 times, 1 visits today)
SHARE
Previous article17-CSS Multi-Background Property
Next article19-CSS Rounded Corners
Hello Itsourcecoders, welcome to itsourcecode.com. I'm Joken Villanueva, MIT a passionate Blogger, Programmer and a Hobbyist. I started Itsourcecode because I wanted to give back and Share all the learnings and knowledge I've learned in my career and I believe through this website I would be able to help and assist those newbie programmers in enhancing their skills from different programming languages. So let us all help each other by sharing our ideas!

LEAVE A REPLY

Please enter your comment!
Please enter your name here