jquery - 如果太长，将添加下拉选项的水平菜单

Question

我正在构建一个需要水平菜单的网站，并且它们都需要放在一行中，但是如果他们添加了太多菜单项，我们希望最后一项转换为下拉菜单项，其中包含任何没有的菜单项不适合。

我不希望它成为“在 5 菜单之后”启动下拉菜单的解决方案，我希望脚本知道菜单很长并在需要时自动创建它。

所以如果他们放了一个菜单

短链接 - 短链接 - 短链接 - 短链接 - 短链接

它会正常显示，没有下拉菜单，但是如果他们疯狂地添加二十个项目，它会像

短链接 - 短链接 - 短链接 - 短链接 - 短链接 - [下拉与其他 15 个链接]

希望它成为一个 jquery 解决方案，但不一定是。

Answer 1

使用 jQuery，您可以将事件分配给窗口调整大小。当它达到特定点时，进行更改。

$(window).resize(function() {
    if ($(window).width() < whatever) {
        //Change the menu...
        //eg. $('#menu').addClass('condensed');
    }
});

你甚至可以用纯 CSS 来尝试。

@media only (max-width: whatever) {
    #menu {
        /* Override with new styling */
    }
}