...

View Full Version : Menus appear/disappear on click



rzea
11-16-2010, 04:06 PM
Hello,

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>

Any help would be GREATLY appreciated.

Thank you.

SB65
11-16-2010, 04:33 PM
How about:


$(document).ready(function(){
$('#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('slow');//toggle the child megamenu
$(this).toggleClass('active');//toggle a class so we can identify any open megamenus
});

$('.megamenu').hide().click(function(event){//hide the mega menu 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
});


});
</script>



You'd probably hide the megamenu with css rather than js, but still. Tests OK in FF.

rzea
11-16-2010, 05:01 PM
SB65,

Your code worked like a charm :thumbsup:

I will hide the megamenus with CSS, yes. I also need to add the 'close button' I mentioned, but that should not be a problem, the code you created is doing the heavy lifting now.

Thanks a million!

SB65
11-16-2010, 05:18 PM
You're welcome. Once you've set up the close image just attach the click event to this instead of to .megamenu.

rzea
11-16-2010, 05:37 PM
Will do amigo.

Just FYI, here's another solution I was provided with in stackoverflow.com:

http://stackoverflow.com/questions/4189042/jquery-menus-appear-disappear-on-click

rzea
11-22-2010, 02:48 PM
Well, I had to modify my HTML because the way I had it before it wasn't working for how I needed the megamenus to display until I started implementing them with CSS.

My new HTML is (which is actually simpler):


<ul>
<li>Products &amp; Services (1)</li>
<li>Support &amp; Training (2)</li>
<li>Communities (3)</li>
<li>Store (4)</li>
</ul>
<div class="megamenu">1111</div>
<div class="megamenu">2222</div>
<div class="megamenu">3333</div>
<div class="megamenu">4444</div>

Any idea how I can have each LI open the corresponding DIV on click? Keep in mind that the megamenus should close by either opening another megamenu or clicking on its menu item again.

Thanks in advance,

SB65
11-23-2010, 08:22 AM
There's a very similar thread here (http://www.codingforums.com/showthread.php?p=1016305#post1016305) which covers this - although you might need to amend your html slightly.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum