"More"オプションを指定したブートストラップメニュー応答的な問題

Question

私の仕事にはブートストラップを使用しました。私はページの上に15項目前後のメニュー項目をたくさん持っています。したがって、私のトップメニューは画面幅を採用していません。あふれたメニューによって導入された次の行に分割されます。 "More"メニューを持って、次の行へのメニューオーバーフローを止めたい。

あふれているメニュー項目が「More」メニューにドロップダウンすることが考えられます。しかし、私はメニューのオーバーフローを検出する方法を知らない。余分なメニュー項目をに移動するにはどうすればいいですか？詳細はドロップダウンですか？

基本的な構造とマークアップがあります。

フィドル：http://jsfiddle.net/xFW8t/347/

マークアップ：

<ul class="nav nav-pills topnavi"> 
     <li class="active" ><a href="#">Dashboard</a></li> 
     <li ><a href="#">Docs</a></li> 
     <li ><a href="#">Docs 2</a></li> 
     <li ><a href="#">Docs 3</a></li> 
     <li ><a href="#">Docs 4</a></li> 
     <li ><a href="#">Data</a></li> 
     <li ><a href="#">iWeb</a></li> 
     <li ><a href="#">Program</a></li> 
     <li ><a href="#">Config</a></li> 
     <!-- <li ><a href="#">Smart Inside</a></li> 
     <li ><a href="#">Settings </a></li> 
     <li ><a href="#">Account</a></li> 
     <li ><a href="#">Types</a></li> 
     <li ><a href="#">Notifications</a></li> 
     <li ><a href="#">History</a></li> 
     <li ><a href="#">Redmine</a></li> 
     <li ><a href="#">Logout</a></li> --> 
     <li class="dropdown" > 
     <a aria-expanded="false" aria-haspopup="true" role="button" href="#" data-toggle="dropdown" class="dropdown-toggle"> 
      More <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li ><a href="#">Settings </a></li> 
      <li ><a href="#">Account</a></li> 
      <li ><a href="#">Types</a></li> 
      <li ><a href="#">Notifications</a></li> 
      <li ><a href="#">History</a></li> 
      <li ><a href="#">Redmine</a></li> 
      <li class="divider" role="separator"></li> 
      <li><a href="#">Logout</a></li> 
     </ul> 
     </li> 
    </ul> 

CSS：

.topnavi { 
    margin-top:26px; 
} 
.nav-pills.topnavi > li > a { 
    border-radius: 4px 4px 0 0; 
    background:#f2f2f2; 
    padding: 8px 12px; 
    font-size:12px; 
    color: #727272; 
    border:1px solid #e7e7e7; 
    border-bottom:none; 
} 
.nav-pills.topnavi > li.active > a, .nav-pills.topnavi > li.active > a:focus, .nav-pills.topnavi > li.active > a:hover { 
    background-color: #d9d9d9; 
    color: #5b5b5b; 
    border: none; 
} 
.nav-pills.topnavi > li + li { 
    margin-left: 3px; 
} 
.dropdown-menu 
{ 
    right:0px !important; 
    left:auto; 
} 

Answer 1

私は "もっと" メニューでメニュー・オーバーフローの次の行を停止したいです。

すべてのメニュー項目の合計幅と比較して、メニューの幅に応じて、リスト項目を追加して別のリストにプッシュする必要があります。

私のこの回答由来（とブートストラップのためにそれを適応）：https://stackoverflow.com/a/27450575/1355315

マークアップ：

スプリット2つのul S内のメニュー。 1つはメニュー用、もう1つはドロップダウン用です。

<div class="menuwrap"> 
    <ul id="menu" class="nav nav-pills menu"> 
     ...<!-- This will contain all the menu items --> 
    </ul> 
    <ul class="nav nav-pills collect"> 
     ...<!-- This will contain the dropdown --> 
    </ul> 
</div> 

のJavascript（jQueryの）コードフラグメント：

1. $menu.width()メニュー
2. varWidthの幅は、全ての幅の合計で取得：

   function collect() { 
       elemWidth = $menu.width(); 
       fitCount = Math.floor((elemWidth/varWidth) * ctr) - 1; 
       $menu.children().css({"display": "block", "width": "auto"}); 
       $collectedSet = $menu.children(":gt(" + fitCount + ")"); 
       $("#submenu").empty().append($collectedSet.clone()); 
       $collectedSet.css({"display": "none", "width": "0"}); 
   } 
   

   メニュー項目

3. ctr
4. fitCountメニュー幅
5. を超えるメニュー項目の数が8
6. $collectedSetを超えるすべてのそのようなアイテムを集めるステップ＃ゼロたすべてのアイテムの幅をリセット取得し、メニュー項目の数でありますメニューの幅
7. ドロップダウンメニューを空にして、収集したアイテムを追加します。
8. 元のアイテムの幅をゼロに設定します。http://jsfiddle.net/abhitalks/y0ypz38w/

   注：これは小さなシンプルなメニューやデモのために良いです

は、ここですべて一緒にこれを置くフィドルです。大きなものについては、メニュー項目を削除して、幅を変更したり変更したりする代わりに、ドロップダウンリストに移動する方がよいでしょう。また、最適化されていないため、エッジの場合にいくつかの問題が発生する可能性があります。アイデアが得られたら、ここから微調整することができます。

。