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

Question

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

看看这里: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 一起工作。菜单项将换行到下一行，但导航具​​有固定大小并带有 overflow: hidden，因此您将看不到它们。

我用我的解决方案制作了一个 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