Menu thả xuống đa cấp của Twitter Bootstrap

Có thể có menu thả xuống nhiều cấp bằng cách sử dụng các phần tử của twitter bootstrap 2 không? Phiên bản gốc không có tính năng này.

Cập nhật câu trả lời

^{* Cập nhật câu trả lời hỗ trợ biểu định kiểu phiên bản v2.1.1 ** bootstrap.}

^{** Nhưng hãy cẩn thận vì giải pháp này đã bị xóa khỏi v3}

Chỉ muốn chỉ ra rằng giải pháp này không cần thiết nữa vì bootstrap mới nhất hiện hỗ trợ trình đơn thả xuống nhiều cấp theo mặc định. Bạn vẫn có thể sử dụng nó nếu bạn đang sử dụng các phiên bản cũ hơn nhưng đối với những người đã cập nhật lên phiên bản mới nhất (v2.1.1 tại thời điểm viết bài) thì không cần nữa. Dưới đây là một mẹo với trình đơn thả xuống đa cấp mặc định được cập nhật ngay từ tài liệu:

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

Câu trả lời gốc

Đã có một số vấn đề được nêu ra về hỗ trợ menu con trên github và chúng thường bị đóng bởi các nhà phát triển bootstrap, chẳng hạn như vấn đề này , vì vậy tôi nghĩ rằng việc này sẽ để các nhà phát triển sử dụng bootstrap giải quyết. Đây là một bản demo mà tôi tổng hợp cho bạn thấy cách bạn có thể hack cùng một menu phụ đang hoạt động.

Mã liên quan

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

Đã tạo .sub-menulớp của riêng tôi để áp dụng cho menu thả xuống 2 cấp, bằng cách này, chúng ta có thể đặt chúng bên cạnh các mục menu của mình. Đồng thời sửa đổi mũi tên để hiển thị nó ở bên trái của nhóm menu con.

Bản giới thiệu

[Twitter Bootstrap v3]

Để tạo menu thả xuống cấp n (thân thiện với thiết bị cảm ứng) trong Twitter Bootstrap v3,

• jsfiddle-demo trình đơn thả xuống cấp n v3.0.0 | v3.1.1 | v3.3.0

CSS:

.dropdown-menu>li /* To prevent selection of text */
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
.dropdown-menu .sub-menu 
{
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;
}
.right-caret:after,.left-caret:after
 {  content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}
.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

JQuery:

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        var grandparent=$(this).parent().parent();
        if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
        var root=$(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});

HTML:

<div class="dropdown" style="position:relative">
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li>
            <a class="trigger right-caret">Level 1</a>
            <ul class="dropdown-menu sub-menu">
                <li><a href="#">Level 2</a></li>
                <li>
                    <a class="trigger right-caret">Level 2</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                        <li>
                            <a class="trigger right-caret">Level 3</a>
                            <ul class="dropdown-menu sub-menu">
                                <li><a href="#">Level 4</a></li>
                                <li><a href="#">Level 4</a></li>
                                <li><a href="#">Level 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
    </ul>
</div>

Ví dụ này là từ http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

Hoạt động cho tôi trong Bootstrap v3.1.1.

HTML

<div class="container">
<div class="row">
    <h2>Multi level dropdown menu in Bootstrap 3</h2>
    <hr>
    <div class="dropdown">
        <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Some action</a></li>
          <li><a href="#">Some other action</a></li>
          <li class="divider"></li>
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Hover me for more options</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Second level</a></li>
              <li class="dropdown-submenu">
                <a href="#">Even 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>
    </div>
</div>

CSS

.dropdown-submenu {
position: relative;
}

.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
display: block;
}

.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}

.dropdown-submenu.pull-left {
float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}

Tôi đã có thể sửa lỗi menu phụ luôn ghim vào đầu menu mẹ từ câu trả lời của Andres bằng cách bổ sung sau:

.dropdown-menu li {
    position: relative;
}

Tôi cũng thêm biểu tượng "icon-chevron-right" trên các mục chứa menu phụ của menu và thay đổi biểu tượng từ đen sang trắng khi di chuột (để khen văn bản chuyển sang màu trắng và trông đẹp hơn với nền màu xanh lam đã chọn).

Đây là thay đổi less / css đầy đủ (thay thế ở trên bằng điều này):

.dropdown-menu li {
    position: relative;

    [class^="icon-"] {
        float: right;
    }

    &:hover {
        // Switch to white icons on hover
        [class^="icon-"] {
            background-image: url("../img/glyphicons-halflings-white.png");
        }
    }
}

Tôi chỉ cần thêm class="span2"vào <li>cho các mục thả xuống và làm việc.

Vì Bootstrap 3 đã loại bỏ phần menu con và chúng ta cần tự điều chỉnh phong cách, tôi nghĩ tốt hơn nên sử dụng SmartMenu Bootstrap: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#

Điều đó sẽ giúp chúng tôi tiết kiệm thời gian trên thiết bị di động và kiểu dáng.

Plugin này cũng rất hứa hẹn.