Conditional behaviours in a jQuery powered menu

Question

One day on from my first question, I'm afraid to say I'm back. A different problem this time though...

I have a horizontal menu with some nested menus as below:

<nav>
    <ul id="mainNav">
        <li><a href="expand-the-sub-menu">Option 1</a>
            <ul id="option1Nav">
                <li><a href="somewhere">Option 1 Link 1</a></li>
                <li><a href="somewhere">Option 1 Link 2</a></li>
                <li><a href="somewhere">Option 1 Link 3</a></li>
                <li><a href="somewhere">Option 1 Link 4</a></li>
                <li><a href="somewhere">Option 1 Link 5</a></li>
            </ul>
        </li>
        <li><a href="expand-the-sub-menu">Option 2</a>
            <ul id="option2Nav">
                <li><a href="somewhere">Option 2 Link 1</a></li>
                <li><a href="somewhere">Option 2 Link 2</a></li>
                <li><a href="somewhere">Option 2 Link 3</a></li>
                <li><a href="somewhere">Option 2 Link 4</a></li>
                <li><a href="somewhere">Option 2 Link 5</a></li>
            </ul>
        </li>
        <li><a href="somewhere">Option 3</a></li>
        <li><a href="somewhere">Option 4</a></li>
        <li><a href="somewhere">Option 5</a></li>
        <li><a href="somewhere">Option 6</a></li>
    </ul>
</nav>

CraftyFella helped yesterday in getting basic behaviours working, but I'd like to expand on this to include conditional behaviours based on the current menu state.

The (commented) logic and code so far is as follows:

$('#mainNav ul').hide();
$('#mainNav>li>a').click(function(){
    var elem = this;
    // If clicked element has a sibling ul with specified class
    if($(elem).next().hasClass("navChild")){

        // & If another child ul is already visible
        if ($('.navChild').is(':visible')){

            // Fade out any others, and fade this one in
            $(this).fadeOut(300, 'easeOutQuint', function(){
                $(elem).next("ul").fadeIn(300,'easeOutQuint');
            });
            return false;

        // Else if no child ul is visible
        }else{

            // Raise main links and fade in current child ul
            $('nav').animate({bottom:'60px'},300,'easeOutQuint',function(){
                $(elem).next().fadeIn(300,'easeOutQuint');
            });
        }

    // Else clicked element has no sibling ul with specified class
    }else{
        // If others are visible, fade them out and lower the main links
        $('#mainNav ul').fadeOut(300, 'easeOutQuint',function(){
            $('nav').animate({bottom:'24px'},300,'easeOutQuint');
        });
    }
});

In brief: all sub-menus should be hidden, they should be shown/swapped if present as a clicked sibling, or all hidden if not.

Sadly, it doesn't quite work, it almost does except the "swapping" part - if a sub-menu is already visible, and another is triggered to show, both end up being shown, and the clicked element disappears(!).

It's probably awful code too - I am still very new to this - but if someone could help with the logic part, I can attend to cleaning things up later on.

EDIT - http://jsfiddle.net/hKYJz/1/ - now bizarrely not working at all >:(

score 1 · Answer 1 · answered Aug 16 '12 at 13:02

1

try to implement using this

$('#mainNav ul').hide();
$('#mainNav>li').click(function(event){
    event.preventDefault();
       $('#mainNav ul').fadeOut(300);
    $(this).find('ul').fadeIn(300);
});

answered Aug 16 '12 at 13:02

Rnk Jangir

711
6
23

Thank you, that's almost there except for the movement of
to accommodate the extra elements. One other question - why do you only target the #mainNav>li elements?
– verism Aug 16 '12 at 13:10
@verism in dropDowns we generally make the whole li clickable – Rnk Jangir Aug 16 '12 at 14:23

score 1 · Answer 2 · answered Aug 16 '12 at 13:52

1

Try with this:

$('#mainNav ul').hide();
$('#mainNav>li').click(function(event){
    event.preventDefault();
    var elm = this;
    $('nav').animate({
                bottom:'60px',
                duration:300,
                easing:'easeOutQuint'
            },function(){  
                    $(elm).find('ul').fadeIn(300);
            });
    $('#mainNav ul').fadeOut(300);
});

This is the JSFiddle: http://jsfiddle.net/hKYJz/35/

answered Aug 16 '12 at 13:52

Chinmaya003

474
3
10

Thank you for this - it's so close to what I'm aiming for. The only missing action is sending the
back down if no sub-menus are open. But again, thanks so much for this - I can't believe how convoluted my attempt was. Edit - also just noticed that the menu rises even when a sub-menu isn't present.
– verism Aug 16 '12 at 13:57

score 0 · Accepted Answer · answered Aug 16 '12 at 20:30

0

Managed to get it working finally. Thanks to those who contributed - I'd almost certainly still be stuck by now without your help.

http://jsfiddle.net/hKYJz/47/

answered Aug 16 '12 at 20:30

verism

1,106
1
12
35

Conditional behaviours in a jQuery powered menu

3 Answers3