Simple jQuery Collapsing Menu Question

using this...


/*
Simple JQuery Collapsing menu.
HTML structure to use:

<ul id="menu">
<li><a href="#">Sub menu heading</a>
<ul>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
...
...
</ul>
<li><a href="#">Sub menu heading</a>
<ul>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
...
...
</ul>
...
...
</ul>

Copyright 2007 by Marco van Hylckama Vlieg

web: http://www.i-marco.nl/weblog/
email: marco@i-marco.nl

Free for non-commercial use
*/

function initMenu() {
$('#menu ul').hide();
$('#rsch #menu #rsch-nav ul').show();
$('#stat #menu #stat-nav ul').show();
$('#menu li a.drop').click(
function() {
$(this).next().slideToggle('normal');
$(this).toggleClass('drop-down');
return false;
}
);
}
$(document).ready(function() {initMenu();});


i added these two lines


$('#rsch #menu #rsch-nav ul').show();
$('#stat #menu #stat-nav ul').show();


to keep the menus on specific pages dropped down...

it works, but the class doesn't stay toggled if i'm going to a sub page on those specific pages... any idea how i can keep the class toggled if those specific nav items are left dropped down?

i posted a link to make it A LOT clearer to you what the problem is. click on a sub link and then take note of the menu arrows.

http://dynodealz.com/testdrop/

any ideas?

In your second level page, the icon is not correct because it's only set by the click event. On your page you are calling:

$('#rsch #menu #rsch-nav ul').show();


which just shows the menu and doesn't affect the icon whatsoever.

You might try replacing the code with:

$('#rsch #menu #rsch-nav a.drop').click();


to simulate the click. Haven't tested this.

An alternate option would be do the display of the extended menu on the new page via css rather than javascript.

EDIT: Tested it now. Just need to switch the order round so the click event's set up first:

function initMenu() {
$('#menu ul').hide();
$('#menu li a.drop').click(
function() {
$(this).next().slideToggle('normal');
$(this).toggleClass('drop-down');
return false;
}
);
$('#rsch #menu #rsch-nav a.drop').click();
$('#stat #menu #stat-nav ul').show();

}

EDIT AGAIN:

More flexible code would be to read the id on the body element and then just show the drop down for a matching li element:

function initMenu() {
$('#menu ul').hide();
$('#menu li a.drop').click(
function() {
$(this).next().slideToggle('normal');
$(this).toggleClass('drop-down');
return false;
}
);
var page = $('body').attr('id') + "-nav";
$('#'+page+' a.drop').click();

}

Then you don't have to add a load of statements for each sub page. I'd still do it with css instead though. :)

nice! yea I think I'll stick with the CSS method...

so this is what I'm using now...


function initMenu() {
$('#menu ul').hide();
$('#menu li a.drop').click(
function() {
$(this).next().slideToggle('normal');
$(this).toggleClass('drop-down');
return false;
}
);
$('#rsch #menu #rsch-nav a.drop').click();
$('#rsch #menu #rsch-nav ul').show();
$('#stat #menu #stat-nav a.drop').click();
$('#stat #menu #stat-nav ul').show();
}
$(document).ready(function() {initMenu();});


Do you think there is a way on the sub pages to have it so the menu is already dropped down so you don't have to see the menu animate dropping down every sub page link? The only thing I can think of for that would be to have a separate animation for the subpages that doesnt animate and just drops it down??

Right. I got it into my head you wanted the animation.

function initMenu() {
$('#menu ul').hide();
$('#menu li a.drop').click(
function() {
$(this).next().slideToggle('normal');
$(this).toggleClass('drop-down');
return false;
}
);
$('#rsch #menu #rsch-nav ul').show().siblings('a').toggleClass('drop-down');
$('#stat #menu #stat-nav ul').show().siblings('a').toggleClass('drop-down');
};

$(document).ready(function() {initMenu();});

that works great. more compact than what I had. how do people normally deal with the page reload flash or delay before the jquery takes effect again? is there a way to expedite that?

Well, like I said, I'd do it with css. Then it'll be there when the page loads.

However, if you re-order the jQuery it's better than now :

function initMenu() {
$('#menu ul').hide();
$('#rsch #menu #rsch-nav ul').show().siblings('a').toggleClass('drop-down');
$('#menu li a.drop').click(
function() {
$(this).next().slideToggle('normal');
$(this).toggleClass('drop-down');
return false;
}
);


}
$(document).ready(function() {initMenu();});