Многоуровневое меню bootstrap 3
2020
19 января 2017, 02:38
вот код
<div class="dropdown">
<button type="button" data-toggle="dropdown" class="btn-small pull-right dropdown-toggle">Добавить<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-submenu">
<a href="#"><small>Договор<span class="caret"></span></small></a>
<ul class="dropdown-menu">
<li>
<a href="#"><small>Дополнительное соглашение о вселении членов семьи</small></a>
</li>
<li>
<a href="#"><small>Дополнительное соглашение о выбытии членов семьи</small></a>
</li>
</ul>
</li>
<li>
<a href="#"><small>Доп. соглашение<span class="caret"></span></small></a>
</li>
<li>
<a href="#"><small>Заявления<span class="caret"></span></small></a>
</li>
<li>
<a href="#"><small>Акты<span class="caret"></span></small></a>
</li>
</ul>
</div>Первый выпадающий список работает, второй -нет. Читала, что в третьем бутстрапе многоуровневость не предусмотрена. Как получить результат?
Answer 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>
</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;
}Второй пример HTML
<style>
body {
padding-top: 50px;
}
.navbar-template {
padding: 40px 15px;
}
</style>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">NavBar</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action [Menu 1.1]</a></li>
<li><a href="#">Another action [Menu 1.1]</a></li>
<li><a href="#">Something else here [Menu 1.1]</a></li>
<li class="divider"></li>
<li><a href="#">Separated link [Menu 1.1]</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link [Menu 1.1]</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.1] <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action [Menu 1.2]</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.2] <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.3] <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action [Menu 1.4]</a></li>
<li><a href="#">Another action [Menu 1.4]</a></li>
<li><a href="#">Something else here [Menu 1.4]</a></li>
<li class="divider"></li>
<li><a href="#">Separated link [Menu 1.4]</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link [Menu 1.4]</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action [Menu 2.1]</a></li>
<li><a href="#">Another action [Menu 2.1]</a></li>
<li><a href="#">Something else here [Menu 2.1]</a></li>
<li class="divider"></li>
<li><a href="#">Separated link [Menu 2.1]</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link [Menu 2.1]</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.1] <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action [Menu 2.2]</a></li>
<li><a href="#">Another action [Menu 2.2]</a></li>
<li><a href="#">Something else here [Menu 2.2]</a></li>
<li class="divider"></li>
<li><a href="#">Separated link [Menu 2.2]</a></li>
<li class="divider"></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.2] <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.3] <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action [Menu 2.4]</a></li>
<li><a href="#">Another action [Menu 2.4]</a></li>
<li><a href="#">Something else here [Menu 2.4]</a></li>
<li class="divider"></li>
<li><a href="#">Separated link [Menu 2.4]</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link [Menu 2.4]</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="navbar-template text-center">
<h1>Bootstrap NavBar (Updated: 15 Nov 2016)</h1>
<p class="lead text-info">NavBar with too many childs.</p>
</div>
</div><!-- /.container -->CSS
@media (min-width: 767px) {
.navbar-nav .dropdown-menu .caret {
transform: rotate(-90deg);
}
}И немножко javascript (jQuery)
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var $el = $(this);
var $parent = $(this).offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if(!$parent.parent().hasClass('nav')) {
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
}
$('.nav li.open').not($(this).parents("li")).removeClass("open");
return false;
});
});
-
19:12
-
21:12
Оборудование для ресторана: новинки профессиональной кухонной техники
-
22:17
-
22:13
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
-
20:12
-
20:06
-
19:59
-
19:51
-
19:43
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 48158 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30588 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 24102 visits
- Как через css изменить цвет png изображения? 10431 visits
- Blob video url download 10020 visits
- Php curl запрос через прокси с авторизацией 9302 visits
- Работа с captcha vk api 8163 visits
© "hostciti.net" 28.4.2025 | 16:37