Splitting Links in mehreren Spalten

Question

Ich habe eine Menüleiste mit einer dynamischen Anzahl von Links drin.

Die Höhe dieser Platte hat eine feste Höhe (das kann sich ändern) und ich möchte berechnen, wie viele Verbindungselemente in dieser Höhe passen. Wenn die maximale Anzahl von Verbindungen erreicht ist, möchte ich, dass die Verbindungsliste sich selbst löscht und in 3 Spalten aufgeteilt wird, die .left, .center und .right genannt werden. Dies geschieht nur in dem Bereich, in dem die Anzahl der Verbindungen die verfügbare Höhe überschreitet.

ersten Teil Links müssen in .left sein sollte .right-.center und (eventuell) zu besetzen sowie

hier ist mein HTML-Struktur

<div class="right-menu-panel" style="height:250px"> 
    <div class="secondary-nav"> 
    <div class="menu-element"> 
     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 
    </div> 
    <div class="menu-element"> 
     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 

     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 

     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 

     <a href="" class="secondary-menu-link">link</a> 
     <a href="" class="secondary-menu-link">link</a> 
    </div> 
    <div class="menu-element"> 
     <a href="" class="secondary-menu-link">link</a> 
    </div> 
    </div> 
</div> 

nehmen die Javascript in diesem Fall Links überschreitet dann bewegen sollte Aktion nur in der zweiten <div class="menu-element">, die 14 Links innerhalb hat.

und ich habe mit diesem JS begonnen, aber ich bin hier fest:

var menuHeight = $(".right-menu-panel").outerHeight(); 
var menuItems = Math.max.apply(null, $('.secondary-nav > div').map(function() { 
    return $(this).children().length; 
}).get()); 

diese js mich wissen lassen, welches Panel die höchste Anzahl an div Links hat ..

hier eine Geige: https://jsfiddle.net/3ea670fh/2/

Ich bin daran fest, ich weiß nicht weiter. Jede Hilfe oder Anregung wird sehr geschätzt.

Ich habe diese Frage gesehen: One UL list split into multi columns with fixed height aber css ist keine Option für mich (IE8-Unterstützung).

vielen dank!

Answer 1

1. Zählung maximale Links in einzelnen Spalte
2. Links überschreitet, bewegen sich zur nächsten Spalte

data-prepend: es ID einer nächsten Spalte Links vorangestellt wird, wenn Links überschreiten)

$.each(indexer, function(idx, elem) { 
    var prepend = $(menuElements[elem]).attr('data-prepend'); 
    if ($(menuElements[elem]).children().length > maxItems) { 
     var items = $(menuElements[elem]).children().slice(maxItems).detach(); 
     $('#' + prepend).prepend(items); 
    } 
}); 

Hier ist eine Geige

https://jsfiddle.net/SeokjunHong/q5frqrds/