...

View Full Version : How to build a javascript show / hide submenu



tempest4000
01-20-2009, 11:52 AM
Hi,

Im new to javascript and want to have a submenu show when a link on the main menu is rolled over. I have got this woking no problem using the mouseover mouseout, however, I cannot select links from the submenu as the submenu mousesout before I can get to it!

How do I solve this?


function subMenu(show) {
if (show){
document.getElementById('sub_menu').style.display = 'block';
} else {
document.getElementById('sub_menu').style.display = 'none';
}
}
Thanks

abduraooft
01-20-2009, 12:02 PM
Could you post a link? or post your complete html+CSS+javascript code

tempest4000
01-20-2009, 12:26 PM
The javscript function is as above and the rest of the code is below:


<div class="top_menu">
<a href="index.html">Home</a>&nbsp;&nbsp; |&nbsp;&nbsp;
<a href="link.html" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">SubmenuLink</a>&nbsp;&nbsp; |&nbsp;&nbsp;
<a href="link.html">other Link 1</a>&nbsp;&nbsp; |&nbsp;&nbsp;
<a href="link.html">other link 2</a>&nbsp;&nbsp; |&nbsp;&nbsp;
</div>
<div style="display:none" id="sub_menu">
<a href="link.html">sub 1</a>&nbsp;&nbsp; |&nbsp;&nbsp;
<a href="link.html">sub2</a>&nbsp;&nbsp; |&nbsp;&nbsp;
</div>

thanks

adrianmadaras
03-18-2009, 07:34 PM
Well my friend, I found your code very simple and usefull, so I will give you an answer to your problem: first of all you activate the "sub_menu" with onmouseover and then you want to select from another div a submenu, you have to consider that you are out of first div and you give the command onmouseout to hide the div with link. You have to put div's closer together in order to not be hided by onmouseout.
So to solve the problem you have to do the sam with the second div, to activate it on onmouseover! Get it?! :thumbsup:

The entire code is:


<script language="javascript" type="text/javascript">
function subMenu(show) {
if (show){
document.getElementById('sub_menu').style.display = 'block';
} else {
document.getElementById('sub_menu').style.display = 'none';
}
}
</script>

<div class="top_menu">
<a href="index.html">Home</a>&nbsp;&nbsp; |&nbsp;&nbsp;
<a href="link.html" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">SubmenuLink</a>&nbsp;&nbsp; |&nbsp;&nbsp;
<a href="link.html">other Link 1</a>&nbsp;&nbsp; |&nbsp;&nbsp;
<a href="link.html">other link 2</a>&nbsp;&nbsp; |&nbsp;&nbsp;
</div>
<div style="display:none" id="sub_menu" onmouseover="javascript:subMenu(true);" onmouseout="javascript:subMenu(false);">
<a href="link.html">sub 1</a>&nbsp;&nbsp; |&nbsp;&nbsp;
<a href="link.html">sub2</a>&nbsp;&nbsp; |&nbsp;&nbsp;
</div>
Thanks for this code!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum