I need to create a menu(parent) with three subelements like (Add,Edit,Delete).
<li ><%= Html.ActionLink("Log", "Index", "Log")%></li>
<li><%= Html.ActionLink("Administration", "Administration", "Log")%></li>
</ul>
Under Log I need to add three elements (Add,Edit,Delete). How to achieve that.
Thanks, Manish
The first matching SO answer from Google appeared to be incomplete, so here is a minimal set of options to add a submenu in later versions of MVC that use Bootstrap:
dropdown-toggle data-toggle="dropdown"UL has a class of dropdown-menu (without this the submenu is always visible)Example:
<ul>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Log</a>
<ul class="dropdown-menu">
<li><%= Html.ActionLink("Add", "Add", "Log")%></li>
<li><%= Html.ActionLink("Edit", "Edit", "Log")%></li>
<li><%= Html.ActionLink("Delete", "Delete", "Log")%></li>
</ul>
</li>
<li><%= Html.ActionLink("Administration", "Administration", "Log")%></li>
</ul>
Submenus are typically implemented with nested lists:
<ul>
<li>
<%= Html.ActionLink("Log", "Index", "Log")%>
<ul>
<li><%= Html.ActionLink("Add", "Add", "Log")%></li>
<li><%= Html.ActionLink("Edit", "Edit", "Log")%></li>
<li><%= Html.ActionLink("Delete", "Delete", "Log")%></li>
</ul>
</li>
<li><%= Html.ActionLink("Administration", "Administration", "Log")%></li>
</ul>
<li>
<a class="DrT" data-target="Sub">Menu</a>
<ul class="dropdown-menu" id="Sub" style="display:none">
<li><a>Sub-Main 001</a></li>
<li><a>Sub-Main 002</a></li>
<li><a>Sub-Main 003</a></li>
<li class="dropdown">
<a class="DrT" data-target="SubSub">Sub-Main</a>
<ul class="dropdown-menu submenu" id="SubSub" style="display:none">
<li><a>Sub Sub-Main 001</a></li>
<li><a>Sub Sub-Main 002</a></li>
<li><a>Sub Sub-Main 003</a></li>
<li class="dropdown">
<a class="DrT" data-target="SubSubSub">Sub Sub-Main</a>
<ul class="dropdown-menu submenu" id="SubSubSub" style="display:none">
<li><a>Sub Sub Sub-Main 001</a></li>
<li><a>Sub Sub Sub-Main 002</a></li>
<li><a>Sub Sub Sub-Main 003</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
ul.submenu {
margin-top:-20%;
margin-left:100%;
}
$(".DrT").click(function () {
debugger;
var target = this.getAttribute("data-target");
var x = document.getElementById(target);
if (x.style.display == "none")
{
x.style.display = "block";
}
else
{
x.style.display = "none";
}
});
$(document).click(function (e) {
var Target = e.target.className;
if (Target != "DrT")
{
$("ul.dropdown-menu").css("display","none");
}
});
This can be useful if you are looking for custom multilevel dropdown menus.
