24 - CSS Navigation Bar

And now we will discuss another feature which helps you in styling menus for your web pages. Believe us, it really helps!

Just a sort of memory game for you, small one indeed, Just try to re-collect any website which does not have home, about us, careers, contact us( names may be different, we are talking about different tabs!) tabs on their website.

Tell us how many of such websites you could re-collect? Barely none, isn’t it?

Let’s drive the point home, we would be discussing about how to embed and in fact improve such functionality i.e. navigating to other pages. We can create the same using HTML but using CSS for this purpose definitely revamps your webpage (CSS is all about styling, no?)

The Navigation Bar, in the HTML way

Let us see an example that creates a simple navigation bar:

<html>
   <body>
      <ul>
         <li><a href=”./Home.html”>Home</a></li>
         <li><a href=”./about.html”>About Us</a></li>
         <li><a href=”./jobs.html”>Careers</a></li>
         <li><a href=”./contact.html”>Contact Us</a></li>
      </ul>
   </body>
</html>

The desired output would be:

    

The output is so damn boring. Isn’t it? Who wants such a monotonous look? So, we will see designing it the CSS way.

Navigation bar, the CSS way

To style the navigation bar use CSS , let’s make it look fancy by adding a simple CSS code.

<html>
   <head>
      <style>
         #n_bar{
         List-style: none;
         }
      </style>
   </head>
   <body>
      <ul>
         <li id="n_bar"><a href=”./Home.html”>Home</a></li>
         <li id="n_bar"><a href=”./about.html”>About Us</a></li>
         <li id="n_bar"><a href=”./jobs.html”>Careers</a></li>
         <li id="n_bar"><a href=”./contact.html”>Contact Us</a></li>
      </ul>
   </body>
</html> 

The desired output would be a list of hyperlinks without bullets because we have set list-type to none.

     

This output is not sufficient; this would look better if the list items are aligned on a single line. The following code would give the desired output.

If we set display property to none in the style information for n_bar then the output would be:

     

Let’s add some more styling:

 <html>
   <head>
      <style>
         #n_bar{
         List-style: none;
         margin: 0;
         padding: 0;
         display:inline;
         }
         a{
         width: 15em;
         padding: 0.5em 1em;
         text-decoration: none;
         }
         a:hover{
         text-decoration: underline;
         }
      </style>
   </head>
   <body>
      <ul>
         <li id="n_bar"><a href=”./Home.html”>Home</a></li>
         <li id="n_bar"><a href=”./about.html”>About Us</a></li>
         <li id="n_bar"><a href=”./jobs.html”>Careers</a></li>
         <li id="n_bar"><a href=”./contact.html”>Contact Us</a></li>
      </ul>
   </body>
</html> 

Text-decoration property set to none would remove the underline and the text-decoration property set to underline will get activated when the link is hovered. Padding and width will space the list anchor elements and then the final output of the above program would be:

    

If the display property is set to block, then we would have a vertical navigation bar.

<html>
   <head>
      <style>
         #n_bar{
         List-style: none;
         margin: 0;
         padding: 0;
         }
         a{
         padding: 0.5em 1em;
         text-decoration: none;
         display: block;
         width: 80px;
         background-color: #ddddee;
         }
         a:hover{
         text-decoration: underline;
         }
      </style>
   </head>
   <body>
      <ul>
         <li id="n_bar"><a href=”./Home.html”>Home</a></li>
         <li id="n_bar"><a href=”./about.html”>About Us</a></li>
         <li id="n_bar"><a href=”./jobs.html”>Careers</a></li>
         <li id="n_bar"><a href=”./contact.html”>Contact Us</a></li>
      </ul>
   </body>
</html> 

The output of the above program would be:

   

In the next chapter we will explore more about CSS properties!

 

Like us on Facebook