[英]Bootstrap 3 :How to display sub-menu of side navigation bar, bottom of each menu?
I am trying to make side navigation bar using Bootstrap 3. Now sub-menus are display right side of the each menu. 我正在尝试使用Bootstrap 3制作侧面导航栏。现在子菜单显示在每个菜单的右侧。 I want to display it bottom of parent menu.
我想将它显示在父菜单的底部。
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#">More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options2</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a href="#">More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level</a></li>
</ul>
</li>
</ul>
Edit: I try to do it using collapse jsfiddle.net/mridulpv/Wrh8x/5 . 编辑:我尝试使用折叠jsfiddle.net/mridulpv/Wrh8x/5来做到这一点 。 But still some problems.
但还是有些问题。 I want to hide collapse item at starting, and remove horizondal line etc.
我想在开始时隐藏折叠项目,并删除horizondal line等。
You can achieve this effect by not removing the sub-menus from the document flow. 您可以通过不从文档流中删除子菜单来实现此效果。 This means everything gets pushed down when the menu item is hovered.
这意味着当菜单项悬停时,所有内容都会被推下。 This does cause a problem with the third level, as when you mouse-out of the third level everything collapses up and you lose focus, but I don't believe it would be hard to get this menu functioning with clicks instead of hovers.
这确实导致了第三级的问题,因为当你将鼠标移出第三级时,一切都会崩溃并且你失去焦点,但我不相信这个菜单很难通过点击而不是悬停来运行。 (simply add/remove a class on click. See Edit.)
(只需在点击时添加/删除一个类。请参阅编辑。)
But here's what you want to do: 但这是你想要做的:
.dropdown-submenu > .dropdown-menu{
position: relative;
left: 0;
top: 0;
margin: 0;
}
http://jsfiddle.net/HCxB8/4/ http://jsfiddle.net/HCxB8/4/
You'll see as you mouse over the menu gets pushed down. 当鼠标悬停在菜单上时,你会看到被推下来。 This is due to me positioning relative rather than absolute.
这是由于我定位相对而非绝对。
EDIT : 编辑 :
With a bit more fiddling I managed to get clicking to work with very minimal jquery and a bit more css: 随着更多的摆弄,我设法点击使用非常小的jquery和更多的CSS:
JS: JS:
$('.dropdown-submenu > a').click(function(){
$(this).parent().children('.dropdown-menu').toggleClass('shown');
});
CSS: CSS:
.dropdown-submenu > .dropdown-menu{
position: relative;
left: 0;
top: 0;
margin: 0;
}
.dropdown-submenu:hover > .dropdown-menu{
display: none;
}
.shown{
display: block;
}
.dropdown-submenu:hover > .shown{
display: block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.