Create a submenu type dropdown with Bootstrap with MVC

Question

I have a model Category that has ParentId relationship with itself. I have restricted my model to only two levels of parent-child relationship. In my input form, the user shall be allowed to select from either the parent or child that is shown in the select list.

Also as I anticipate the list to be fairly large, I only want to display the children, when the user hovers over the parent.

I have spent a lot of time playing around with bootstrap menu/sub-menu to achieve this. There is a sample that comes close: http://www.bootply.com/iKJV5sCSYU# , where I create an EditorTemplate for the Category List, but I can not get the sub-menu to show. Here is what I tried to add a submenu to the above code:

<div class="container">
  <h2>Dropdown as Select</h2>
  <div class="btn-group">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select a    Country <span class="caret"></span></a>
<ul class="dropdown-menu">
  <li><a href="#">Item I</a></li>
  <li><a href="#">Item II</a></li>
  <li><a href="#">Item III</a></li>
  <li><a href="#">Item IV</a></li>
  <li><a href="#">Item V</a></li>
  <li class="dropdown-submenu">
    <a href="#">More..</a>
    <ul class="dropdown-menu">
        <li><a href="#">2nd level</a></li>
        <li><a href="#">3rd level</a></li>
    </ul>
  </li>
</ul>
 </div>
</div>

Can someone please point out if what I am trying to achieve is possible through this approach, or if there is an alternative way of meeting my requirement.

Bootstrap v3 doesn't support sub-menus (due to bad UX on mobile), so you're gonna be on your own as far as implementing this. Although I would not be surprised if someone has already written a relevant add-on to Bootstrap for submenus. — cvrebert
– cvrebert, Commented Jun 12, 2014 at 6:46

AyB · Accepted Answer · 2014-06-12 08:18:12Z

4

Though Bootstrap doesn't come with your specific requirement, you could tweak in a few CSS properties to make it behave so:

li.dropdown-submenu:hover ul{
display: block;
left: 100%;
}

.dropdown-submenu{
  position:relative;
}

.dropdown-submenu:hover .dropdown-menu{
  top:0;
}

The point is to keep the dropdown-submenu relative to the parent container but the 2nd-level menu absolute (which is by default). The left:100% takes the width of the parent menu and shifts the 2nd-level by that many pixels.

DEMO

edited Jun 12, 2014 at 8:18

answered Jun 12, 2014 at 8:08

AyB

11.6k4 gold badges34 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sakir · Accepted Answer · 2014-06-12 08:43:48Z

try this one ,which is what u want

http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

html code

<div class="container">
    <div class="row">
        <h2>Multi level dropdown menu in Bootstrap 3</h2>
        <hr>
        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
                Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
              <li><a href="#">Some action</a></li>
              <li><a href="#">Some other action</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu">
                <a tabindex="-1" href="#">Hover me for more options</a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Second level</a></li>
                  <li class="dropdown-submenu">
                    <a href="#">Even More..</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level</a></li>
                        <li><a href="#">3rd level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second level</a></li>
                  <li><a href="#">Second level</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </div>
</div>

and css code here

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

A suggestion: Paste the relevant code from that site. If that page is taken down your answer becomes obsolete.

Collectives™ on Stack Overflow

Create a submenu type dropdown with Bootstrap with MVC

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related