Menu Items PopUp Next Menu Row

[Total: 0    Average: 0/5]

This shows how to create a menu that has sub-menus.

Head Code:

<style type=text/css>
#submenu0 {	LEFT: 175px; POSITION: absolute; TOP: 88px; VISIBILITY: hidden; Z-INDEX: 6}
#submenu1 {	LEFT: 175px; POSITION: absolute; TOP: 88px; VISIBILITY: hidden; Z-INDEX: 6}
#submenu2 {	LEFT: 175px; POSITION: absolute; TOP: 88px; VISIBILITY: hidden; Z-INDEX: 6}
#submenu3 {	LEFT: 175px; POSITION: absolute; TOP: 88px; VISIBILITY: hidden; Z-INDEX: 6}
#submenu4 {	LEFT: 175px; POSITION: absolute; TOP: 88px; VISIBILITY: hidden; Z-INDEX: 6}
#submenu5 {	LEFT: 175px; POSITION: absolute; TOP: 88px; VISIBILITY: hidden; Z-INDEX: 6}
#mainmenu {	LEFT: 90px; POSITION: absolute; TOP: 92px; VISIBILITY: visible; Z-INDEX: 6}
</style>
<SCRIPT language=JavaScript>
var nscp = (navigator.appName == "Netscape");

function getObj(obj) {
  if (nscp)
    compLayr = document.layers[obj];
  else
	compLayr = eval("document.all." + obj + ".style");
  return compLayr;
}

function show(layr) {
  obj = getObj(layr);
  obj.visibility = "visible";
}

function hide(layr) {
  obj = getObj(layr);
  obj.visibility = "hidden";
}

function screenWidth() {
  avail = (nscp) ? window.innerWidth : document.body.clientWidth;
  return avail;
}

var menuOff = new Array(6);
var menuOn = new Array(6);

var currentMenuChoice = 0;

function init() {
  checkMenu();
}

function menuRoll(which,status) {
  if (status) {
    currentMenuChoice = which;
    show("submenu" + currentMenuChoice);
  }
}

function checkMenu() {
  for(r=0;r<6;r++)
    if(r != currentMenuChoice) {
      hide("submenu" + r);
    }
  setTimeout("checkMenu()",50);
}

</SCRIPT>

Body Code:

<div id=mainmenu>
<a href="#" onmouseout=menuRoll(0,false) onmouseover=menuRoll(0,true)>zero</a><BR>
<a href="#" onmouseout=menuRoll(1,false) onmouseover=menuRoll(1,true)>one</a><BR>
<a href="#" onmouseout=menuRoll(2,false) onmouseover=menuRoll(2,true)>two</a><BR>
<a href="#" onmouseout=menuRoll(3,false) onmouseover=menuRoll(3,true)>three</a><BR>
<a href="#" onmouseout=menuRoll(4,false) onmouseover=menuRoll(4,true)>four</a><BR>
<a href="#" onmouseout=menuRoll(5,false) onmouseover=menuRoll(5,true)>five</a>
</div>
<DIV id=submenu0>
<A href="#">LINK0-A</A><BR>
<A href="#">LINK0-B</A><BR>
<A href="#">LINK0-C</A><BR>
<A href="#">LINK0-D</A>
</DIV>
<DIV id=submenu1>
<A href="#">LINK1-A</A><BR>
<A href="#">LINK1-B</A><BR>
<A href="#">LINK1-C</A><BR>
<A href="#">LINK1-D</A>
</DIV>
<DIV id=submenu2>
<A href="#">LINK2-A</A><BR>
<A href="#">LINK2-B</A><BR>
<A href="#">LINK2-C</A><BR>
<A href="#">LINK2-D</A>
</DIV>
<DIV id=submenu3>
<A href="#">LINK3-A</A><BR>
<A href="#">LINK3-B</A><BR>
<A href="#">LINK3-C</A><BR>
<A href="#">LINK3-D</A>
</DIV>
<DIV id=submenu4>
<A href="#">LINK4-A</A><BR>
<A href="#">LINK4-B</A><BR>
<A href="#">LINK4-C</A><BR>
<A href="#">LINK4-D</A>
</DIV>
<DIV id=submenu5>
<A href="#">LINK5-A</A><BR>
<A href="#">LINK5-B</A><BR>
<A href="#">LINK5-C</A><BR>
<A href="#">LINK5-D</A>
</DIV>
<a href="javascript:init()">click here to start the menu code</a>
<BR>
Normally you would have the statment onload=init() inside your body tag.
<BR>
It is not done here due to the conflicts it has with this JS-Examples page.

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *