HOME
            About US
            Contact Us
            Fun Games

Menu Bars
Menu BarsMenu 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:

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

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

© funandhobby.com (Menu Bars)