Cant get jquery hover menu work

Question

I cant get the jquery menu to work like it should

When i hover class .trigger is slides down but when i go down with my mouse is slide up and down all the time.

LINK TO WEBSITE: HERE

Jquery

<script type="text/javascript">
    $(document).ready(function () { 

        $('.sub_menu').hide();

        $('.trigger,.sub_menu').mouseenter(function() {
        //show its submenu
            $('.sub_menu').slideDown(300); 
        }); 

        $('.sub_menu,.trigger').mouseleave(function() {
        //show its submenu
            $('.sub_menu').slideUp(300); 
        }); 


    });
</script>

HTML

<div id="header">
    <div class="container">
        <a href="index.php"><h1 id="logo">Dick van Leeuwen Financieel Consult</h1></a>

        <div id="nav">
            <ul class="main_menu">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#" class="trigger">Hypotheken</a>
                    <ul class="sub_menu">
                        <li><a href="#">Hypotheekvormen</a></li>
                        <li><a href="#">Hyporheek rente</a></li>
                        <li><a href="#">Nationale hypotheek garantie</a></li>   
                    </ul>
                    <div class="clear"></div>                       
                </li>
                <li><a href="#">Verzekeringen</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!-- nav -->
    </div><!-- container -->
</div><!-- header -->

Please help me getting stuck for about 5 hours now.

Welcome to SO. Post a specific code you have issues with, not links to a page and let us do the reverse-ingeneering thing for you. Here is an example of valid question: http://stackoverflow.com/questions/6962658/randomize-setinterval-how-to-rewrite-same-random-after-random-interval :) — Roko C. Buljan, Jul 04 '12 at 20:59
This may help: http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery — Control Freak, Jul 04 '12 at 21:03

score 0 · Answer 1 · answered Jul 04 '12 at 21:18

0

The following should sort your problem out.

$("a.trigger").parent().hover(function(e) {
    //when over the li (could be the a or sub_menu)
    $(this).find(".sub_menu").slideDown(300);
},function(e) {
    //when leaving the li
    $(this).find(".sub_menu").slideUp(300);
});

answered Jul 04 '12 at 21:18

MDEV

10,730
2
33
49

Only 1 small problem is that if u go into the menu and go up with youre mouse the event triggers again. – Julez Jul 04 '12 at 21:23

score 0 · Accepted Answer · answered Jul 04 '12 at 21:18

0

you could make the li your trigger instead of the a. that way you shouldn't get the mouseleave event when hovering the sub_menu:

 <li><a href="#">Home</a></li>
      <li class="trigger">
           <a href="#">Hypotheken</a>
           <ul class="sub_menu">
                <li><a href="#">Hypotheekvormen</a></li>
                <li><a href="#">Hyporheek rente</a></li>
                <li><a href="#">Nationale hypotheek garantie</a></li>   
           </ul>
           <div class="clear"></div>                       
        </li>
        <li><a href="#">Verzekeringen</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Contact</a></li>

then change your js to that:

$('.trigger').mouseenter(function() {
    $('.sub_menu').slideDown(300); 
}).mouseleave(function() {
    $('.sub_menu').slideUp(300); 
});

answered Jul 04 '12 at 21:18

Andy

29,707
9
41
58

But still there is small problem if u go into the submenu and u go up with youre mouse the event triggers again – Julez Jul 04 '12 at 21:28
Im so sorry m8 i found it, i had to adjust the height of the li it works good now thhx for youre help o apriciate it and i voted for you – Julez Jul 04 '12 at 21:39
@user1502014 yea i just wanted to tell you there's a gap between the li and ul. i gave the li some bottom-padding and it worked aswell. glad you figured it out as well! :) – Andy Jul 04 '12 at 21:42
@user1502014 the reason why it worked when goint from the li to ul (and not when going up again) is the orange border of the `a`, which bridges the gap when hovering over it, but then when you're over the ul it disappears - leaving the gap. mystery solved. – Andy Jul 04 '12 at 21:44
yes i want a jquery event on the orange border aswell. im gonna figuring out that now. Im kinda new to jquery. You have a email adres or something or msn, skype? – Julez Jul 04 '12 at 21:49
@user1502014 sure: nd1312@gmail.com – Andy Jul 04 '12 at 23:13

Cant get jquery hover menu work

2 Answers2