Drop Down Disappears Too Quickly

JavaScript
1

Hey Folks,

I have a little problem with a simple jqeury drop down I’ve added to my site. Basically, I want to drop down to work like any other dropdown, where you will hover over the link and it will display, and when you move your mouse, it disappears again. Right now, the problem is that when I hover, the drop down shows up, but as soon as I leave the link to click on one of the dropdown options, the drop down disappears because it thinks I’m no longer on the element.

Another option would be to toggle on “Click” event, but once again, I don’t know how to remove the menu unless you click back on the element which is annoying, I’d rather have it so if you click anywhere it will untoggle.

Here is the code I have (The Jquery Portion):


$(document).ready(function () {  
  
$('img.menu_head').hover(function () {  
  
$('ul.menu_body').slideToggle('fast');  
  
}); 
});

Any Ideas?

Elementax

2

There’s a number of reasons that could be happening, but it would be better if we could see this in action. Can you post a link, or a demo with jsFiddle?

3

As ralph said it could be a number of things but to me it sounds like your HTML is not marked up correctly for what your trying to accomplish, if you could supply a link that would be very helpful.

4

Well here is a simplified version to display the issue –>Here<–, as my actual one has imaged that wouldn’t be displayed properly. You’ll get the idea there if you go to places and try to click on one of the sublinks.

Here is my html for that part:


    <div id="navigation"> 
    	  	
        <a href="#"><img src="../images/nav1.png" alt="navbar1" /></a>
        <a href="#"><img src="../images/nav2.png" alt="navbar2" class="menu_head" /></a>
        	<ul class="menu_body">
            	<li><a href="#">Test 1</a></li>
                <li><a href="#">Test 2</a></li>
                <li><a href="#">Test 3</a></li>
            </ul>

    </div>

and once again, the corresponding JQuery:


$(document).ready(function () {  
  
$('img.menu_head').hover(function () {  
  
$('ul.menu_body').slideToggle('fast');  
  
}); 
});

Elementax

5

Your hover event is only binded to your image and NOT the <ul> which is what’s causing it to disappear so suddenly, what you need to do is wrap your code in something like an un-orded list so that you can bind an event to an <li> element for instance.

<div id="navigation"> 
    <ul>
        <li><a href="#"><img src="../images/nav1.png" alt="navbar1" /></a></li>
        <li>
            <a href="#"><img src="../images/nav2.png" alt="navbar2" class="menu_head" /></a>
            <ul class="menu_body">
                <li><a href="#">Test 1</a></li>
                <li><a href="#">Test 2</a></li>
                <li><a href="#">Test 3</a></li>
            </ul>
        </li>
    </ul>
</div>

$('li', '#navigation').each(function() {
    var self = $(this);
    
    if (self.has('ul')) {
        self.on({
            mouseenter : function() {
                $(this).find('ul').slideDown('fast');
            },
            mouseleave : function() {
                $(this).find('ul').slideUp('fast');
            }
        });
    }
});
6

That didn’t seem to work. Could it be that there is nothing in the Jquery referencing menu_head? I only want the drop down to go down if the user hovers over navbar2.png with the class of menu_head

7

Also, another option would be to click to expand dropdown, and when you click anywhere else other than the dropdown it closes. Right now, all I can get is when you click it toggles, but it stays open, the only way you can close it is by clicking on the element again.

8

Well how about putting in a small delay before it is closed, such as a 1/4 of a second? That would give enough time to scroll over to it, to where it registers that you’re on it and stays open.


$('.menu_body').hide();
$('li', '#navigation').each(function() {
    var self = $(this);
 
    if (self.has('ul')) {
        self.on({
            mouseenter : function() {
                $(self).find('ul').slideDown('fast');
            },
            mouseleave : function() {
                setTimeout(function () {
                    $(self).find('ul').slideUp('fast');
                }, 250);
            }
        });
    }
});
9

That seems to work out :wink: Thanks a lot

Elementax