3

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

3 Answers 3

10

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:

  • Submenus are implemented using nested lists
  • A dummy link is used for the parent option
    • The link has a class of dropdown-toggle
    • The link has an attribute of data-toggle="dropdown"
  • The nested 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>
1
  • 2
    Down-votes without comment, on a working answer, is just poop without the dog. Dec 7, 2017 at 16:46
3

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>
1
  • 2
    This creates menu and sub menu in vertical. Can we have it horizontal. And Sub menu should expand when main menu is hovered Oct 9, 2016 at 16:28
1
 <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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.