Skip to navigation
Bootstrap Multilevel Dropdown
16.02.21
css: dropdown-submenu { position: relative; } .dropdown-submenu>a:after { content: "\f0da"; float: right; border: none; font-family: 'FontAwesome'; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: 0px; margin-left: 0px; } html:
Multilevel Dropdown
Dropdown
Some action
Some other action
Hover for action
level 2
level 2
3rd level
3rd level
level 2
level 2
About
Services
Contact
js: $(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"); }); }); });
https://bootstrapious.com/p/bootstrap-multilevel-dropdown
Reply
Anonymous
Information Epoch 1711725991
Using text data files.
Home
Notebook
Contact us