Home
    Registration
    FAQs
    Terms of service
    Contact us

    Learn ASP
    Databases
    Articles

Simple Navigation Bars W-O-G 3/2/00 Medium Through CSS we can create 2 neat navigation bars. They use <BUTTON> tags and three css rules.

Let's get started. First of all, you can make the bar 2 ways, horizontal and vertical. Let's try the horizontal first. First copy down the code below into the HEAD of your page.
<STYLE>
.butBegin { border-right:0 px;}
.butMiddle { border-left:0px; border-right:0 px;}
.butEnd {  border-left:0 px;}
</STYLE>

Next create three buttons. Give the first button "class=butBegin", second button "class=butMiddle", and finally the 3rd button "class=butEnd".
Example: 
<BUTTON CLASS=butBegingt;Button 1 </BUTTON>
<BUTTON CLASS=butMiddlegt;Button 2 </BUTTON>
<BUTTON CLASS=butBegingt;Button 3 </BUTTON>

This creates:


Nifty huh. Yeah small and simple but good looking. The CSS took out certain borders on the buttons to make them blend together to create a cool navigation bar. Then you can add - onClick="self.location.href='some.html'" - make the buttons point to pages.

Note: for IE5 compatibility you will have to wrap the buttons in a DIV tag width style info: background:buttonface or IE5 will place gaps between buttons

Now you have you have the basics, you can go on to create a vertical bar. Just add <BR>'s after each button, add this style info in the HEAD of your page, and change the names of the classes on the buttons respectivly:
<STYLE>
.VbutBegin { border-bottom:0 px;}
.VbutMiddle { border-top:0px; border-bottom:0 px;}
.VbutEnd {  border-top:0 px;}
</STYLE>



To get rid of the shrink effect when you click on the button add this.blur() to the onClick event like this: onClick="this.blur(); window.location.href='somepage.html'"