Question

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

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

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。主要变化是：将导航改为固定高度：

res = { description : "this is a object", array : [a.x,"b","c","d"]}

并移动菜单前面的搜索项

.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">

这是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

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

3 个答案: