I dropdown nidificati si materializzano

Question

È possibile rendere materializzati i menu a discesa annidati? secondo discesa dovrebbe essere sul lato destro

<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 come questo non funziona. Qualche idea?

Grazie Albert M.

Answer 1

Sto cercando una soluzione a questo me stesso, e pesca a strascico attraverso l'apertura/chiusura questioni su Github vedo che here dicono

Answer 2

Potreste essere in grado di ottenere qualcosa a proprio piacimento se si utilizza la funzione fisarmonica <collapsible> anziché utilizzare la funzione del pulsante a discesa.

http://materializecss.com/collapsible.html

Answer 3

Non è la soluzione migliore, ma questo è quello che ho ottenuto:

Basta aggiungere questo al vostro file CSS:

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

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

che è quello che sto usando per ottenere il dropdown nidificato dal framework Materializecss, dal momento che non lo hanno ancora implementato in modo nativo.

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

UPDATE:

Purtroppo, c'è un problema con questo metodo. Per definizione, la proprietà overflow (x o y) controlla cosa succede al contenitore quando qualcosa supera la sua dimensione. Il valore predefinito di overflow-y è auto, quindi se qualcosa supera la dimensione del menu a discesa, ad esempio, diventerà scorrevole.

Materializecs genera il contenuto del menu a discesa all'interno dei suoi genitori per impostazione predefinita, quindi se non attiviamo lo overflow-yvisible, il menu a discesa nidificato scomparirà. Ma con il metodo, mentre i menu a cascata annidati funzionano abbastanza bene, questi elenchi a discesa diventeranno non convertibili.

Quello che puoi fare per evitare il problema sui menu a discesa non annidati è rinominare la prima classe e usarla solo quando è necessario aggiungere uno nidificato.

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

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

Answer 4

Ora, ho risolto il mio problema. (Elenco a discesa annidato & scorrevole nello stesso pulsante)

Questo non è il modo migliore. È un hack, ma funziona bene per 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/