Rollover Alternating Menus

JavaScriptSource Staff Apr 8, 2005

This script displays a different set of sublinks when you mouseover each title link.

The JavaScript Source: Navigation: Rollover Alternating Menus

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 ROLLOVER ALTERNATING MENUS:

1.  Copy the coding into the HEAD of your HTML document

2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

<!--

// 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] = "navigation/index";

linx[1][2] = "page/index";

linx[1][3] = "forms/index";

linx[1][4] = "miscellaneous/index";

linx[1][5] = "games/index";

linx[2] = new Array(); //Second set of Links for next top level category

linx[2][1] = "new/dec-04new/index";

linx[2][2] = "new/jan-05";

linx[2][3] = "new/feb-05";

linx[2][4] = "new/mar-05";

linx[2][5] = "new/index";

linx[3] = new Array(); //Third set of Links for the last top level category

linx[3][1] = "generators/index";

linx[3][2] = "scrolls/index";

linx[3][3] = "user-details/index";

linx[3][4] = "css/index";

linx[3][5] = "master-list/index";

//This is the function populates the first set of buttons ...

function rollover1() {

document.menu.nav1.value = "Navigation";

document.menu.nav2.value = "Page Details";

document.menu.nav3.value = "Forms";

document.menu.nav4.value = "Miscellaneous";

document.menu.nav5.value = "Games";

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 = "Dec 2004";

document.menu.nav2.value = "Jan 2005";

document.menu.nav3.value = "Feb 2005";

document.menu.nav4.value = "Mar 2005";

document.menu.nav5.value = "Apr 2005";

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 = "Generators";

document.menu.nav2.value = "Scrolls";

document.menu.nav3.value = "User Details";

document.menu.nav4.value = "CSS";

document.menu.nav5.value = "MasterList";

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.javascriptsource.com/"+temp2+".html";

}

//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 = "            ";

}

-->

</script>

</HEAD>

<BODY>

<a href="test1.htm" onmouseover="rollover1()">Scripts</a> |

<a href="test2.htm" onmouseover="rollover2()">New Scripts</a> |

<a href="test3.htm" onmouseover="rollover3()">Dev. Tools</a> |

</form>

</div>

<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

Rollover Alternating Menus

Leave a Response

Attention JavaScript Coders

Go Deeper