nutman nutman - 5 months ago 23
CSS Question

Keeping menu extension open on page change

I have an expanding menu using jquery. It works well except for one thing: when the user navigates away from the page the menu collapses. I want the menu to stay open when the user clicks on any of the final < li > links. All of these links open the same page. Content on these pages is grabbed from a database and determined by the ?id=.

Here's the code:


<ul id="nav">
<li><a href="javascript:;">Products</a>
<ul id="nav2">
<li><a href="javascript:;">Domestic Market</a>
<li><a href="index.php?page=Product&id=1">Link1</a></li>
<li><a href="index.php?page=Product&id=2">Link2</a></li>
<li><a href="index.php?page=Product&id=3">Link3</a></li>
<li><a href="javascript:;">Commercial Market</a>
<li><a href="">Coming Soon</a></li>


ul {
padding: 0px;
margin: 0px;
width: 10em;

li {
font: 100% Verdana, Arial, Helvetica, sans-serif;

li ul {
display: none;
} > ul {
display: block;


$('#nav').delegate('li,a', 'click', function(e) {

var self = $(,
//get a reference to the clicked element
active = self.parents().andSelf() //select all li's that should be active
.addClass('active'); //and activate them
$('#nav .active').not(active).removeClass('active'); //deactivate others


How do I keep the final < li >'s open?


I would recommend storing the value in a cookie and then setting it on page load.

First off, I'd recommen you download the jQuery cookie plugin here. It's a good plugin and it's small. Set the value:

$.cookie("cookie_name", "cookie_value");

And then on document.ready you can pull the value:


and set it appropriately with something resembling your current click function.