在调整菜单大小时将菜单项移动到溢出 div 中？

Question

我见过一些类似的问题，但答案似乎围绕着移动菜单和常规菜单之间的二进制切换，其中一些 JS 用于隐藏常规菜单（并显示移动菜单），只要有任何菜单项目溢出。

我要做的是从常规菜单中删除单个 LI 元素，并根据需要将它们移到溢出菜单中，

我会尝试说明；

初始菜单状态；

Home | About | Products | Services | Stuff | Contact

中间状态（window已调整大小，"contact"已移至溢出区域，“...”是溢出菜单，将包含所有隐藏项目.

Home | About | Products | Services | Stuff | ...

window进一步缩小，现在只有前2个菜单项能放得下，剩下的都在溢出区了

Home | About | ...

基本上，我只是想要一些方法来检测特定 LI 何时进入溢出区域，以便我可以相应地采取行动。我已经在使用 jQuery，所以我可以接受任何 jquery 解决方案。

Answer 1

所以我在这上面花了太多时间:-)
可以做到，但事实证明这很棘手。

一种方法是在 window 调整大小时循环浏览菜单，查看 li 顶部位置是否大于零。如果是这样，将其移至下一个菜单。

我的演示只将它们从第一个菜单移到第二个菜单。你需要想办法把它们移回去。

这是代码。抱歉，我无法获得完整的工作版本，但兄弟需要回去工作！
http://jsfiddle.net/rxs6q12d/3/

PS。 Whosebug 在链接到 jsfiddle 时需要一个代码片段。这与此无关 post 所以我就...

// include some code!

Answer 2

添加到乔的回答中：

http://jsfiddle.net/ha77c42h/1/

差不多我们重置了原来的设置，然后重新计算第二个菜单。这不会很好地扩展，但对于少量元素来说已经足够了。

具体添加：

var allArray   = new Array();
$('#menu1 li').each((index, elem) => {
    allArray.push($(elem));
})
$('#menu2 li').each((index, elem) => {
    allArray.push($(elem));
})
$(allArray).each((index, elem) => {
    $(elem).appendTo('#menu1');
})
$('#menu1 li').each(function(index, elem){
    var myposition = $(elem).position();
...

在调整菜单大小时将菜单项移动到溢出 div 中？

Moving menu items into overflow div as menu is resized?

html

css

jquery

menu