CSS - Simple Navigation Bars

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'"