如何處理導航項上的溢出？

Question

比方說，我正在做一個網頁，並有一堆導航項目，如：

Home About Contact Help Something Something-Else Another 

以及基於瀏覽器的寬度，我想有可能不適合所有項目被放在一個下拉列表，像這樣：

休息日：

Home About Contact Help ... 

公開賽：

Home About Contact Help ... 
       --------^------------- 
       |  Something  | 
       | Something-Else | 
       |  Another  | 
       ---------------------- 

有沒有簡單的方法做到這一點？

Answer 1

你可以用JS做到這一切：

window.onresize = function(event) { 
    //Get the window width 
    var winWidth = window.width; 
    var navItemsWidth = 0; //you'll use this in a minute... 
    var extraNavItems = []; //you'll use this in a minute... 

    //Then iterate through each nav 
    var navItems = document.getElementsByClassName('navItem'); 
    for (var i = 0; i < navItems.length; i++) { 
    //Check the width of each item and compare to win width 
    navItemsWidth += navItems[i].innerWidth; 
    //if the width is greater than screen width... 
    if(navItemsWidth > winWidth) { 
     //add Items to an array 
     extraNavItems.push(navItems[i]); 
     //or you could add them to your drop down here... 
    } else { 
     //if you are still under winWidth add them to your navBar 
     document.getElementById('navBar').html += navItems[i]; 
    } 
    } 
}; 

或者你也可以看看CSS媒體查詢：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries