CODEWITHSUNDEEP
jquerynavigationshow-hidemenuitem
Lars Bouwens
Lars Bouwens

Reputation: 23

JQuery dropdown menu, how to show child-items when these are active?

I'm using jquery to animate a dropdown menu. The children of a menu-item are shown when hovering over the menu-item. Everything works, except for one thing:

I want to show the children of the parent-menu-item when the visitor is a) on the current parent page, or b ) on the current child page

I've added the classes "current-menu-parent" and "current-menu-item" but I can't figure out how to get it working! I've tried to add a .show() part but that doesn't work.

Any idea's?

The jsfiddle: http://jsfiddle.net/ub24N/

The code: 

$(function(){
    $('#menu-navigatie>li>ul').hide();
    $('#menu-navigatie>li').mouseover(function(){
        // check that the menu is not currently animated
        if ($('#menu-navigatie ul:animated').size() == 0) {
            // create a reference to the active element (this)
            // so we don't have to keep creating a jQuery object
            $heading = $(this);
            // create a reference to visible sibling elements
            // so we don't have to keep creating a jQuery object
            $expandedSiblings = $heading.siblings().find('ul:visible');
            if ($expandedSiblings.size() > 0) {
                $expandedSiblings.slideUp(500, function(){
                    $heading.find('ul').slideDown(500);
                });
            }
            else {
                $heading.find('ul').slideDown(1000);
            }
        }
    });
});

And the html:

<ul id="menu-navigatie" class="menu">
    <li>
        <a href="#">Item 1</a>
    </li>
    <li class="current-menu-parent">
        <a href="#">Item 2</a>

            <ul class="sub-menu">
                <li class="current-menu-item">
                    <a href="#">Item 2a</a>
                </li>
                <li>
                    <a href="#">Item 2b</a>
                </li>
            </ul>
    </li>
</ul>

Upvotes: 2

Views: 3542

Answers (2)

Jim Jeffers
Jim Jeffers

Reputation: 17930

The problem is you are hiding the navigation no matter what via jQuery. If you want jQuery to show the sub navigation for the current item you can check for the class on the sub navigations containing element like this:

$('#menu-navigatie>li>ul').each(function(){
    if($(this).parent().hasClass("current-menu-parent")) 
    { 
        $(this).show();
    } else {
        $(this).hide(); 
    }
});

See this fiddle for a quick demo:

http://jsfiddle.net/jimjeffers/ub24N/1/

Update:

If you don't want the current menu to hide due to another sub menu, you must ignore the current menu when you search for the headings siblings:

$expandedSiblings = $heading.siblings().not(".current-menu-parent").find('ul:visible');

and on mouse out you will also want to check for the class:

else {
   if(!$heading.parent().hasClass("current-menu-parent")) {
     $heading.find('ul').slideDown(1000);
   }
}

See this fiddle: http://jsfiddle.net/jimjeffers/ub24N/3/

Upvotes: 1

nodrog
nodrog

Reputation: 3532

Add this line at the bottom:

$('.current-menu-item').parent('.sub-menu').show()

it wil lshow the parent sub-menu class which is currently also hidden, thats why just showing current-menu-item does not work.

Upvotes: 0

Related Questions