有没有人看到jQuery水平导航菜单将动态调整其大小？

Question

我有一个横向的元素列表，如下所示：

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

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

我已经看到了一些全菜单或无菜单，这些菜单将从移动设备的横向列表中创建一个“汉堡包”菜单.但我似乎找不到一个动态删除选项的方法，并根据用户的屏幕宽度将其填充到更多的菜单中。

有没有人看到这样的东西，并能指出正确的方向？

非常感谢！

Answer 1

您可以轻松地自己做，看看这个小提琴，或者运行下面的片段(完整的页面)：

​

$(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>

​

Answer 2

还有另一个解决方案：演示

​

$(function() {
    alignMenu();

    $(window).resize(function() {
        $("#horizontal").append($("#horizontal li.hideshow ul").html());
        $("#horizontal li.hideshow").remove();
        alignMenu();
    });

    function alignMenu() {
    var w = 0;
    var mw = $("#horizontal").width() - 150;
    var i = -1;
    var menuhtml = '';
    jQuery.each($("#horizontal").children(), function() {
        i++;
        w += $(this).outerWidth(true);
        if (mw < w) {
            menuhtml += $('<div>').append($(this).clone()).html();
            $(this).remove();
        }
    });
    $("#horizontal").append(
            '<li  style="position:relative;" href="#" class="hideshow">'
                    + '<a href="#">more '
                    + '<span style="font-size:13px">&#8595;</span>'
                    + '</a><ul>' + menuhtml + '</ul></li>');
    $("#horizontal li.hideshow ul").css("top",
            $("#horizontal li.hideshow").outerHeight(true) + "px");
    $("#horizontal li.hideshow").click(function() {
        $(this).children("ul").toggle();
    });
    if (menuhtml == '') {
        $("#horizontal li.hideshow").hide();
    } else {
        $("#horizontal li.hideshow").show();
    }
}
});

ul#horizontal, #horizontal ul  {
list-style-type: none;
margin: 0;
padding: 0;
}

#horizontal li {
float: left;  
}
#horizontal {
height: 50px;
float: left;
width:100%;
}
#horizontal a:visited {
font-weight: bold;
background-color: #98bf21;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#horizontal a:link, div.horizontal a:visited {
font-weight: bold;
background-color: #98bf21;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#horizontal a {
display: block;
line-height:50px;
  padding:38px 36px;
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    
}

#horizontal a:hover {
color: #333;
border-bottom:3px solid rgb(1,202,255);
padding-bottom:35px;
}

#horizontal li.hideshow ul{
position:absolute;
background: #f3f3f3;
display:none;
left:0px;
}

#horizontal li.hideshow
{
position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="horizontal">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>

</ul>

​