Corun Corun - 3 months ago 22
CSS Question

Level 3 metisMenu item not expanding back to active selection

I am using the following bootstrap navigation sidebar with metisMenu jquery library:

<div id="Sidebar" class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<a href="/Dashboard"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>
<li>
<a href='#'>
<i class='fa fa-calendar fa-fw'></i> Diary<span class='glyphicon arrow'></span>
</a>
<ul class='nav nav-second-level'>
<li>
<a href="/Diary/Index?diaryModeId=1">My Actions</a>
</li>

</ul>
</li>
<li>
<a href='#'>
<i class='fa fa-pie-chart fa-fw'></i> MI<span class='glyphicon arrow'></span>
</a>
<ul class='nav nav-second-level'>
<li>
<a href="/MI/EntityStatus">Entity Status</a>
</li>
</ul>
</li>
<li>
<a href='#'>
<i class='fa fa-cogs fa-fw'></i> Administration<span class='glyphicon arrow'></span>
</a>
<ul class='nav nav-second-level'>

<li>
<a href='#'>
Question Admin<span class='fa plus-minus'></span>
</a>
<ul class='nav nav-third-level'>

<li>
<a href="/Rule/Index">Business Rules</a>
</li>
<li>
<a href="/Question/Index">Question Bank</a>
</li>
</ul>
</li>
<li>
<a href='#'>
User Admin<span class='fa plus-minus'></span>
</a>
<ul class='nav nav-third-level'>
<li>
<a href="/User/Index">Users</a>
</li>
<li>
<a href="/Team/Index">Teams</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>


I run the following code on refresh:

$(function () {

$('#side-menu').metisMenu();

});


Level 1 and level 2 selection works fine with the menu collapsing then re-selecting selected menu option. When I select a level 3 item (such as Question Bank) the menu collapses but then does not re-select. Is there something else I need to do? Is my html mark up correct?

Answer

For a third level menu item (or any level menu item), you need to make sure that all its ancestor li items have class="active".