引导菜单“更多”选项响应式问题

Question

我在我的工作中使用了Bootstrap。我有一堆菜单项在页面顶部，大约有15个菜单项。因此，我的顶部菜单不适应屏幕宽度。由于溢出的菜单，它会被分成下一行。我想通过添加一个名为"More"的菜单来停止菜单溢出到下一行。

思路是将溢出的菜单项移动到"More"菜单下拉列表中。但我不知道如何检测菜单溢出。如何将额外的菜单项移动到"More"下拉列表中？

我已经有了基本的结构和标记。

示例: http://jsfiddle.net/xFW8t/347/

<ul class="nav nav-pills topnavi">
      <li class="active" ><a href="#">Dashboard</a></li>
      <li ><a href="#">Docs</a></li>
      <li ><a href="#">Docs 2</a></li>
      <li ><a href="#">Docs 3</a></li>
      <li ><a href="#">Docs 4</a></li>
      <li ><a href="#">Data</a></li>
      <li ><a href="#">iWeb</a></li>
      <li ><a href="#">Program</a></li>
      <li ><a href="#">Config</a></li>
      <!-- <li ><a href="#">Smart Inside</a></li>
      <li ><a href="#">Settings </a></li>
      <li ><a href="#">Account</a></li>
      <li ><a href="#">Types</a></li>
      <li ><a href="#">Notifications</a></li>
      <li ><a href="#">History</a></li>
      <li ><a href="#">Redmine</a></li>
      <li ><a href="#">Logout</a></li> -->
      <li class="dropdown" >
        <a aria-expanded="false" aria-haspopup="true" role="button" href="#" data-toggle="dropdown" class="dropdown-toggle">
          More <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li ><a href="#">Settings </a></li>
          <li ><a href="#">Account</a></li>
          <li ><a href="#">Types</a></li>
          <li ><a href="#">Notifications</a></li>
          <li ><a href="#">History</a></li>
          <li ><a href="#">Redmine</a></li>
          <li class="divider" role="separator"></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </li>
    </ul>

CSS：

.topnavi {
    margin-top:26px; 
}
.nav-pills.topnavi > li > a {
    border-radius: 4px 4px 0 0;
    background:#f2f2f2;
    padding: 8px 12px;
    font-size:12px;
    color: #727272;
    border:1px solid #e7e7e7;
    border-bottom:none;
}
.nav-pills.topnavi > li.active > a, .nav-pills.topnavi > li.active > a:focus, .nav-pills.topnavi > li.active > a:hover {
    background-color: #d9d9d9;
    color: #5b5b5b;
    border: none;
}
.nav-pills.topnavi > li + li {
    margin-left: 3px;
}
.dropdown-menu
{
   right:0px !important; 
    left:auto;
}

- Bhavan Kumar Natarajan

Answer 1

我希望通过“更多”菜单来停止菜单溢出到下一行。

您需要根据菜单的宽度与所有菜单项的总宽度进行比较，收集额外的列表项并将它们推入一个单独的列表中。

从我的答案中派生（并为Bootstrap进行适应）：https://dev59.com/F4bca4cB1Zd3GeqPQQPn#27450575 标记： 将菜单分成两个ul。一个用于菜单，另一个用于下拉菜单。

<div class="menuwrap">
    <ul id="menu" class="nav nav-pills menu">
        ...<!-- This will contain all the menu items -->
    </ul>
    <ul class="nav nav-pills collect">
        ...<!-- This will contain the dropdown -->
    </ul>
</div>

Javascript（jQuery）代码片段：

function collect() {
    elemWidth = $menu.width();
    fitCount = Math.floor((elemWidth / varWidth) * ctr) - 1;
    $menu.children().css({"display": "block", "width": "auto"});
    $collectedSet = $menu.children(":gt(" + fitCount + ")");
    $("#submenu").empty().append($collectedSet.clone());  
    $collectedSet.css({"display": "none", "width": "0"});
}

何时使用:

1. $menu.width() 获取菜单的宽度
2. varWidth 是所有菜单项的总宽度
3. ctr 是菜单项的数量
4. fitCount 获取超过菜单宽度的菜单项数目
5. 重置所有项目的宽度，这在步骤＃8中被清零
6. $collectedSet 收集所有超出菜单宽度的项目
7. 清空下拉菜单并添加克隆的收集项目
8. 将原始项目的宽度设置为零。

以下是一个将所有内容整合在一起的fiddle: http://jsfiddle.net/abhitalks/y0ypz38w/

注意：这适用于小而简单的菜单和演示。对于更大的菜单，最好删除菜单项并移动到收集的下拉列表中，而不是克隆并更改宽度。此外，它没有优化，可能在边缘情况下出现问题。一旦理解了思路，您可以从这里开始进行微调。

.

- Abhitalks

---

太棒了！ - Vnuuk