Question

基本上我有一个带有11个链接的导航栏，我希望它能够响应。目标是，随着窗口越来越窄，第12个链接将显示为包含第11个元素的ddl，第10个元素，依此类推。链接中的文本根据语言的长度可变，因此链接的宽度不相等。

这是标记（部分）的例子 https://jsbin.com/fijakipesu/edit?html

实现这一目标的最佳方法是什么？

Answer 1

创建按钮，然后为桌面用户隐藏它并显示完整的导航。使用@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;}

Answer 2

找到了这个，并且像一个魅力。对于那些试图获得响应/渐进式菜单的人，请尝试一下。

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());    
}

具有“更多”选项的响应菜单作为菜单选项开始溢出父项

2 个答案: