Versteckte Elemente einer Liste in einem Dropdown anzeigen

Question

Ich zeige gerne alle versteckten Elemente einer Liste in einem Dropdown-Menü. Dies sollte dynamisch sein, basierend darauf, wie viele Optionen in das Fenster passen. Wie kann das gemacht werden, oder kennt jemand ein Plugin dafür?

.navigation--list{ 
 
    width: 500px; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    overflow-x: scroll; 
 
    white-space: nowrap; 
 
} 
 

 
.navigation--list li{ 
 
    display: inline-block; 
 
    margin-right: 25px; 
 
} 
 

 
#more{ 
 
    display: none; 
 
}

<ul class="navigation--list"> 
 
    <li>option 1</li> 
 
    <li>option 2</li> 
 
    <li>option 3</li> 
 
    <li>option 4</li> 
 
    <li>option 5</li> 
 
    <li>option 6</li> 
 
    <li>option 7</li> 
 
    <li>option 8</li> 
 
    <li>option 9</li> 
 
    <li id="more">show more</li> 
 
</ul>

Answer 1

prüfen diese andere Frage aus:

adding more button for list in responsive navigation

Sie müssen dafür einige Javascript verwenden. Sie müssen dies auch mit show hide kombinieren. Hier

ein Beispiel:

var elemWidth, fitCount, fixedWidth = 120, 
 
    $menu = $("ul#menu"), 
 
    $collectedSet; 
 

 
collect(); 
 
$(window).resize(collect); 
 

 

 
function collect() { 
 
    elemWidth = $menu.width(); 
 
    fitCount = Math.floor(elemWidth/fixedWidth) - 1; 
 
    $collectedSet = $menu.children(":gt(" + fitCount + ")"); 
 
    $("#submenu").empty().append($collectedSet.clone()); 
 
} 
 

 
$(document).ready(function() { 
 
    $("#submenu").hide(); 
 
    $(".show").click(function() { 
 
    $("#submenu").slideToggle(); 
 
    }); 
 
});

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    position: relative; 
 
    background-color: #ccc; 
 
    height: 32px; 
 
    overflow: visible; 
 
} 
 

 
ul#menu, 
 
ol { 
 
    height: 32px; 
 
    max-width: 80%; 
 
    overflow: hidden; 
 
} 
 

 
ul#menu > li, 
 
ol > li { 
 
    display: block; 
 
    float: left; 
 
    height: 32px; 
 
    width: 120px; 
 
    padding: 4px 8px; 
 
} 
 

 
ol { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    overflow: visible; 
 
} 
 

 
ol > li { 
 
    min-width: 120px; 
 
} 
 

 
ol ul { 
 
    position: absolute; 
 
    top: 120%; 
 
    right: 10%; 
 
} 
 

 
ol li ul > li { 
 
    list-style: none; 
 
    background-color: #eee; 
 
    border: 1px solid gray; 
 
    padding: 4px 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="menu"> 
 
    <li>Option One</li> 
 
    <li>Option Two</li> 
 
    <li>Option Three</li> 
 
    <li>Option Four</li> 
 
    <li>Option Five</li> 
 
    <li>Option Six</li> 
 
    </ul> 
 
    <ol> 
 
    <li class="show"> 
 
     Show more 
 
     <ul id="submenu"></ul> 
 
    </li> 
 
    </ol> 
 
</div>