Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to build a javascript show / hide submenu

    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?

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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Could you post a link? or post your complete html+CSS+javascript code
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The javscript function is as above and the rest of the code is below:

    Code:
    <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

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Solutions and explanations

    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?!

    The entire code is:

    Code:
    <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!
    Last edited by adrianmadaras; 03-18-2009 at 09:15 PM. Reason: correction


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •