Можно ли получить многоуровневое выпадающее меню с помощью элементов twitter bootstrap 2? В исходной версии этой функции нет.
css
twitter-bootstrap
Hellnar
источник
источник
Ответы:
Обновленный ответ
* Обновлен ответ, который поддерживает таблицу стилей версии v2.1.1 ** bootstrap.
** Но будьте осторожны, потому что это решение было удалено из 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класс для применения к двухуровневым раскрывающимся меню, таким образом мы можем размещать их рядом с нашими пунктами меню. Также изменена стрелка, чтобы отображать ее слева от группы подменю.Демо
источник
[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>источник
trigger.off('click');перед установкой слушателей, чтобы предотвратить «двойное прослушивание» события в случае, если инициализация javascript запускается более одного раза.Этот пример взят из 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; }источник
Я смог исправить то, что подменю всегда закреплялось в верхней части родительского меню из ответа Андреса, со следующим дополнением:
.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"); } } }источник
Я просто добавил
class="span2"к<li>для элементов раскрывающихся и работал.источник
Поскольку Bootstrap 3 удалил часть подменю, и нам нужно адаптировать стиль, я думаю, что лучше использовать SmartMenu Bootstrap: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#
Это сэкономит нам время на мобильную адаптивность и стиль.
Этот плагин тоже очень многообещающий.
источник