How can I make the submenu in the MaterializeCSS dropdown?
14,189
I was having the same issue myself. Turns out it's as simple as nesting another dropdown link, setting an appropriate gutter, and making sure the overflow of dropdown-content is set to visible.
Here is a link to the modified jsfiddle linked in Nested dropdowns in materialize
https://jsfiddle.net/fb0c6b5b/
$('.dropdown-button2').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: ($('.dropdown-content').width()*3)/2.5 + 5, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
.dropdown-content{
overflow: visible !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
<li><a class='dropdown-button2 d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
Author by
Kartikeya Sharma
Updated on June 04, 2022Comments
-
Kartikeya Sharma almost 2 years
I am trying to have a submenu dropdown inside a dropdown, using MaterializeCSS framework. I tried with the following code, but it didn't work.
<!-- this the main dropdown --> <ul id="MainDropDown" class="dropdown-content"> <li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrainwidth="false" data-gutter="30" data-alignment="right" data-activates="drop1">Dropdown1<span class="right caret">►</span></a></li> <li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrainwidth="false" data-gutter="30" data-alignment="right" data-activates="drop2">Dropdown2<span class="right caret">►</span></a></li> <li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrainwidth="false" data-gutter="30" data-alignment="right" data-activates="drop3">Dropdown3<span class="right scaret">►</span></a></li> </ul> <ul id="drop1" class="dropdown-content"> <li><a href="#">Create</a></li> </ul> <ul id="drop2" class="dropdown-content"> <li><a href="#">Create</a></li> <li><a href="#">Update</a></li> </ul> <ul id="drop3" class="dropdown-content"> <li><a href="#">Create</a></li> </ul>