在窗口调整大小时一一隐藏菜单项

Question

我正在开发一个导航栏，该导航栏由左侧浮动的徽标和菜单项以及右侧浮动的搜索栏和下拉按钮组成。当浏览器窗口达到一定的小尺寸时，导航栏元素将开始跳到下一行，因为没有足够的空间了。

看看这里：http://codepen.io/anon/pen/YXBaEK

如果水平空间用完，我希望每个菜单项一个接一个地消失，而不是开始一个新行。 （我仍然在搜索栏旁边的下拉菜单中有菜单链接）。

HTML

<div class="nav">
  <div class="item-left">Logo</div>
  <div class="menu">
    <a>-------Menu Item 1-------</a>
    <a>-------Menu Item 2-------</a>
    <a>-------Menu Item 3-------</a>
    <a>-------Menu Item 4-------</a>
    <a>-------Menu Item 5-------</a>
  </div>
  <div class="item-right">Search & Dropdown</div>
</div>

CSS

.nav {
  width: 100%;
}

.item-left {
  width: 300px;
  height: 50px;
  background-color: green;
  float: left;
}

.item-right {
  width: 300px;
  height: 50px;
  background-color: red;
  float: right;
}

.menu {
  height: 50px;
  background-color: yellow;
  float: left;
}

感谢您的帮助

编辑：菜单项的数量和内容不是静态的。不知道会有多少，里面写了什么。

Answer 1

我得到它只适用于 CSS。菜单项将中断到下一行，但导航具​​有固定大小，并且溢出：隐藏，因此您将看不到它们。

我用我的解决方案制作了一个 Codepen。 主要变化是：将导航改为固定高度：

.nav {
  height: 50px;
  width: 100%;
  overflow: hidden;
  width: 100%;
}

并将搜索项移到菜单前面

<div class="item-left">Logo</div>
<div class="item-right">Search & Dropdown</div>
<div class="menu">

然后我浮动的不是整个菜单，而是左侧的每个项目：

.menu a{
  float: left;
  height: 50px;
}

这里是 Codepen 的链接： http://codepen.io/anon/pen/bdzKYX

Answer 2

如果您还不知道菜单项的宽度，那么在纯 CSS 中很难解决这个问题，即便如此，您也必须不断更新媒体查询中的宽度。

这是一个粗略的 JavaScript 解决方案 - http://jsfiddle.net/vyder/eukr6m40/

$(document).ready(function() {
    var resizeMenu = function() {
        var windowWidth = $(this).width();

        // The width of stuff that needs to always be visible
        var fixedWidth = $('.item-left').width() + $('.item-right').width();

        // Remaining width that the menu can occupy
        var availableWidth = windowWidth - fixedWidth;

        resizeMenuToWidth(availableWidth);
    };

    var resizeMenuToWidth = function(availableWidth) {
        var widthSoFar = 0;

        // Iterate through menu items
        $('.menu a').each(function() {
            var itemWidth = $(this).width();

            // If the menu width has already exceeded the available space,
            // or if this menu item will cause it to exceed the space
            if( widthSoFar > availableWidth || (widthSoFar + itemWidth > availableWidth) ) {
                // Start hiding the menu items
                $(this).hide();
            } else {
                // Otherwise, show the menu item, and update the width count
                $(this).show();
                widthSoFar += itemWidth;
            }
        });
    };

    // Resize menu to when the page loads
    resizeMenu();

    // Also resize menu when the window is resized
    $(window).resize(resizeMenu);
});

在我的浏览器上有点不稳定，但您可以在此基础上使调整大小更平滑。

如果您有任何问题，请告诉我。

Answer 3

您需要为此使用媒体查询，例如：

@media (max-width: 1200px) { 
    .item-right { 
        display: none; 
    } 
}

Reference