操作jquery菜单上的大小为响应布局 [英] Manipulate jquery menu on re-size for responsive layout

问题描述

有列表itmes的简单菜单。 UL LI。 LI的宽度和数量是动态的。并且有悬停/点击下拉类型的事情更多将显示剩余的LI，这将不适合可用空间。

我尝试使用jquery，而用户调整大小窗口从右到左，它将隐藏最后一个可见的菜单项。

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

无法修改CSS以使其工作。
我没有给任何元素的静态尺寸，所以菜单将响应，不管它的内容。

它是如何工作的：
只有2个函数 contract（）和 expand（） 将被调用以将额外的项目移动到子菜单，当窗口调整大小时，如果它扩展 expand（）将被调用，如果它的约定<$ c

更新：
向右添加了动画和固定的子菜单位置，演示。

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菜单上的大小为响应布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！