如何处理导航项上的溢出？

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