CODEWITHSUNDEEP
jquerydrop-down-menunavigationhover
Tenatious
Tenatious

Reputation: 889

JQuery Navigation - Dropdown Causing Issues

So I'm currently trying out with JQuery and have so far got a navigation working properly. I've come to add the dropdowns and it's causing issues and wondered if someone could see why.

HTML:

<ul id="navigation">
        <li id="first" onclick="window.location='index.html';"><span id="logo"></span><span class="navigation-text">Home</span></li>
        <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span>
            <ul class="subnavigation">
                <li>Portfolio 1 Column</li>
                <li>Portfolio 2 Column</li>
            </ul>
        </li>
        <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span></li>
        <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">GalleryGallery123</span></li>
    </ul>

JQuery:

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

    // On hover:
    $('#navigation li').hoverIntent(function () {
        width = $(this).children('span:nth-child(2)').width();
        text = $(this).children('span:nth-child(2)');          

        var newwidth = (width + 15) // Original width + 15px padding        
        text.filter(':not(:animated)').animate({"width":"1px"}, 0).show(); // Make the width 0px and make the element visible
        text.animate({"width":+newwidth+"px"}, 300); // Animate the width to the new size
        $(this).children('ul').slideDown('slow')

    },
    function () {
        text.animate({"width":"1px"}, 150); // Animate the width to 0px and hide the element
        text.animate({"width":+width+"px"}, 0);
        setTimeout(function() {
            $('#navigation li .navigation-text').hide();
        },100);
        $(this).children('.subnavigation').slideUp('slow');
    });

});

</script>

If you hover on the green bar or any of the LIs that doesn't contain the dropdown then it works fine. It opens and closes and carries on working if you do it again. If however you hover on to the dropdown and hold it on the first LI of that dropdown then move on to the second LI the parent closes, ends up at the wrong size and the first LI of the dropdown hides its self.

Probably best if you have a play with it so you know what I'm on about as I'm not sure that made much sense.

JFiddle: http://jsfiddle.net/5NcHk/ Live: http://dev.evaske.com/Navigation/

Upvotes: 0

Views: 153

Answers (2)

s.lenders
s.lenders

Reputation: 1149

Well you make a hoverIntent on all li inside the #navigation. This includes the subitems So when you hover out of the li it will hide that one.

Change your selector from 

$('ul#navigation li').hoverIntent(function () {

to

$('ul#navigation > li').hoverIntent(function () {

Upvotes: 1

Vimal Stan
Vimal Stan

Reputation: 2005

You're assigning the hoverIntent event handler to all li's in the nav. This causes the the mouseout event to trigger when you move from one sub-menu item to another. If you move your mouse quickly enough to not trigger the event on "Portfolio Link 1" and move to the second link, it works fine. It's only a problem when you hover over link 1 and then link 2.

You can fix this by updating the mouseout handler to check if the mouse is still inside the sub-menu before performing your mouseout operations.

Upvotes: 0

Related Questions