Question

I have an asp.net mvc4 solution.

I have a menu on the left side. By default this menu is closed.

If I click on an item, a sub-menu is showed.

The problem is when I navigate to another page, the opened/closed state of sub-menus are forgotten. The new page is showed and all sub-menus are still closed. I would like to preserve the opend/closed state of these sub-menus. How can I proceed?

Here is a portion of my left side menu:

<div class="page-sidebar">
    <ul>
        <li class="dropdown" data-role="dropdown">
            <a><i class="icon-flip-2"></i> Transports</a>
            <ul class="sub-menu light sidebar-dropdown-menu">
                <li>@Html.ActionLink("En cours", "SearchTransportsAA", "Transp")</a></li>
                <li>@Html.ActionLink("Passés", "SearchTransportsBB", "Transp")</a></li>
                <li>@Html.ActionLink("Factures", "SearchTransportsCC", "Transp")</a></li>
            </ul>
        </li>
        <li class="dropdown" data-role="dropdown">
            <a><i class="icon-drawer-2"></i> Autorisations</a>
            <ul class="sub-menu light sidebar-dropdown-menu open">
                <li>@Html.ActionLink("Valides", "SearchAutorisAA", "Transp")</a></li>
                <li>@Html.ActionLink("Périmés", "SearchAutorisBB", "Transp")</a></li>
                <li>@Html.ActionLink("Recherche", "SearchAutorisCC", "Transp")</a></li>
            </ul>
        </li>
        ...
        ...

As you can see above, when ‘open’ is added to the class, the menu is marked to be open.

Answer 1

One way you could do it, is to have your Views that have this side menu inherit from a model that have property that contains the selected sub-menu item

public class ViewWithSideMenu
{
    public ViewWithSideMenu(string menuItem)
    {
       MenuItem = menuItem;
    }

    public string MenuItem { get;set; }
}

ViewModel:

public class MyViewmModel : ViewWithSideMenu
{
    public MyViewmModel() : base("someMenu") {}
}

View:

<ul class="sub-menu light sidebar-dropdown-menu@(Model.MenuItem == "someMenu"? " open" : "")">

this approach will only open a menu based on the page we are on, it doesn’t really remember what the user clicked on, if it’s very important for you to keep the user selections, you have 2 options,

• keep sending them back to the server with every request (not very good, too much overhead)
• keep updating the content using ajax requests and not a full reload of the page, in which case you keep the menu unchanged, and convert all your requests to ajax, and replace the content with the ajax response