jquery - 用于折叠导航栏的 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();       
            }   
        }        
    });