用于折叠导航栏的CSS（也许是jQuery）

Question

我有一个水平导航栏。每个“按钮”是一个带有背景颜色和其他CSS设置的跨度，单击时使用jQuery呈现一个风格化的<ul>/<li>下拉菜单。每个按钮范围还包含使用普通<img>创建的图标。我的页面布局很流畅。

我的顶级导航宽度一般不太宽，但我希望能够处理不太合适的情况。我想实现的优雅解决方案涉及“折叠”导航栏，如果它太宽。让我知道你想要的意思：

完整导航宽度：

部分崩溃：

完全崩溃：

基本上，随着导航容器的宽度缩小，我希望最右边的按钮的文本消失，缩小以仅显示图标。如果导航的容器更小，下一个按钮也会缩小。只要有必要，这将继续，但我通常只希望外部按钮或两个按钮必须以这种方式折叠。您可能会在更高版本的Microsoft Office中的功能区控件上识别出类似的行为。

如何以干净兼容的方式实现此类行为？

请注意，我并不反对彻底改变这些元素。我只使用<span>作为按钮，因为这是我开始使用的。如果他们需要不同的东西，这对我来说没问题。

每个按钮如下所示：

<span class="menu_head" id="mnuButton">Button Name<img src="icon.png" alt="Button Name" /></span>

你可以找到我现在所拥有的JSFiddle：http://jsfiddle.net/9FwP7/1

Answer 1

这对我有用，假设#menu是容器，菜单项如下所示：

<div id="menu">
    <span class="menu_head" id="mnuButton1"><span>Button Name</span><img src="http://dummyimage.com/20x20/000/fff" alt="Button Name" /></span>
    <span class="menu_head" id="mnuButton2"><span>Button Name</span><img src="http://dummyimage.com/20x20/000/fff" alt="Button Name" /></span>
    <span class="menu_head" id="mnuButton3"><span>Button Name</span><img src="http://dummyimage.com/20x20/000/fff" alt="Button Name" /></span>
    <span class="menu_head" id="mnuButton3"><span>Button Name</span><img src="http://dummyimage.com/20x20/000/fff" alt="Button Name" /></span>
    <span class="menu_head" id="mnuButton4"><span>Button Name</span><img src="http://dummyimage.com/20x20/000/fff" alt="Button Name" /></span>
</div>

jQuery（可以更改为在resize（）上触发）：

    $(function () {
        // get total number of menu items
        var no_menu_items = $('.menu_head').length;
        var incrementer = 0;
        for (var i = 0; i < no_menu_items; i++) {
            // add the width of the current menu item
            incrementer += $('.menu_head').eq(i).width();
            if ($('#menu').width() < incrementer) {
                $('.menu_head').eq(i).find('span').hide();       
            }   
        }        
    });

Answer 2

http://jsfiddle.net/psjXh/2/

这里的原始JavaScript解决方案。它工作（我已经将容器设置为400px，但工作量较少。我还将其设置为溢出：隐藏，以便您可以查看是否/何时失败）

你可以用jQuery动画化（）这个过程，但这就是逻辑

Answer 3

这个只是你想要的基础知识。您可以根据需要添加动画或其他内容并对您自己的代码进行改造。

jsfiddle.net solution (updated)

<div id="container">
<ul>
    <li><div class="menu_head" id="mnuButton"><span>Button Name</span><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" alt="Button Name" /></div></li>
    <li><div class="menu_head" id="mnuButton"><span>Button Name das</span><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" alt="Button Name" /></div></li>
    <li><div class="menu_head" id="mnuButton"><span>Button Name</span><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" alt="Button Name" /></div></li>
    <li><div class="menu_head" id="mnuButton"><span>Button Name</span><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" alt="Button Name" /></div></li>
    <li><div class="menu_head" id="mnuButton"><span>Button Name</span><img src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png" alt="Button Name" /></div></li>
</ul>
</div>

$(window).resize(function() {
    var containerWidth = $("#container").width();

    // get sum of widths
    var totalWidth = 0;
    $("li").each(function(index) {
        totalWidth += parseInt($(this).width(), 10) + 11;
    });

    // get the width of the last element hidden
    var lasthiddenwidth = $("li span:hidden:first").width();
    if (containerWidth < totalWidth) {
        // if the menu no longer fits, hide the last visible element
        $("li span:visible:last").hide();    
    } else if (containerWidth > totalWidth + lasthiddenwidth) {
        // if the container can fit the menu and the last hidden element, show it again
        $("li span:hidden:first").show();           
    }

});