在重新调整大小以实现响应式布局时操作 jquery 菜单

问题描述

有带有列表项的简单菜单.UL LI.LI 的宽度和数量是动态的.还有下拉式更多"之类的东西.在悬停/单击时，它将显示剩余的 LI ，这将不适合可用空间.

我尝试在用户从右向左调整窗口大小时使用 jquery，它会隐藏最后一个可见的菜单项.这样做的可能方法是什么，并在更多"中添加 LI?链接.

尝试了一些选项，因为当我们调整大小时宽度变小，然后列表项移动到下方并增加 UL 的高度，所以使用这种方法我可以隐藏最后一个可见的.代码

必须修改 CSS 才能使其工作.我没有为任何元素提供静态尺寸，以便菜单无论其内容如何都可以响应.

工作原理:只有两个函数 contract() 和 expand()，当页面加载时 contract() 将被调用以将额外的项目移动到子菜单，当窗口调整大小时，如果它正在扩展 expand() 将被调用，如果它正在收缩 contract() 将被调用.

更新:添加了动画并在右侧固定了子菜单位置，请参阅演示.

There is simple menu with list itmes. UL LI. width and numbers of LI is dynamic. And there is dropdown kind of thing "more" on hover/click it will show remaining LI , which will not fit available space.

I tried using jquery while user resize windows from right to left, it will hide the last visible menu item. What is the possible way to do this revers and also add LI in "more" link.

Tried some option, as width is less when we resize then list item move below and increase height of UL so using this method I am able to hide last visible.code

http://jsbin.com/flexmenu/2/edit

Step 1

Step 2

Step 3

These steps will be reverse when user re-size (increase the width)

Markup

<div class="twelve columns filter-wrapper">
    <ul class="nav-bar-filter" id="nav-bar-filter">
        <li><a href="#">All</a></li>
        <li><a href="#">Small</a></li>
        <li><a href="#">Medium</a></li>
        <li><a href="#">Extra large</a></li>
        <li><a href="#">Text</a></li>
        <li><a href="#">Small-1</a></li>
        <li><a href="#">Medium-1</a></li>
        <li><a href="#">Extra large text</a></li>
        <li><a href="#">Large text</a></li>
        <li><a href="#">Text</a></li>
    </ul>
<ul id="more-nav">
  <li><a href="#">More > </a>
    <ul class="subfilter"><li><a href="#">Text</a></li></ul>
  </li>    
</ul>
</div>

Basically this menu will be used for responsive layout menu.Any help in this will be helpful.Edit 1: added markup

解决方案

$(document).ready(function () {
    var menu = $("#nav-bar-filter"),
        subMenu = $(".subfilter"),
        more = $("#more-nav"),
        parent = $(".filter-wrapper"),
        ww = $(window).width(),
        smw = more.outerWidth();

    menu.children("li").each(function () {
        var w = $(this).outerWidth();
        if (w > smw) smw = w + 20;
        return smw
    });
    more.css('width', smw);

    function contract() {
        var w = 0,
            outerWidth = parent.width() - smw - 50;
        for (i = 0; i < menu.children("li").size(); i++) {
            w += menu.children("li").eq(i).outerWidth();
            if (w > outerWidth) {
                menu.children("li").eq(i - 1).nextAll()
                    .detach()
                    .css('opacity', 0)
                    .prependTo(".subfilter")
                    .stop().animate({
                    'opacity': 1
                }, 300);
                break;
            }
        }
    }

    function expand() {
        var w = 0,
            outerWidth = parent.width() - smw - 20;
        menu.children("li").each(function () {
            w += $(this).outerWidth();
            return w;
        });
        for (i = 0; i < subMenu.children("li").size(); i++) {
            w += subMenu.children("li").eq(i).outerWidth();
            if (w > outerWidth) {
                var a = 0;
                while (a < i) {
                    subMenu.children("li").eq(a)
                        .css('opacity', 0)
                        .detach()
                        .appendTo("#nav-bar-filter")
                        .stop().animate({
                        'opacity': 1
                    }, 300);
                    a++;
                }
                break;
            }
        }
    }
    contract();

    $(window).on("resize", function (e) {
        ($(window).width() > ww) ? expand() : contract();
        ww = $(window).width();
    });

});

DEMO

Had to modify CSS to make it work.I didn't give static dimensions for any element so that the menu would be responsive regardless to it's contents.

How it works:there are simply 2 functions contract() and expand(), when page load contract() will be called to move extra items to submenu, when window is resized if it's expanding expand() will be called and if it's contracting contract() will be called instead.

UPDATE:added animation and fixed submenu location to the right, see the demo.

这篇关于在重新调整大小以实现响应式布局时操作 jquery 菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！