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
Like Tree3Likes
  • 1 Post By Philip M
  • 1 Post By felgall
  • 1 Post By vwphillips

Thread: Simple dropdown menu script problem. The menu will not stay open.

  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Simple dropdown menu script problem. The menu will not stay open.

    I am trying to learn JavaScript much better and so as an exercise I made this little script but I can't figure out how to keep the dropdown open.

    Code:
    <a href="#"  onmouseover="showmenu()">Menu</a>
    <ul id="dropd" style="display:none;" onmouseout="hidemenu()">
    <li>Menu Item I</li>
    <li>Menu Item II</li>
    <li>Menu Item III</li>
    </ul>
    
    <script>
    function showmenu(){
    document.getElementById("dropd").style = "display:block;"
    }
    </script>
    <script>
    function hidemenu(){
    document.getElementById("dropd").style = "display:none;"
    }
    </script>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by luckydog2011 View Post
    I am trying to learn JavaScript much better and so as an exercise I made this little script but I can't figure out how to keep the dropdown open.

    Code:
    <a href="#"  onmouseover="showmenu()">Menu</a>
    <ul id="dropd" style="display:none;" onmouseout="hidemenu()">
    <li>Menu Item I</li>
    <li>Menu Item II</li>
    <li>Menu Item III</li>
    </ul>
    
    <script>
    function showmenu(){
    document.getElementById("dropd").style = "display:block;"
    }
    </script>
    <script>
    function hidemenu(){
    document.getElementById("dropd").style = "display:none;"
    }
    </script>

    I don't understand what you mean by keep the menu open. Unless you mean delete the hidemenu() function.


    Quizmaster: Handlebar, Fu Manchu and Dali are all types of what?
    Contestant: Martial arts.
    luckydog2011 likes this.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,603
    Thanks
    0
    Thanked 645 Times in 635 Posts
    This is trivially easy to do with CSs without needing any JavaScript (at least as long as you don't need to support people using IE6 - where JavaScript is needed).

    If you are trying to make your JavaScript better then stop jumbling it with the HTML and use event listeners within a separate JavaScript file.

    If you do use JavaScript for a menu like that then it is best if the mouseover and mouseout listeners are both attached to an element wrapped around the entire menu (both the <a> and <ul> tags in your code). With the way you currently have it moving the mouse out of the top of the menu back over the link will try to open and close the menu at the same time.
    luckydog2011 likes this.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <a href="#"  onmouseover="showmenu()">Menu</a>
    <ul id="dropd" style="display:none;" onmouseout="hidemenu()" onmouseover="showmenu()" style="background-Color:red;width:200px;" >
    <li>Menu Item I</li>
    <li>Menu Item II</li>
    <li>Menu Item III</li>
    </ul>
    
    <script>
    function showmenu(){
     clearTimeout(hidemenu.to);  // cancel spurious mouseouts
     document.getElementById("dropd").style.display='block';
    }
    
    function hidemenu(){
     hidemenu.to=setTimeout(function(){ document.getElementById("dropd").style.display='none'; },200);  // hide after 200 milliseconds
    }
    </script>
    </body>
    
    </html>
    luckydog2011 likes this.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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