Originally Posted by
Dave224
I'm working on adding responsive multilevel dropdown menus on the navigation bar to the ZCA Bootstrap template. I've added a dropdown button to the bar that when clicked, opens the first level dropdown. An item in this dropdown opens up a second level dropdown, but an item in the second dropdown will not open to the third level. The html follows the pattern for multilevel dropdown menu examples I can find for bootstrap 4. I'm a Bootstrap novice and would appreciate any suggestions. A sample of the relevant code follows.
Code:
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i> Level 1 Item 1</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i>Level 2 Item 1" </a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="https://blah...blah">Level 3 Item 1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
The following seems to work, but only after adding some supporting CSS and Javascript, inspired from https://bootstrapious.com/p/bootstra...level-dropdown
Code:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item">Level 1 Item 1</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Level 1 Submenu</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Level 2 Submenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Level 3 Item 1</a>
</li>
</ul>
</li>
<li><a class="dropdown-item">Level 2 Item 2</a></li>
</ul>
</li>
</ul>
</li>
stylesheet_submenu.css:
Code:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>a:after {
float: right;
border: none;
/* change the character and/or font below to suit what you have available */
content: "\f0da";
font-family: 'FontAwesome';
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 0px;
}
jscript_submenu.php
Code:
<script>
$(function() {
// ------------------------------------------------------- //
// Multi Level dropdowns
// ------------------------------------------------------ //
$("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
$(this).siblings().toggleClass("show");
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
});
});
</script>
You will probably need to tweak the CSS to increase some padding to provide indentation at subsequent levels, or add padding/margin classes to your HTML.
Bookmarks