[Solved] jQuery: Menus appear/disappear on click

[rzea]

Hello everyone,

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

I need a way to have each link activate its own megamenu, and each 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).

Products & Services (1)


Support & Training (2)


Communities (3)


Store (4)




1111


2222


3333


4444

I know this works very similar to Tabs, the difference is that in this case the tab container/menu can be close/collapsed, and since I’m not a jQuery/JS guru I’m not capable of adapting a tab script for this.

Any help would be greatly appreciated.

Thanks,

[rickylamerz]

  


Products & Services (1)


Support & Training (2)


Communities (3)


Store (4)




1111


2222


3333


4444

Using this markup it’s easily doable.

Do something like:

$(document).ready(function(){

$('.megamenu').css('display','none');

$('ul li a').click(function(){

if($(this).attr('class') != 'displayed'){

$('.megamenu').hide();

$('ul li a').removeClass('displayed');

linkUrl = $(this).attr('href');

linkUrl = linkUrl.replace('#','');



$('#' + linkUrl).css('display','block').animate({opacity:1});

$(this).addClass('displayed');

return false;

}

if($(this).attr('class') == 'displayed'){

linkUrl = $(this).attr('href');

linkUrl = linkUrl.replace('#','');



$('#' + linkUrl).css('display','none').animate({opacity:1});

$(this).removeClass('displayed');

return false;

}

return false;

});

});

I hope this works for you, let me know if your still stuck. :)

[rzea]

rickylamerz your script worked great, thanks. :)

However, there’s an SEO issue :( : the use of a href=”#…”. The use of the href should be to link to other pages/documents, and in this case the main nav bar is only a list of items that trigger an event on the page. That’s why I did not include a href=”#…” in my initial HTML code.

Any idea how we can use the HTML code I used initially to get the same effect you proposed?

[kylewiedman]

you could use the HTML5 custom data attributes…

Link 1

And modify the javascript to do take the custom attribute

$('ul li span').click(function () {

.... Code ...



linkUrl = $(this).attr('data-target');



..... Code ....

});

[rzea]

Didn’t know about custom data attributes :)

But, I need to stay in HTML 4.01…

And (keep in mind that I have no idea about JS) wouldn’t something else change here as well since it wouldn’t be using the # sign anymore?

linkUrl = linkUrl.replace('#','');

[rzea]

I used this script before for a set of tabs I needed to implement, and it works fairly well*:

$(function(){

$('.section-title').click(function() {

$(this).next('.section-content').toggle().siblings('.section-content').hide();

});

});

For this HTML:

Products & Services (1)


1111


Support & Training (2)


2222


Communities (3)


3333


Store (4)


4444

*The problem I have is that I have no idea how to add/remove a class to the ‘section-title’ when another title gets clicked.

I’ve tried toggleClass but it only works if you click on its title again, not when you click on another.

Any idea how to add/remove a class ‘section-title’ when clicking on another title?

[rickylamerz]

rzea,

You could use this for SEO fix.

Products & Services (1)


Support & Training (2)


Communities (3)


Store (4)




1111


2222


3333


4444

And use the following jQuery / Javascript

$(document).ready(function(){

$('.megamenu').css('display','none');

$('ul li span').click(function(){

if($(this).attr('class') != 'displayed'){

$('.megamenu').hide();

$('ul li span').removeClass('displayed');

linkUrl = $(this).attr('rel');



$('#' + linkUrl).css('display','block').animate({opacity:1});

$(this).addClass('displayed');

return false;

}

if($(this).attr('class') == 'displayed'){

linkUrl = $(this).attr('rel');

linkUrl = linkUrl.replace('#','');



$('#' + linkUrl).css('display','none').animate({opacity:1});

$(this).removeClass('displayed');

return false;

}

return false;

});

});

You can make the HTML sementically correct and SEO friendly.
Does this help you?

*corrected for SEO (read your response wrong).

[rzea]

rickylamerz, yes, I was looking into using the ‘rel’ attribute as well.

Your example worked great! :)

Thanks a lot for your time.

[Author]

Posts