Возможно ли иметь выпадающее меню с несколькими уровнями, используя элементы twitter bootstrap 2? В оригинальной версии эта функция отсутствует.
Многостраничное раскрывающееся меню Twitter Bootstrap
Ответ 1
Обновленный ответ
* Обновленный ответ, который поддерживает таблицу стилей версии версии v2.1.1 ** bootstrap.
** Но будьте осторожны, потому что это решение было удалено из v3
Просто хочу отметить, что это решение больше не требуется, поскольку последний загрузочный файл теперь поддерживает по умолчанию многоуровневые выпадающие списки. Вы все еще можете использовать его, если находитесь в более ранних версиях, но для тех, кто обновился до последней версии (v2.1.1 на момент написания), он больше не нужен. Вот скрипка с обновленным по умолчанию многоуровневым раскрывающимся списком прямо из документации:
http://jsfiddle.net/2Smgv/2858/
Оригинальный ответ
Были затронуты некоторые проблемы, связанные с поддержкой подменю в github, и обычно они закрываются разработчиками bootstrap, такими как этот, поэтому Я думаю, разработчикам, использующим загрузочный блок, нужно что-то сделать. Вот демонстрация, которую я собрал, показывая вам, как вы можете взломать рабочее подменю.
Соответствующий код
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
[Twitter Bootstrap v3]
Чтобы создать раскрывающееся меню n-level (сенсорное устройство, дружественное) в 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>
Ответ 3
Этот пример приведен из 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;
}
Ответ 4
Я смог зафиксировать подменю, всегда прикрепляясь к верхней части родительского меню из ответа Andres со следующим дополнением:
.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");
}
}
}
Ответ 5
Я просто добавил class="span2" в <li> для выпадающих элементов и работал.
Ответ 6
Так как Bootstrap 3 удалил часть подменю, и нам нужно адаптироваться к стилю, я думаю, что лучше пойти с SmartMenu Bootstrap: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#
Это сэкономит нам время на мобильный отзыв и стиль.
Этот плагин также очень перспективен.