CODEWITHSUNDEEP
asp.net-mvcmenu
Manish
Manish

Reputation: 31

How to create menu/submenu using MVC?

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

Upvotes: 3

Views: 28327

Answers (3)

Ishan
Ishan

Reputation: 295

 <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.

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

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>

Upvotes: 10

Annabelle
Annabelle

Reputation: 10716

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>

Upvotes: 3

Related Questions