jQuery: menus appear/disappear on click

Question

I've been looking all over the web and I can't find a solution. I am very new to jQuery as well.

My case:

I have a nav bar, each link in it activates/triggers a megamenu (each link has its own megamenu).

What I need:

I need a way to have each link activate its own megamenu, the megamenu should close when:

1. The user clicks on another item in the nav bar.

2. The user clicks on the same item in the nav bar.

3. The user clicks on a 'close button' (X) graphic inside the megamenu (not shown in the HTML for simplicity sake).

HTML:

<div id="top-nav">
 <ul>
  <li><span>Products &amp; Services</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Support &amp; Training</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Communities</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Store</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
 </ul>
</div>

I've seen the script of 'Sexy Drop Down Menu' but the problem is that it closes the menu triggered by the click on hover, and as I said, I'm new to jQuery and I can't figure out a way to adapt it to what I need.

http://www.sohtanaka.com/web-design/examples/drop-down-menu/

Any help would be greatly appreciated.

Thanks.

Answer 1

You would attach a click handler to another item/same item/close button which would read something like this:

$(function(){
    $('#top-nav span').click(function(){
        divTrigger = $('#top-nav span').index(this);
        thisMegaMenu = $('.megamenu:eq('+divTrigger+')');
        $('.megamenu').slideUp(200);
        if(thisMegaMenu.is(":not(':visible')")){
        thisMegaMenu.slideDown(200);
        }
});
    $('.megamenu').append("<a href=# id=closeButton>x</a>");
    $('#closeButton').live('click',function(){
        thisMegaMenu.slideUp(200);
    });
});

Try it out here

Answer 2

I was able to get this other solution which works like a charm as well:

$(function(){
//Megamenus
$('#top-nav li').click(function(){//set up a click event for the li
    $(this).siblings('.active').click();//click any other lis which are active to close their menus
    $(this).find('.megamenu').toggle();//toggle the child megamenu
    $(this).toggleClass('active');//toggle a class so we can identify any open megamenus
});

$('.megamenu').click(function(event){//hide the megamenu on load and set up a click event..
    $(this).parents('li').click();//..that just clicks the parent li
    event.stopPropagation();//stop the click bubbling up to the parent li
  });
});

My problem now is which of both solutions is better to use? This is a good problem now though :p

Solution provided at: http://codingforums.com/showpost.php?p=1016305&postcount=2

Answer 3

For each of the higher level <li>s in the Navbar, give them a class like 'navbar'. Then your jQuery could look something like this:

$('li .navbar').click(function() {
  if($(this).find('.megamenu').is(':visible')) { // Already open
    $(this).find('.megamenu').hide();
  } else { // Close others first
    $('.megamenu').each(function() {
      $(this).hide();
    });
    $(this).find('.megamenu').show();
  }
});

You would just need to add the click handler for the Close button. Note, this is untested code so let me know if there's a problem.