MOuseover drop down help

[chugger93]

Im trying to make it so that when u put ur mouse over a hyperlink, a submenu comes down beaneath it with 2 other links. Ive tried some dhtml scripts but cant get them to fit my application.

Is there any simple code I can use for this?


For Example I'll have

Home
Products
Profile
Contact Us


Under products, when ur mouse is put over it, I want two other menues to appear, which will automatically shift other links lower beaneath it, like profile and contact

[RealisticGraphics]

Here is a quick sample. I've only tested it in IE 6. It should work in IE 4.x and above. I don't believe that netscape supports it:

<script language="javascript1.2">
var LastSubMenu = "";
function ShowSubMenu(subMenuName){

if(LastSubMenu != "" && LastSubMenu != subMenuName){
	document.all[LastSubMenu].style.display = "none";
}

LastSubMenu = subMenuName;

document.all[subMenuName].style.display = "block";
}
</script>

<b><a href="" onmouseover="ShowSubMenu('subHome')">Home</a></b><br>
<div style="display: none; background-color: #D6D6D6; width: 250 px;" ID="subHome">
<blockquote>
About Me<br>
About Company
</blockquote>
</div>

<b><a href="" onmouseover="ShowSubMenu('subProducts')">Products</a></b><br>
<div style="display: none; background-color: #D6D6D6; width: 250 px;" ID="subProducts">
<blockquote>
Candy<br>
Games
</blockquote>
</div>

<b><a href="" onmouseover="ShowSubMenu('subProfile')">Profile</a></b><br>
<div style="display: none; background-color: #D6D6D6; width: 250 px;" ID="subProfile">
<blockquote>
Company History<br>
Personal History
</blockquote>
</div>

[chugger93]

thanx alot dude, that is good code that i will use. Very appreciated!!!


also, what if i wanted a timeout on the mouseout? like if the user takes their mouse off the links, then it goes back to normal. Any code for that?

[RealisticGraphics]

No Problem. Here is a crude example with a time out. It should give you a basic idea but I warn you it may be a little buggy.

<script language="javascript1.2">
var LastSubMenu = "";
var CloseUp = 0;

function ShowSubMenu(subMenuName){

if(LastSubMenu != "" && LastSubMenu != subMenuName){
	document.all[LastSubMenu].style.display = "none";
	CloseUp = 0;
}

LastSubMenu = subMenuName;

if(CloseUp != 1) {
	document.all[subMenuName].style.display = "block";
} else {
	document.all[subMenuName].style.display = "none";
	CloseUp = 0;
}
}

function CloseMenu(DoClose){
CloseUp = DoClose;

setTimeout("ShowSubMenu(LastSubMenu)", 500);
}
</script>

<b><a href="" onmouseover="ShowSubMenu('subHome')" onmouseout="CloseMenu(1)">Home</a></b><br>
<div style="display: none; background-color: #D6D6D6; width: 250 px;" ID="subHome" onmouseover="CloseMenu(0)" onmouseout="CloseMenu(1)">
<blockquote>
About Me<br>
About Company
</blockquote>
</div>

<b><a href="" onmouseover="ShowSubMenu('subProducts')" onmouseout="CloseMenu(1)">Products</a></b><br>
<div style="display: none; background-color: #D6D6D6; width: 250 px;" ID="subProducts" onmouseover="CloseMenu(0)" onmouseout="CloseMenu(1)">
<blockquote>
Candy<br>
Games
</blockquote>
</div>

<b><a href="" onmouseover="ShowSubMenu('subProfile')" onmouseout="CloseMenu(1)">Profile</a></b><br>
<div style="display: none; background-color: #D6D6D6; width: 250 px;" ID="subProfile" onmouseover="CloseMenu(0)" onmouseout="CloseMenu(1)">
<blockquote>
Company History<br>
Personal History
</blockquote>
</div>