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

Posted 2023-04-12

【中文标题】在窗口调整大小时一一隐藏菜单项

【英文标题】：Hide menu items one-by-one on window resize

【发布时间】：2015-10-29 06:02:26

【问题描述】：

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

看看这里：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;

感谢您的帮助

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

【问题讨论】：

你确定这就是你想要做的吗？对于一个看起来有点傻的网站.. 链接是用来引导用户浏览网站的，当窗口太小时，为什么要去掉其中的一些？创建一个汉堡式菜单会不会更好，当达到菜单链接的宽度时会出现新菜单？

听起来你需要Priority+ Navigation

【参考方案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

【讨论】：

当您的老板发布您问题的正确答案时的尴尬时刻。无论如何，这正是我想要的。谢谢老板。

它不处理可访问性。将焦点放在最后一个可见按钮上，然后按 Tab，就会出现隐藏的按钮。

【参考方案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);
);

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

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

【讨论】：

哇，所以真的没有一个简单的 html 和 css 唯一的解决方案。很高兴知道这并不完全明显。谢谢老兄！

【参考方案3】：

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

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

Reference

【讨论】：

如果我正确理解他的问题，我真的不认为这就是他要找的东西。

是的，ThomasBormans 同意你的观点，因为通过这段代码，只有一个菜单会被隐藏，而不是全部，因为如果没有空格，op 想要一个一个地隐藏所有菜单，所以它完全错误的答案。

菜单项的内容是动态的，所以我不知道有多少和宽度是多少：/据我所知，这就是为什么媒体查询对我没有太大帮助的原因。不过感谢您的宝贵时间！