Twitter Bootstrap多级下拉菜单 [英] Twitter Bootstrap Multilevel Dropdown Menu

问题描述

使用twitter bootstrap 2的元素是否可以有一个多级下拉菜单？ p>

^{*支持v2.1.1 ** bootstrap版本样式表的更新答案。}

^{**但请小心，因为此解决方案已从v3中删除}

只是想指出，此解决方案不再需要，因为最新的引导程序现在默认支持多级下拉列表。你仍然可以使用它，如果你是旧版本，但对于那些更新到最新（v2.1.1在写作时），它不再需要了。下面是从文档中直接更新的默认多级下拉菜单：

http://jsfiddle.net/2Smgv/2858/

---

原始回答

strong>

在github上有一些子菜单支持问题，它们通常由引导开发人员关闭，例如这一个，所以我认为这是留给开发人员使用引导来工作的东西。这里是一个演示，我放在一起显示你如何可以一起工作的子菜单。

相关代码

CSS

  .dropdown-menu .sub-menu {
 left：100％; 
 position：absolute; 
 top：0; 
 visibility：hidden; 
 margin-top：-1px; 
} 
 
。dropdown-menu li：hover .sub-menu {
 visibility：visible; 
 display：block; 
} 
 
 .navbar .sub-menu：before {
 border-bottom：7px solid transparent; 
 border-left：none; 
 border-right：7px solid rgba（0，0，0，0.2）; 
 border-top：7px solid transparent; 
 left：-7px; 
 top：10px; 
} 
 .navbar .sub-menu：after {
 border-top：6px solid transparent; 
 border-left：none; 
 border-right：6px solid #fff; 
 border-bottom：6px solid transparent; 
 left：10px; 
 top：11px; 
 left：-6px; 
} 
  

创建我自己的 .sub菜单类应用于2级下拉菜单，这样我们可以将它们放在我们的菜单项旁边。还修改了箭头，将其显示在子菜单组的左侧。

演示

Is it possible to have a multi level dropdown menu by using the elements of twitter bootstrap 2? The original version doesn't have this feature.

解决方案

Updated Answer

^{* Updated answer which support the v2.1.1** bootstrap version stylesheet.}

^{**But be careful because this solution has been removed from v3}

Just wanted to point out that this solution is not needed anymore as the latest bootstrap now supports multi-level dropdowns by default. You can still use it if you're on older versions but for those who updated to the latest (v2.1.1 at the time of writing) it is not needed anymore. Here is a fiddle with the updated default multi-level dropdown straight from the documentation:

http://jsfiddle.net/2Smgv/2858/

---

Original Answer

There have been some issues raised on submenu support over at github and they are usually closed by the bootstrap developers, such as this one, so i think it is left to the developers using the bootstrap to work something out. Here is a demo i put together showing you how you can hack together a working sub-menu.

Relevant code

CSS

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

Created my own .sub-menu class to apply to the 2-level drop down menus, this way we can position them next to our menu items. Also modified the arrow to display it on the left of the submenu group.

Demo

这篇关于Twitter Bootstrap多级下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！