Navigation Buttons

John Soul Apr 25, 2001

Dynamic navigation menu using a mouseOver of main categories to dynamically generate buttons with appropriate labels and links. This script avoids special rollover graphics, and gets around the limitations of Netscape style sheets. Cool!

Category 1 | Category 2 | Category 3 | Category 4

The JavaScript Source: Navigation: Navigation Buttons

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL NAVIGATION BUTTONS:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

<!-- Begin
// Initiate a new array containing all the navigation hyperlinks that loads on startup
// The 'htm' extension for the link is added by the script

//initialize the variables for indexing data
x=1; //initialize the first variable
y=5; //initialize the variable used to reset the buttons on mouse out
linx = new Array()
linx[1] = new Array(); //First set of links for the top level category
linx[1][1] = "link1";
linx[1][2] = "link2";
linx[1][3] = "link3";
linx[1][4] = "link4";
linx[1][5] = "link5";

linx[2] = new Array(); //Second set of Links for next top level cateogry
linx[2][1] = "linkA";
linx[2][2] = "linkB";
linx[2][3] = "linkC";
linx[2][4] = "linkD";
linx[2][5] = "linkE";

linx[3] = new Array(); //Third set of Links for the last top level cateogry
linx[3][1] = "linkZ";
linx[3][2] = "linkY";
linx[3][3] = "linkX";
linx[3][4] = "linkW";
linx[3][5] = "linkV";

//This is the function populates the first set of buttons ...
function rollover1() {
document.menu.nav1.value = "Link 1";
document.menu.nav2.value = "Link 2";
document.menu.nav3.value = "Link 3";
document.menu.nav4.value = "Link 4";
document.menu.nav5.value = "Link 5";
document.menu.dummy.value = 1;
x = document.menu.dummy.value;
return(x);
}
//Function populates the second set of buttons ...
function rollover2() {
document.menu.nav1.value = "Link A";
document.menu.nav2.value = "Link B";
document.menu.nav3.value = "Link C";
document.menu.nav4.value = "Link D";
document.menu.nav5.value = "Link E";
document.menu.dummy.value = 2;
x = document.menu.dummy.value;
return(x);
}
//Function populates the third set of buttons ...
function rollover3() {
document.menu.nav1.value = "Link Z";
document.menu.nav2.value = "Link Y";
document.menu.nav3.value = "Link X";
document.menu.nav4.value = "Link W";
document.menu.nav5.value = "Link V";
document.menu.dummy.value = 3;
x = document.menu.dummy.value;
return(x);
}

//This sends 
function go2url(hlink) {
// set temporary variable temp1 to the value of the dummy hidden field
var temp1 = document.menu.dummy.value;
// set the temporary variable temp2 to link array
var temp2 = (linx[temp1][hlink]);
// Construct the url for the link to point to
window.location = "http://www.yourdomain.com/"+temp2+".htm";
}

//If there are no lower tier navigation buttons, this function closes the buttons as the mouse moves off the prevoius link to this.
function rollout() {
//
for (var j=0; j<y; j++) {
document.menu.elements[j].value = "            ";
   }
}
//  End -->
</script>

</HEAD>

<BODY>

<div align=center>
<center>

<A HREF="test1.htm" onMouseOver="rollover1()">Category 1</A> |
<A HREF="test2.htm" onMouseOver="rollover2()">Category 2</A> |
<A HREF="test3.htm" onMouseOver="rollover3()">Category 3</A> | 
<A HREF="test4.htm" onMouseOver="rollout()">Category 4</A> 
<FORM NAME="menu">

<INPUT TYPE="button" name="nav1" value="            " onClick="go2url(1)">
<INPUT TYPE="button" name="nav2" value="            " onClick="go2url(2)">
<INPUT TYPE="button" name="nav3" value="            " onClick="go2url(3)">
<INPUT TYPE="button" name="nav4" value="            " onClick="go2url(4)">
<INPUT TYPE="button" name="nav5" value="            " onClick="go2url(5)">

<INPUT TYPE="hidden" name="dummy" value=""size="3" >
</FORM>

<P>
<SCRIPT>
//document.write(linx[1][2])
document.write("<P><SCRI"+"PT LANGUAGE='JavaScript1.2' SRC='../footer.js'></SCR"+"IPT>");
</SCRIPT>
</center>
</div>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Navigation Buttons

Leave a Response

Attention JavaScript Coders

Go Deeper