sampa sampa - 1 month ago 10
CSS Question

Bootstrap INSPINIA Collapsible Navigation bar

I am using the INSPINIA theme for a web platform.

In my navigationbar there is an collapsible menu-entry. Each of it's sub-items redirect to a different controller.

enter image description here

If I click on "Text1" I want to keep the collapsible entry extended. But if I click, the menu collapses because it redirects to a different controller:

enter image description here

If a extend the menu again I see the correct result ("Data" and "Text1" are selected) - but it's initially collapsed!

Are there any ideas?

<li>
<a href="#"><i class="fa fa-user"></i><span class="nav-label">Data</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li class="@Html.IsSelected(action: "DoAction", controller: "Controller1")" style="border-left:none !important"><a href="@Url.Action("DoAction", "Controller2")">Text1</a></li>
<li class="@Html.IsSelected(action: "DoAction", controller: "Controller2")" style="border-left:none !important"><a href="@Url.Action("DoAction", "Contorller2")">Text2</a></li>
</ul>
</li>


Edit: I set up an example project. This shows you the problem: http://inspinia-test.azurewebsites.net/

Answer

I solved it in this way:

The drop down is now extended everytime an "Details" or "Edit" action is called. So if I view the detail site and click the "edit" button, the menu entry is still selected. It works also to differ between the multipe controllers in the drop down by substituting "action: "DoAction"" with "controller: "Controller1"".

This works because I only use Details and Edit Actions in this menu drop down. If I will use them in a other menu drop down, I would have to implement a additional testing.

<li class="@Html.IsSelected(action:"Details") @Html.IsSelected(action:"Edit")">
        <a href="#"><i class="fa fa-user"></i><span class="nav-label">Data</span><span class="fa arrow"></span></a>
        <ul class="nav nav-second-level collapse">
        <li class="@Html.IsSelected(controller: "Controller1")" style="border-left:none !important"><a href="@Url.Action("Details", "Controller1")">Text1</a></li>
        <li class="@Html.IsSelected(controller: "Controller2")" style="border-left:none !important"><a href="@Url.Action("Details", "Contorller2")">Text2</a></li>
    </ul>
 </li>