Script Categories

Menus and Navigation >>> Navigation Buttons.

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.

Category 1 | Category 2 | Category 3 | Category 4

Add the below code to the <body> section of your page:

<script language="javascript" type="text/javascript">      
/* Visit for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- 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() { = "Link 1"; = "Link 2"; = "Link 3"; = "Link 4"; = "Link 5"; = 1;
x =;
//Function populates the second set of buttons ...
function rollover2() { = "Link A"; = "Link B"; = "Link C"; = "Link D"; = "Link E"; = 2;
x =;
//Function populates the third set of buttons ...
function rollover3() { = "Link Z"; = "Link Y"; = "Link X"; = "Link W"; = "Link V"; = 3;
x =;

//This sends
function go2url(hlink) {
// set temporary variable temp1 to the value of the dummy hidden field
var temp1 =;
// set the temporary variable temp2 to link array
var temp2 = (linx[temp1][hlink]);
// Construct the url for the link to point to
window.location = ""+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++) {[j].value = "            ";
//  End -->
<!--- Note first 2 links do not have dynamic buttons --->
<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">
<!--- the blanks used in the value cater for Netscape that otherwise truncates the labels --->
<INPUT TYPE="button" name="nav1" value="            " onClick="go2url(1)">
TYPE="button" name="nav2" value="            " onClick="go2url(2)">
TYPE="button" name="nav3" value="            " onClick="go2url(3)">
TYPE="button" name="nav4" value="            " onClick="go2url(4)">
TYPE="button" name="nav5" value="            " onClick="go2url(5)">
<!--- this dummy element stores the link structure --->
<INPUT TYPE="hidden" name="dummy" value=""size="3" >

JavaScript Editor Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.

Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).