リストの非表示要素をドロップダウンに表示

Question

リストの非表示要素をすべてドロップダウンに表示したい。 これは、ウィンドウに収まるオプションの数に基づいて動的に設定する必要があります。

これはどうすればできますか？ またはこれについて誰かがプラグインを知っていますか？

.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

この他の質問チェックアウト：あなたは、このためのいくつかのJavascriptを使用する必要があります

adding more button for list in responsive navigation

を。また、これをshow hideとペアにする必要があります。ここで

は一例です：

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>