1

this is my first post here so I apologise in advance for any poor practise. I've been searching for a while, but haven't come across a solution that fits my needs as yet - maybe I'm just doing it wrong. But here goes:

I'm building a site using the Big Cartel CMS and have delved into jQuery for the first time. I'm trying to create a horizontal and centred navigation menu that will display a sub-menu underneath, where appropriate. I'm fine with html and CSS, but am struggling with the jQuery.

The mark-up is as follows:

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

Whilst this format will not change, the number of options with sub-menus might (the client can change this at will). My jQuery so far:

$('#mainNav ul').hide();
$('#mainNav li a').click(function(){
    $('#mainNav li:has("ul")').each(
        function(){
            $('nav').animate({bottom:'60px'},300,'easeOutQuint',function(){
            //Do magic stuff here - i.e. display the correct sub-menu.
            });
        }
    );
});

Currently, this targets all options (I can't fathom why) when clicked, and I've still not got to the bottom of how to only display the appropriate sub-menu. Classes may be added to any html elements, if that helps to make things easier.

Thanks in advance!

Nick Endle
  • 945
  • 1
  • 5
  • 10
verism
  • 1,106
  • 1
  • 12
  • 35

1 Answers1

1

How's this:

http://jsfiddle.net/qDX2q/3/

$('#mainNav ul').hide();
$('#mainNav a')
    .click(function()
           {
                $('#mainNav ul').hide();
                $(this).siblings("ul").show();
                return false;
           });
​

The things I think you were missing were:

  • Making sure you return false from the click event, so that bad url is not followed.
  • The this keyword. In the above code this is actually the anchor tag you are on. So you can just look for sibling uls and show them
CraftyFella
  • 7,520
  • 7
  • 47
  • 61
  • That's so annoyingly simple! Thank you, but I should've also mentioned that just one sub-menu ought to be visible at any one time. And should the user click on an option with no sub-menu, then all are hidden. Is there an easy way to accomplish this? – verism Aug 15 '12 at 14:19
  • Nps... Can you up vote and mark as the answer if this has answered your question. I'd check out a jquery for beginners book or something.. I know pluralsight do some great videos here http://www.pluralsight.com/training/Courses/TableOfContents/jquery-fundamentals but they aren't free – CraftyFella Aug 15 '12 at 14:25
  • Can't upvote yet as I don't have "reputation", but have marked as the answer. And yeah, I've been looking around at jQuery books - I'll be sure to check those videos soon. – verism Aug 15 '12 at 14:32