Uncle Jims Web Designs: Tabular Navigation

Uncle Jim's Web Designs

Tabular Navigation Menu
Author: Jim Stiles

This script will put a tabular navigation tool on your site. It has 5 tabs that are different colors. Clicking the tabs will bring that same colored palette to the top. Works in FireFox, IE, Netscape 6, and Opera.

To see our other listings, click on one of the tabs to the right.

Link 1
Link 2
Link 3
Link 4
Link 5

Image file for display

Forth palette blah blah blah yada yada yada adfadf adf adf.

Fifth palette, how many can you have?

unlimited.

| Navigation Tab

| OPERATIONS

| SUPPORT

| EVENTS

| SITE SEARCH

INSTALLATION INSTRUCTIONS

COPY - Insert Between Head Tags: <HEAD></HEAD>

<script type="text/javascript"><!--
//   ##############  SIMPLE  BROWSER SNIFFER
if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match(/gecko/)) {navigator.family = "gecko"}
if (window.navigator.userAgent.toLowerCase().indexOf('opera') != -1) {navigator.family	= 'opera';}
toplevel="4";

function riseup (box) {
toplevel++;
if (navigator.family == "ie4")
	{document.all[box].style.zIndex = toplevel;}
if (navigator.family == "opera" || navigator.family == "gecko")
 	{document.getElementById(box).style.zIndex = toplevel;}
}
//--></script>
<div id="box1"	style="position:absolute; background-color:#00ffff; padding:5; visibility:show; left:10px; top:200px; width:150; height:120; z-index:4">To see our other listings, click on one of the tabs to the right.</div>
<div id="box2" 	style="position:absolute; background-color:#add8e6; padding:5; visibility:show; left:10px; top:200px; width:150; height:120; z-index:3">
<a href="http://jdstiles.com">Link 1</a><br>
<a href="http://jdstiles.com">Link 2</a><br>
<a href="http://jdstiles.com">Link 3</a><br>
<a href="http://jdstiles.com">Link 4</a><br>
<a href="http://">Link 5</a><br></div>
<div id="box3" style="position:absolute; background-color:#6495ed; padding:5; visibility:show; left:10px; top:200px; width:150; height:120; z-index:1"><a href="http://jdstiles.com/"><img src="http://jdstiles.com/images/rmouse.gif" border=0></a><br>Image file for display</div>
<div id="box4"	style="position:absolute; background-color:#4682b4; padding:5; visibility:show; left:10px; top:200px; width:150; height:120; z-index:1">Forth palette blah blah blah yada yada yada adfadf adf adf.
</div>
<div id="box5"	style="position:absolute; background-color:#0000ff; padding:5; visibility:show; left:10px; top:200px; width:150; height:120; z-index:1">Fifth palette, how many can you have? <br><br> unlimited.
</div>
<div id="tab1"	onclick="javascript:riseup('box1');" style="cursor:hand; position:absolute; background-color:#00ffff; visibility:show; left:160px;  top:200px; width:120; height:20; z-index:3">
<b> | Navigation Tab</b></div>
<div id="tab2"	onclick="javascript:riseup('box2');" style="cursor:hand; position:absolute; background-color:#add8e6; visibility:show; left:160px;  top:225px; width:120; height:20; z-index:3">
<b> | OPERATIONS</b></div>
<div id="tab3"	onclick="javascript:riseup('box3');" style="cursor:hand; position:absolute; background-color:#6495ed; visibility:show; left:160px;  top:250px; width:120; height:20; z-index:3">
<b> | SUPPORT</b></div>
<div id="tab4"	onclick="javascript:riseup('box4');" style="cursor:hand; position:absolute; background-color:#4682b4; visibility:show; left:160px;  top:275px; width:120; height:20; z-index:3">
<b> | EVENTS</b></div>
<div id="tab5"	onclick="javascript:riseup('box5');" style="cursor:hand; position:absolute; background-color:#0000ff; visibility:show; left:160px;  top:300px;width:120; height:20; z-index:3">
<b> | SITE SEARCH</b></div>

<script type="text/javascript"></script>

Close This Window