在窗口调整大小时一对一隐藏菜单项 [英] Hide menu items one-by-one on window resize

问题描述

我正在研究由徽标和徽标组成的导航栏.菜单项向左浮动，搜索栏&一个向右浮动的下拉按钮.当浏览器窗口达到某个较小的尺寸时，导航栏元素将开始跳到下一行，因为空间不再足够.

I'm working on a navbar consisting of a logo & menu-items floating left and a searchbar & a dropdown-button floating right. When the browser window reaches a certain small size the navbar elements will start to jump into the next row, because there isn't enough space anymore.

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

如果水平空间用完了，我希望每个菜单项都不会消失，而不是开始新的一行. (我仍然在搜索栏旁边的下拉菜单中具有菜单链接).

Instead of starting a new row I'd like every menu item to disappear one-by-one if the horizontal space is running out. (I still have the menu links in a dropdown menu next to the search bar).

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;
}

谢谢您的帮助

菜单项的编号和内容不是静态的.我不知道里面会有多少，里面写着什么.

The number and the content of the menu items are not static. I dont know how many there will be and whats written inside.

推荐答案

我知道它仅适用于CSS.菜单项将跳至下一行，但导航栏的大小固定为溢出:隐藏，因此您将看不到它们.

I got it working only with CSS. The menu items will break to the next line, but the nav has a fixed size with overflow: hidden, so you'll not see them.

我用自己的解决方案制作了Codepen. 主要更改是:将导航更改为固定高度:

I made a Codepen with my solution. The main changes are: change the nav to fixed height:

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

并将搜索项移到菜单前面

and move the search item in front of the menu

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

然后我没有浮动整个菜单，而是浮动了每个单独的项目:

and then I floated not the whole menu but every single item to left:

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

以下是指向Codepen的链接: http://codepen.io/anon/pen/bdzKYX

here's the link to the Codepen: http://codepen.io/anon/pen/bdzKYX

这篇关于在窗口调整大小时一对一隐藏菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！