jQuery Drop Down Hover Menu

Question

I'm new to jQuery, I was hoping you guys could help me. I'm trying to make a hover dropdown menu, but it's extremely buggy. Can you help me clean up my Javascript? Look at my code please.

http://jsdo.it/mretchin/4Ewk

It doesn't work on jsdo.it for whatever reason, but it works in Komodo Edit.

Try out the code yourself if you really want to, the problem is mainly the Javascript. Can you help me make it so that when the user hovers over img.menu_class, ul.file_menu drops down, and then, if I wanted, I could hover over #something in ul and it would drop out horizantally, not vertically.

Thanks for helping! I appreciate it!

Should I just give up and make it work in CSS?

Answer 1

You can do something like this :

$(document).ready(function() {
    $(".hoverli").hover(
        function() {
            $('ul.file_menu').stop(true, true).slideDown('medium');
        },
        function() {
            $('ul.file_menu').stop(true, true).slideUp('medium');
        }
    });
});

And here an example with sub-menus:

$(document).ready(function() {
    $(".hoverli").hover(
        function() {
            $('ul.file_menu').slideDown('medium');
        },
        function() {
            $('ul.file_menu').slideUp('medium');
        }
    );

    $(".file_menu li").hover(
        function() {
            $(this).children("ul").slideDown('medium');
        },
        function() {
            $(this).children("ul").slideUp('medium');
        }
    );
});

Answer 2

For anyone who finds this in the future Aram's answer can be shortened with .slideToggle() to handle both up and down.

Here's the modified fiddle

http://jsfiddle.net/4jxph/2009/

If you have a sub-menu set to display: none; it will trigger it also, so what you'll want to do is set it to block , then add something like this

var subMenu = $('li.hoverli > ul > li');

subMenu.hover(function () {
            $(this).find("ul").slideToggle(200);
        });

And place it right below your first slideToggle. Why don't I just show you?

$(document).ready(function () {
    $(".hoverli").hover(function () {
     $(this).find('ul').slideToggle('medium');
    });

    var subMenu = $('li.hoverli > ul > li');

    subMenu.hover(function () {
      $(this).find("ul").slideToggle(200);
    });
});

Answer 3

Not sure if you care but you want to make sure that you run the .stop() method that way the animations dont build themselves up and run over and over. Here's an example

http://jsfiddle.net/4jxph/1335/

$(document).ready(function () {
    $(".hoverli").hover(
  function () {
     $('ul.file_menu').stop(true, true).slideDown('medium');
  }, 
  function () {
     $('ul.file_menu').stop(true,true).slideUp('medium');
  }
);

});

Answer 4

Use the finish function in jQuery to prevent the bug where you rapidly hover your mouse over the menu and out of the menu. Finish is better than the stop function previously suggested.

$(document).ready(
    function () {
        $(".hoverli").hover(
          function () {
             $('ul.file_menu').finish().slideDown('medium');
          }, 
          function () {
             $('ul.file_menu').finish().slideUp('medium');
          }
    );
});

Answer 5

Aram Mkrtchyan's answer was almost there for me. Problem with his was if you add anything below the menu then it gets all screwy. Here is an example of what I mean, I added a div below his menu: http://jsfiddle.net/4jxph/3418/

I am submitting this updated answer using div instead of lists and list items (which I find much easier to work with, and way more flexible) and jQuery version 1.9.1

here is link to jFiddle: http://jsfiddle.net/4jxph/3423/

Here is the code:

--------------- HTML:

<div id="divMenuWrapper1" class="divMenuWrapper1">
    <div id="hoverli">
        <div class="lbtn">
            Actions
        </div>
        <div id="actions_menu" class="file_menu">
            <div><a href="#file">File</a></div>
            <div><a href="#edit">Edit</a></div>
            <div><a href="#view">View</a></div>
            <hr />
            <div><a href="#insert">Insert</a></div>
            <div><a href="#modify">Modify</a></div>
            <div><a href="#control">Control</a></div>
            <div><a href="#debug">Debug</a></div>
            <div><a href="#window">Window</a></div>
            <div><a href="#help">Help</a></div>
        </div>
    </div>
</div>

<div>
    testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu 
</div>

--------------- Css:

.lbtn
{
    display:inline-block;
    cursor:pointer;
    height:20px;
    background-color:silver;
    background-repeat:repeat-x;      
    border:1px solid black; /* dark navy blue */ 
    text-decoration:none;
    font-size:11pt;
    text-align:center;
    line-height:20px;
    padding:0px 10px 0px 10px;
}

.divMenuWrapper1
{
    height: 25px;
    width: 75px;
}

.file_menu 
{
    display:none;
    width:250px;
    border: 1px solid #1c1c1c;
    background-color: white;
    position:relative;
    z-index:100000;
}

.file_menu div 
{
    background-color: white;
    font-size:10pt;
}

.file_menu div a 
{
    color:gray; 
    text-decoration:none; 
    padding:3px; 
    padding-left:15px;
    display:block;
}

.file_menu div a:hover 
{
    padding:3px;
    padding-left:15px;
    text-decoration:underline;
    color: black;
}

--------------- jQuery (to be placed in document.ready or pageLoad()):

$("#hoverli").hover(
    function () {
        $('#actions_menu').finish().slideDown('fast');
    },
    function () {
        $('#actions_menu').finish().slideUp('fast');
    }
);

Answer 6

I know this is probably a bit late but just found this thread saw that your question above about things below the menu 'getting a bit screwy' was unanswered.

If you give your div with the class 'file menu' a position of absolute then it should cease to affect any elements ahead of it as you will have taken it out of the normal flow.

Answer 7

To get a select box to open on hover to the exact height required by its contents, figure out how many elements there are:

JavaScript

function DropList(idval) {
    //
    // fully opens a dropdown window for a select box on hover
    //
    var numOptgroups = document.getElementById(idval).getElementsByTagName('optgroup').length;
    var numOptions   = document.getElementById(idval).getElementsByTagName('option').length;
    document.getElementById(idval).size = numOptgroups + numOptions;
}

HTML

<select class="selectpicker" id="heightMenu" onmouseover="DropList('heightMenu')" onmouseout="this.size=1;" size="1">
    <option value="0">Any height</option>
    etc.
</select>