Nested dropdowns in materialize

Question

Is it possible to make nested dropdowns in materialize? second dropdown should be on right side

<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
    <li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="right">Drop Me!</a></li>
    <li><a href="#!">two</a></li>
    <li><a href="#!">three</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
    <li><a href="#!">second one</a></li>
    <li><a href="#!">second two</a></li>
    <li><a href="#!">second three</a></li>
</ul>

https://jsfiddle.net/m0sdcn6e/

Nesting like this doesnt work. Any ideas?

Thanks Albert M.

Answer 1

I am looking for a solution to this myself, and trawling through the open/closed issues on Github I see that here they say

Answer 2

You might be able to get something to your liking if you use the <collapsible> accordion function rather than using the dropdown button feature.

http://materializecss.com/collapsible.html

Answer 3

It's not the best solution, but that is what I got:

Just add this to your CSS file:

.dropdown-content {
   overflow-y: visible;
}

.dropdown-content .dropdown-content {
   margin-left: 100%;
}

That is what I'm using to get the nested Dropdown from Materializecss framework, since they didn't implement it natively yet.

Example: https://jsfiddle.net/m0sdcn6e/15/

UPDATE:

Unfortunately, there's a problem with that method. By definition, the overflow (x or y) property controls what happens to the container when something exceeds it's size. The default value of overflow-y is auto, so if something exceeds the size of the dropdown, for example, it'll become scrollable.

Materializecss spawns the dropdown's contents inside it's parents by default, so if we don't turn the overflow-y visible, the nested dropdown will disappear. But with the method, while the nested dropdowns works pretty well, these dropdowns will become unscrollable.

What you can do to avoid the problem on non-nested dropdowns is rename the first class and use it only when you need to append a nested one.

.dropdown-content.nested {
   overflow-y: visible;
}

Example: https://jsfiddle.net/m0sdcn6e/16/

Answer 4

Now, I have solved my problem. (Nested dropdown & scrollable in the same button)

This isn't the best way. It's a hack, But works well for me.

// move sub-menu to new node
$('.dropdown-content.dropdown-nested .dropdown-content').detach().appendTo('.dropdown-block')

// dynamic offset initial
var marginTop = $('a.dropdown-button.btn').css('height')
$('.dropdown-block .dropdown-content').css('margin-top', marginTop)

$('.dropdown-content.dropdown-nested > li > a.dropdown-button').hover(function() {
    var left = $('.dropdown-content.dropdown-nested').position().left
    var width = $('.dropdown-content.dropdown-nested').width()
    // overide left style (preserve original style needed)
    $('.dropdown-block .dropdown-content').attr('style', function(idx, style) {
        return style + 'left: ' + (left + width - 20) + 'px!important'
    });
});

// override mouse event to fix some animation
var isDropdownHover = false;
$('a.dropdown-button, .dropdown-content').mouseenter(function() {
  isDropdownHover = true;
})
$('.dropdown-content').mouseleave(function() {
  // prevent main-menu fadeOut animation when mouseleave
  $('.dropdown-content.dropdown-nested').stop()
  // detect if mouse out of main/sub menu area and force close dropdown
  isDropdownHover = false;
  setTimeout(function() {
    if (isDropdownHover === false)
      $('.dropdown-content.dropdown-nested').fadeOut(225);
  }, 100);
})

https://jsfiddle.net/L9r1ex54/8/