javascript - HTML - 带有 "more"下拉菜单的动态水平导航

Question

我必须实现一个需要在页面顶部设置水平导航栏的设计。此导航栏中可能有未知数量的元素。如果栏的空间用完了，超出的链接将被填充到“更多”下拉列表中。

视觉:

|page                                            |
|nav item 1   nav item 2    nav item 3   MORE v  |
|                                                |

在“more”中会有“nav item 4”和“nav item 5”。它会随着屏幕尺寸而变化。

我的想法是使用 JavaScript 将链接一次一个地移动到下拉列表，直到导航栏的边界框达到可接受的大小。然而，随着屏幕闪烁和跨浏览器的JS问题，这个想法让我悲伤 Pandas 。有没有更好的办法？如果您遇到过用于此类事情的某些框架或纯基于 CSS 的解决方案或没有我的想法那么糟糕的事情，请告诉我。

与此同时，我将尝试说服 The Powers That Be 只使用下拉菜单，而不是用不一致的内容使屏幕困惑。

Answer 1

http://jsfiddle.net/mblase75/cM7sU/

我知道您没有要求使用 jQuery，但它使代码短得多。不过，没有它，这里没有什么是做不到的。

您可以看到代码是如何工作的，希望是——通过菜单向后循环并查看最后一项的垂直偏移是否与第一项的垂直偏移不同。如果是这样，将其推到“更多”下拉菜单下并继续循环；如果不是，则跳出循环。它包含在一个与 window.resize 事件和 document.ready 事件相关联的函数中。

显然，这段代码在功能方面缺少很多，但它应该可以帮助您入门。

function shorterMenu() {
    $('#moreitems').children().unwrap().first().remove();
    $items = $('#menu div');
    $more = $('<div id="moreitems" class="menuitem"></div>');
    for (var i = $items.length; i--;) {
        $this = $items.eq(i);
        if ($this.offset().top > $items.eq(0).offset().top || $more.offset().top > $items.eq(0).offset().top) {
            $('#menu').append($more);
            $more.prepend($this);
        } else {
            i = 0; // end for
        }
    }
    if ($more.children().length) {
        $more.prepend('<div id="more" class="menuitem">More</div>');
    }
}
$(document).ready(shorterMenu);
$(window).resize(shorterMenu);