Nested dropdowns in materialize

问题

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.

回答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

回答2:

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/

回答3:

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/

回答4:

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

来源：https://stackoverflow.com/questions/32738599/nested-dropdowns-in-materialize

标签

nested

materialize

dropdown