Bootstrap Menu with“;更多“;选项响应性问题
Bootstrap Menu with "More" option Responsive issue
我的工作使用了引导程序。我在页面顶部有一堆菜单项,大约有15项。因此,我的顶部菜单没有采用屏幕宽度。它被分解到由溢出的菜单引入的下一行。我想通过一个"更多"菜单来阻止菜单溢出到下一行。
想法是溢出的菜单项移动到"更多"下拉菜单。但我不知道如何检测菜单溢出。如何将额外的菜单项移动到"更多"下拉列表中?
我确实有一个基本的结构和标记。
Fiddle: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;
}
我想通过"更多"菜单来阻止下一行菜单溢出。
您必须收集额外的列表项,并将它们推到一个单独的列表中,这取决于菜单的宽度与所有菜单项的总宽度的比较。
根据我的这个答案(并将其改编为Bootstrap):https://stackoverflow.com/a/27450575/1355315
标记:
将菜单拆分为两个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"});
}
其中:
$menu.width()
获取菜单的宽度varWidth
是所有菜单项的总宽度ctr
是菜单项的数量fitCount
获取超过菜单宽度的菜单项数- 重置在步骤#8中归零的所有项目的宽度
$collectedSet
收集所有超过菜单宽度的项目- 清空下拉菜单并添加克隆的收集项目
- 将原始项目的宽度设置为零
这是一把小提琴,把这一切放在一起:http://jsfiddle.net/abhitalks/y0ypz38w/
注意:这适用于简单的小菜单和演示。对于较大的下拉列表,最好删除菜单项并移动到收集的下拉列表中,而不是克隆和更改宽度。此外,它没有经过优化,在边缘情况下可能会出现一些问题。有了这个想法,你可以从这里进行微调
相关文章:
- RubyonRails-Ajax响应的问题
- Http响应拆分安全问题的XMLHTTPRequest/Response用例的Filter实现
- 响应菜单问题-如何在移动环境中处理HREF和onclick事件
- node.js+MySQL;JSON结果-回调问题&没有响应客户端
- 响应出现JSON格式问题
- 位置问题:固定和响应/自适应布局
- 如何解决等待多个请求以javascript发送响应的问题
- 响应问题 JQzoom
- Internet Explorer Ajax 调用,缓存响应问题
- XMPP BOSH 响应问题
- Internet Explorer 中的 Json 响应问题
- Ajax响应问题
- 在响应问题上重写css元素
- Jquery动画&响应问题
- AJAX响应问题
- Dropdow菜单键盘响应问题
- 响应问题 jQuery 单击滑块
- 危险滑动器的响应问题
- 响应问题
- Ajax响应问题