Багаторівневе спадне меню Twitter Bootstrap

89

Чи можна мати багаторівневе випадаюче меню, використовуючи елементи twitter bootstrap 2? В оригінальній версії цієї функції немає.

css  twitter-bootstrap 
— Хелнар
джерело
насправді шукав реалізацію, але мені не пощастило з нею.
— Hellnar
Можливо, вам потрібно меню лося-риби? htmldog.com/articles/suckerfish/dropdowns
— Елейн Марлі
1
подивіться і на це: github.com/twitter/bootstrap/issues/424
— Паоло

Відповіді:

113

Оновлена ​​відповідь

* Оновлена ​​відповідь, яка підтримує таблицю стилів завантажувальної версії v2.1.1 **.

** Але будьте обережні, оскільки це рішення було видалено з v3

Просто хотів зазначити, що це рішення більше не потрібне, оскільки остання завантажувальна програма тепер за замовчуванням підтримує багаторівневі випадаючі меню. Ви все ще можете використовувати його, якщо ви використовуєте старіші версії, але для тих, хто оновився до останньої версії (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
Починаючи з Bootstrap 2.0.4, ви також повинні мати декларацію "display: block;" у селекторі ".drop-menu li: hover .sub-menu".
— Омар,
Я спробував це реалізувати, перше підменю працює нормально. Але якщо я додаю ще одне підменю в тому ж меню, то все піде не так. З якоїсь причини воно відкриває перше підменю замість другого. Будь-які ідеї чи підказки будуть вітатися. Вже дякую :)
— Arjan
Гермес - Дивіться мою відповідь про те, як виправити прилипання підменю.
— Шон Лінч,
1
Для мобілізації цього виправлення @Kannika знадобиться додаткова розмітка і, можливо, також якийсь javascript. Я пропоную просто відображати випадаючий вміст другого рівня, а не приховувати його на мобільних пристроях, щоб підтримувати чистоту. Я спробую працювати над рішенням пізніше протягом дня. Однак я не тестував рішення початкового завантаження за замовчуванням, тому, якщо що, ви завжди можете піти з цим.
— Андрес Іліч,
5
Оновлена ​​версія працює лише з Bootstrap 2.3.2, її було видалено в Bootstrap 3.0
— seantomburke
34

[Twitter Bootstrap v3]

Щоб створити випадаюче меню на рівні n (сенсорне для пристрою) у Twitter Bootstrap v3,

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>
— Чіраю Чіріпал
джерело
На жаль, це не відображає меню, коли відображається кнопка "згорнутого" меню. У Chrome та у FF.
— Ben Power
@BenPower Чи можете ви надати демо-версію jsfiddle, щоб я міг розглянути її, оскільки демонстраційна версія jsfiddle, яку я дав, працює нормально. Також які версії Bootstrap, JQuery та веб-браузерів ви використовуєте?
— Chirayu Chiripal
Працює на Bootstrap v3.0. Бадді ... Не могли б ви зробити його підтримкою для Bootstrap v2.3.2?
— Niks Jain
1
Я додав trigger.off('click');перед налаштуванням слухачів, щоб запобігти "подвійному прослуховуванню" події на випадок, якщо ініціалізація javascript спрацьовує більше одного разу.
— FranBran
1
Інвертування каретки додало кілька рядків коду і є непотрібним.
— Рубен,
23

Цей приклад з 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;
}
— фандассон
джерело
Дякую тобі ! версія 3.0 більше не підтримує перевірену відповідь
— Асенар
13

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

.dropdown-menu li {
    position: relative;
}

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

Ось повна зміна менше / 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");
        }
    }
}
— Шон Лінч
джерело
4

Я просто додав class="span2"до <li>випадаючих пунктів, і це спрацювало.

— ЕГ
джерело
3

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

Це заощадить нам час на мобільний адаптивний стиль.

Цей плагін також дуже перспективний.

— Osify
джерело
Яка ваша думка про github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover ? Я не можу вирішити.
— Csaba Toth
1
@CsabaToth, цей також був на мою думку, якщо ви хочете мати лише API завантажувального javascript, ви можете піти з цим, досить легким для додавання та ознайомитись із загальними навичками завантажувального ремінця, якщо вам потрібно налаштувати.
— Осіфі
Нарешті, я буду використовувати одного з них в одному проекті, а інший - на супутньому сайті. Кожне рішення більше підходить одному з них
— Csaba Toth
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.