JS Menu keep menu state

Question

I have this HTML Code:

<div id="nav">
<li><a href="/admin/index.php" target="_top">Dashboard</a></li>
<li><a>Contacts</a>
    <ul>
    <li><strong>Companies</strong></li>
    <li><a href="/admin/customer/addcustomer.php" target="crm_frame">Add Company</a></li>
    <li><a href="/admin/customer/viewcustomer.php" target="crm_frame">View Company</a></li>
    </ul>
</li>
</div>

and this JS:

<script>
$(document).ready(function () {
  $('#nav > li > a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#nav li ul').slideUp();
       $(this).next().slideToggle();
       $('#nav li a').removeClass('active');
       $(this).addClass('active');
     }
  });
});
</script>

for my vertical menu but i cant work out how to keep the menu state when the page changes.

for example, if the

is expanded, how can i keep it expanded if the page changes?

here is the CSS to:

#nav {
    float: left;
    margin-left:5px;
    margin-top:-20px;
    top:0;
    left:0;
    width: 100%; 
    list-style:none;
}
#nav li a {
    display: block; 
    padding: 8px 10px;
    margin-bottom:0;
    background: #666666; 
    border-top: 1px solid #EEEEEE; 
    border-bottom: 1px solid #EEEEEE; 
    text-decoration: none; 
    color: #EEEEEE;
    width:155px;
}
#nav li a:hover, #nav li a.active {
    background: #F36F25; 
    color: #FFFFFF;
    cursor:pointer;
}
#nav li ul {
    display: none;
    list-style:none;
}
#nav li ul li {
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:-40px;
}
#nav li ul li a {
    background: #EEEEEE;
    color:#666666;
    border:1px solid #EEEEEE;
}
#nav li ul li a:hover {
    background: #EEEEEE;
    color:#f36f25;
    border:1px solid #f36f25;
}

Answer 1

When the page changes, the click handler gets bound, but there is no statement handling the initial state of the menu.

So...

$(document).ready(function() {
    //original click handler
    //$('#nav a').click     

    //but also this piece of code, that will display all the lists having an .active link inside
    $('#nav ul').has('a.active').show();
});

Regards and good luck! A quick but a little dirty solution to keep track of your currently active page is to compare the src attribute of your target frame with the href attribute of your links.

Edit: The following fiddle might help you a bit: fiddle

Answer 2

I would suggest using sessionStorage in this scenario. It's a great tool in this case, and it is widely supported, but see http://caniuse.com/namevalue-storage to see if its suitable for your needs. What you can do is use sessionStorage to keep track (client-side) of your currently expanded menu so you can expand the correct menu on a page reload. This answer is not 100% correct in the sense that you can't just plug it in directly into your code (I would have had to guess at several things) but it should give you a fairly idea of where to go. Note that in the code below, I changed link hrefs to point to JSFiddle because that is where I made a working example, but hopefully this will get you on the right track to implement it in your own pages.

One of the main things necessary to change is to give main menu <a> tags an ID (below, they are menuDashboard and menuContacts). These would have to be consistent across your different pages, and also the scripts below would have to be included in all the pages where you want to keep the menu state. Then the basic premise is that on menu click, we store the currently expanded menu <a> ID into sessionStorage so we can access that after a page reload. Then, on page load, we look at sessionStorage to see what was previously selected by retrieving the key "activeMenuItemID", and if we find that is not undefined, we expand that menu item.

Working example: http://jsfiddle.net/VBLS8/2/show/ Note, because of how JSFiddle is built, the previous link is a link directly to JSFiddle Results iframe is. Otherwise, when clicking the links JSFiddle just breaks. The actual JSFiddle is here: http://jsfiddle.net/VBLS8/2/.

<br/>
<div id="nav">
<li>
    <a id="menuDashboard">Dashboard</a>
    <ul>
        <li><strong>Sub Category</strong></li>
        <li><a href="http://jsfiddle.net/VBLS8/2/show/">Sample 1</a></li>
        <li><a href="http://jsfiddle.net/VBLS8/2/show/">Sample 2</a></li>
    </ul>

</li>
<li>
    <a id="menuContacts">Contacts</a>
    <ul>
        <li><strong>Companies</strong></li>
        <li><a href="http://jsfiddle.net/VBLS8/2/show/">Add Company</a></li>
    <li><a href="http://jsfiddle.net/VBLS8/2/show/">View Company</a></li>
</ul>

JavaScript:

$(document).ready(function(){
    //Loop through nav items, compare to expanded item ID from sessionStorage so we can expand whichever item was previously expanded
    if(sessionStorage.getItem("activeMenuItemID") != undefined){
        $("#nav > li > a").each(function(){
            if ($(this).attr("id") == sessionStorage.getItem("activeMenuItemID")){
                expandMenuItem(this);
            }
        });
    }

    $('#nav > li > a').click(function(elem){
        expandMenuItem(this);
    });

});

function expandMenuItem(elem){
    if ($(elem).attr('class') != 'active'){
        $('#nav li ul').slideUp();
        $('#nav > li > a').removeClass("active");
        $(elem).addClass("active");
        $(elem).next().slideToggle();
        sessionStorage.setItem("activeMenuItemID", $(elem).attr("id"));
    }
}