jquery - 有没有人见过会动态调整其大小的 jQuery 水平导航菜单？

Question

我有一个水平样式的元素列表:

选项 1 |选项 2 |选项 3 |选项 4 |更多

现在列表实际上很长(20 个选项)。我想让菜单动态调整并填写一个下拉列表，当您用无法在用户屏幕上显示的选项 X 突出显示更多选项时出现。

我见过一些全有或全无的菜单，这些菜单可以通过响应式布局从移动设备等的水平列表中创建一个“汉堡包”菜单……但我似乎找不到一个将一次动态地删除一个选项，并根据用户的屏幕宽度将它们填充到“更多”菜单中。

有没有人见过这样的事情并能指出正确的方向？

非常感谢!

Answer 1

你可以轻松自己做，看看这个Fiddle ，或运行下面的代码片段(整页):

$(document).on('ready', function () {
    function getHiddenItems() {
        var isOneLine = true;
        var topPosition = false;
        var invisibleItems = $('<ul/>');
        $('.menu li').each(function () {
            var thisPosition = $(this).position();
            if (topPosition === false) {
                topPosition = thisPosition.top;
            } else if (thisPosition.top > topPosition) {
                invisibleItems.append($(this).clone());
                isOneLine = false;
            };
        });
        return isOneLine ? false : invisibleItems;
    };

    function checkMenu() {
        $('.more').hide();
        var hiddenItems = getHiddenItems();
        if (!hiddenItems) {

            $('.more_menu').html('');
        } else {
            $('.more').show();
            /* What items are not visible now? */
            hiddenItems = getHiddenItems();
            $('.more_menu').html('<ul>' + hiddenItems.html() + '</ul>');
        };
    };
    $('.more').on('click', function (e) {
        e.preventDefault();
        $('.more').toggleClass('more_menu_opened');
        $('.more_menu').toggleClass('active');
    });
    $(window).on('resize', checkMenu);
    checkMenu();
});

* {
    margin: 0;
    padding: 0;
}
body {
    margin: 20px 0;
    font-family: Arial, sans-serif;
}
.menu {
    list-style-type: none;
    height: 35px;
    overflow: hidden;
}
.more_menu {
    display: none;
}
.more_menu.active {
    display: block;
}
.menu li {
    display: block;
    float: left;
    height: 35px;
    line-height: 35px;
    white-space: nowrap;
    padding: 0 10px;
}
.more {
    display: block;
    float: right;
    height: 35px;
    line-height: 35px;
    white-space: nowrap;
    padding: 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="more" href="#show_all">More</a>
<ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>
<br />
<br />
<div class="more_menu"></div>