Help with vertical sliding nav - need current link function!
Hi there, I am new to Jquery and have done a little javascripting before but basically don't know enough yet:
I'm working on a dynamic asp.net site (just front end, programmers doing the backend!), and this style of menu which I found on this web site was exactly what i was looking for:
http://www.stunicholls.com/menu/jquery-slide-1.html
- I've implemented it onto the site I'm working on but I now need to add a function so that when the user clicks on a link and is taken to a new page, the submenu stays open displaying my 'current' link class style as a visual aid to tell where they are.
-
<dl id="nav">
<dt class="navTop"><em>Import Tools</em></dt>
<dd>
<ul>
<li><a id="ctl00_btnImportLearners" onclick="~/Import/Learners/Import.aspx">Learner Import</a></li>
<li><a id="ctl00_btnSupervisorImport">Supervisor Import</a></li>
<li><a id="ctl00_btnGroupImport">Group Import</a></li>
<li><a id="ctl00_btnAttendanceImport">Attendance Import</a></li>
<li><a id="ctl00_btnAssessmentImport">Assessment Import</a></li>
<li><a id="ctl00_btnAttainmentImport">Attainment Import</a></li>
</ul>
</dd>
<dt><em>Manage Data</em></dt>
<dd>
<ul>
<li><a id="ctl00_btnLearnerGroupAssociations" Value="Learner Group Associations" href="../Default.aspx">Learner Group Associations</a></li>
<li><a id="ctl00_btnSupervisorGroupAssociations">Supervisor Group Associations</a></li>
<li><a id="ctl00_btnEditPre16Learner" class="Current" Value="Edit Pre 16 Learner" href="Search.aspx?Learner=pre16">Edit Pre 16 Learner</a></li>
<li><a id="ctl00_btnEditPost16Learner" Value="Edit Post 16 Learner" href="Search.aspx?Learner=post16">Edit Post 16 Learner</a></li>
</ul>
</dd>
<dt><em>Reports</em></dt>
<dd>
<ul>
<li><a id="ctl00_btnProviderReport" Value="Provider Report">Provider Report</a></li>
</ul>
</dd>
</dl>
so there is my html - there is a class of 'current' being added (dynamicly as we're using master pages) to the current <a> tag, so I can CSS it, but it is hidden until the user clicks on that menu. I want to have it open that submenu on on the new page.
Here's my jquery:
-
$(document).ready(function(){
if($("#nav")) {
$("#nav dd").hide();
/*attemp failed, I tried adding this which did not work: $("#nav dt dd li a.current").parent().parent().slideDown(500)*/
$("#nav dt em").click(function() {
if(this.className.indexOf("clicked") != -1) {
$(this).parent().next().slideUp(200);
$(this).removeClass("clicked");
}
else {
$("#nav dt em").removeClass();
$(this).addClass("clicked");
$("#nav dd:visible").slideUp(200);
$(this).parent().next().slideDown(500);
}
return false;
});
}
});
</script>
Any help would be greatly appreciated!
Thanks,
Alex