當屏幕長度比屏幕長時，將屏幕上的下拉菜單設置爲

Question

我想要一個屏幕靈活的菜單。當UL寬度比屏幕較小所有鋰是：

Menu1  Menu2  Menu3  Menu4 

但如果UL過長或屏幕變小：

Menu1  Menu2  Menu3  Menu4  Menu5  Menu6  More > 

其他菜單（Menu7，Menu8），使UL寬度長於屏幕是在新菜單的下拉菜單中列出'更多'

Answer 1

您必須使用媒體查詢。基本上，媒體查詢允許您根據瀏覽器的大小和其他此類動態功能來更改元素的CSS。你可以參考這個小提琴here。

我所做的就是我默認syling創建了標準導航欄與列表元素

<div class="navbar"> 
    <button class='small-nav'>Navigation</button> 
    <div class='nav-container'></div> 
    <div class="navbar-list"> 
     <ul> 
      <li class="active"><a href="#menu1">Menu1</a> 
      </li> 
      <li><a href="#menu2">Menu2</a> 
      </li> 
      <li><a href="#menu3">Menu3</a> 
      </li> 
      <li><a href="#menu4">Menu4</a> 
      </li> 
     </ul> 
    </div> 
</div> 

之後，我已經隱藏了按鈕和導航容器將最終持有列表項。現在，在瀏覽器縮放，媒體查詢將隱藏主列表，並顯示該按鈕

@media (max-width:480px) { 
    .navbar-list ul { 
     display:none; 
    } 
    .small-nav { 
     display:inline; 
    } 
} 

在點擊按鈕，您的列表內容可以查看和點擊。

var list = $('.navbar-list').html(); 
$('.nav-container').append(list); 
$('.small-nav').click(function() { 
    $('.nav-container').toggle(); 
}) 

由於媒體查詢未指定ul li元素的顯示樣式，因此它們將被視爲典型的項目列表。

使用Bootstrap摺疊插件在Twitter Bootstrap中介紹了一種更簡單快捷的方法。請參閱此鏈接here