jQuery Multi-Dimensional Menus without PHP.
At my office, we have been trying to get an accordion menu to work for some time now. Searching the internet did not provide a simple solution that would animate a menu, then do a page refresh and remember which page we were on and expand the menu accordingly. Sure, we could find a solution easy enough with a PHP / Javascript mix, but the problem was that we could not use PHP on this particular website. So, I developed this code to solve all our problems.
Begin by creating a document ready function for jQuery then post the following code there.
-
$('#left_nav li a').click(function(e) {
-
var clink = $(this).attr('href');
-
if($(this).next('ul').is(':visible')) {
-
var ULs = $(this).next('ul').find('ul');
-
if(ULs.size()> 0) {
-
ULs.slideUp(function(e) { document.location.href = clink; });
-
} else {
-
document.location.href = clink;
-
}
-
} else {
-
if($(this).next('ul').size()> 0) {
-
$(this).parent('li').siblings('li').find('ul:visible').slideUp();
-
$(this).next('ul').slideDown(function(e) { document.location.href = clink; });
-
} else if( $(this).parent('li').siblings('li').find('ul:visible').size()> 0 ) {
-
$(this).parent('li').siblings('li').find('ul:visible').slideUp(function(e) { document.location.href = clink; });
-
} else {
-
document.location.href = clink;
-
}
-
}
-
return false;
-
});
The above code the ID of the UL list should be 'left_nav,' or you can change it to whatever you want. then place links within the LIs. If you have any questions, feel free to leave a message. If need be, I will post again with an extended explanation. Enjoy!
