Geek Answers Handbook

Nested Dropdowns

Is it possible to implement nested drop-down lists? the second drop down menu should be on the 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/

An attachment like this does not work. Any ideas?

Thank you Albert M.

+5
nested materialize dropdown
source share
4 answers

I myself am looking for a solution to this and bullying through open / closed issues on Github. I see what they say here

enter image description here

+2
source share

This is not the best solution, but here is what I got:

Just add this to your CSS file:

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

This is what I use to get a nested Dropdown from the Materializecss framework, since they haven't implemented it initially.

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

UPDATE:

Unfortunately, the problem is with this method. By definition, the overflow (x or y) property controls what happens to the container when something exceeds its size. The default value of overflow-y is auto , so if something exceeds the size of the drop-down list, for example, it becomes scrollable.

Materializecss produces pop-up content inside it by default, so if we do not enable overflow-y visible , the nested popup menu will disappear. But using the method, while nested dropdowns work very well, these dropdowns will become irreversible.

What you can do to avoid the problem with non-nested drop-down lists is to rename the first class and use it only when you need to add an attached file.

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

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

+2
source share

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

This is not the best way. This is 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/

+1
source share

You may be able to get something to your taste if you use the <collapsible> accordion function instead of using the drop-down menu function.

http://materializecss.com/collapsible.html

-one
source share

More articles:


All Articles