|
↑
Menus and Navigation >>>
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">
x=1;
y=5;
linx
=
new
Array()
linx[1]
=
new
Array();
linx[1][1]
=
"link1";
linx[1][2]
=
"link2";
linx[1][3]
=
"link3";
linx[1][4]
=
"link4";
linx[1][5]
=
"link5";
linx[2]
=
new
Array();
linx[2][1]
=
"linkA";
linx[2][2]
=
"linkB";
linx[2][3]
=
"linkC";
linx[2][4]
=
"linkD";
linx[2][5]
=
"linkE";
linx[3]
=
new
Array();
linx[3][1]
=
"linkZ";
linx[3][2]
=
"linkY";
linx[3][3]
=
"linkX";
linx[3][4]
=
"linkW";
linx[3][5]
=
"linkV";
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
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
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);
}
function
go2url(hlink)
{
var
temp1 =
document.menu.dummy.value;
var
temp2 =
(linx[temp1][hlink]);
window.location
=
"http://www.yourdomain.com/"+temp2+".htm";
}
function
rollout()
{
for
(var
j=0;
j<y;
j++)
{
document.menu.elements[j].value
=
" ";
}
}
</script>
<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>
|
→
|