Twitter Bootstrap Многоуровневое Выпадающее Меню

возможно ли иметь многоуровневое выпадающее меню, используя элементы Twitter bootstrap 2? В оригинальной версии этой функции нет.

86
css twitter-bootstrap

6 ответов

Обновил Ответ

* обновленный ответ, который поддерживает v2.1.1 * * bootstrap версия таблицы стилей.

* * но будьте осторожны, потому что это решение было удалено из v3

просто хотел отметить, что это решение больше не нужно, так как последняя bootstrap теперь поддерживает многоуровневые выпадающие списки по умолчанию. Вы все еще можете использовать его, если вы находитесь в более старых версиях, но для тех, кто обновился до последней версии (v2.1.1 на момент написания статьи) он не нужен. Вот скрипка с обновленным многоуровневым выпадающим списком по умолчанию прямо из документации:

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

Оригинальный Ответ

были подняты некоторые вопросы о поддержке подменю в 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-menu применить к 2-уровня выпадающего меню, таким образом, мы можем расположить их рядом с нашим меню. Также изменена стрелка, чтобы отобразить ее слева от группы подменю.

демо

111

[Twitter Bootstrap v3]

чтобы создать выпадающее меню n-уровня (touch device friendly) в Twitter Bootstrap v3,

  • jsfiddle-демонстрация выпадающего меню n-уровня В3.0.0 | В3.1.1 | В3.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>
33

этот пример из http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

работает для меня в 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;
}
22

я смог исправить подменю, всегда прикрепленную к верхней части родительского меню из ответа Андреса со следующим добавлением:

.dropdown-menu li {
    position: relative;
}

Я также добавляю значок "icon-chevron-right" на элементы, которые содержат подменю меню, и изменить значок с черного на белый при наведении (чтобы дополнить текст меняется на белый и выглядеть лучше с выбранным синим фоном).

вот полное изменение less / css (замените выше этим):

.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");
        }
    }
}
13

Я только что добавил class="span2" до <li> для выпадающих элементов, и это сработало.

4

поскольку Bootstrap 3 удалил часть подменю, и нам нужно адаптировать стиль, я думаю, что лучше пойти с загрузкой SmartMenu:https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#

Это сэкономит нам время на мобильных адаптивных и стиль.

этот плагин также очень перспективным.

3