One day on from my first question, I’m afraid to say I’m back. A

Question

0

Editorial Team

Asked: June 10, 20262026-06-10T00:51:46+00:00 2026-06-10T00:51:46+00:00

One day on from my first question, I’m afraid to say I’m back. A

0

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 >:(