HOME
          About US
          Contact Us

Menu Bars

Chapter - 25 : Navigation Bar / Menu Bars: (Page 1/4)


Navigation Bars is one of the important feature in a web page. Navigation bar is nothing but the list of links placed in a systematic manner to facilitate the visitor to move comfortable among various web sites / pages. A good navigation bar is important for any web site.

A navigational bar is basically made from the 'unordered List'. There are mainly two types of navigational bar i.e. Vertical and Horizontal.

Please note that the command in the HTML file will remain the same and just by changing the command we will change the look of navigational bar.


25.1- Vertical Bar: A simple navigational bar can be made by following command

Command: (in HTML file): <ul>
<li><a href='home.html'>Home</a></li>
<li><a href='contact.html'>Contact Us</a></li>
<li><a href='about.html'>About Us</a></li>
</ul>

Output:
Now as click on any item, you will move to that page.
This command works fine, but it will look list a list rather than a navigational bar. Therefore lets remove the bullets and add some background color. Add following line in 'style sheet' and see the out put

Command: ul {list-style-type:none; margin:0; padding:0;}
li {background-color:yellow; width:200px;}

Output:
Menu Bars
Remember that we are only making change in 'style sheet i.e. style.css file.

(Cont......... to next page (Pg-2))

Menu Bars © funandhobby.com (Menu Bars)