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

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