带有“更多”选项的响应菜单选项开始溢出父菜单。

Question

基本上，我有一个肚脐与11个链接，我希望它是响应。目标是，随着窗口越来越窄，第12条链接将显示为一个ddl，其中包括第11元素、第10元素等等。链接中的文本根据语言长度是可变的，因此链接的宽度并不相等。

这是标记(部分)的示例。

https://jsbin.com/fijakipesu/edit?html

实现这一目标的最佳途径是什么？

启动屏

Answer 1

发现了这个，而且很有魅力。对于任何试图实现响应/进步菜单的人，请尝试它。

http://jsfiddle.net/abhitalks/860LzgLL/

var elemWidth, fitCount, fixedWidth = 120,  
    $menu = $("ul#menu"), $collectedSet;
collect();
$(window).resize(collect);

function collect() {
    elemWidth = $menu.width();
    fitCount = Math.floor(elemWidth / fixedWidth) - 1;
    $collectedSet = $menu.children(":gt(" + fitCount + ")");
    $("#submenu").empty().append($collectedSet.clone());    
}

Answer 2

创建按钮，然后为桌面用户隐藏它，并显示完整的导航。使用@media，您可以显示按钮并隐藏移动设备的导航项。

当用户单击该按钮或将其悬停时，他们将获得导航项。

HTML：

    <button class='menu-button0'>Click me</button>
    <div id='showMe'>link1, link2, link3</div>

CSS，当移动设备访问您的页面时：

    #showMe(display:none;)
    .menu-button0:hover + #showMe{display:block;}

CSS，当桌面设备访问您的页面时：

   .menu-button0{display:none;}