Hi, I would like to be able to have a dropdown menu with cascade so I can have multiple submenus. Also, menu-items should be from dropdown-item class. Is this possible? http://v4-alpha.getbootstrap.com/components/dropdowns/
Thank you.
Hi, I would like to be able to have a dropdown menu with cascade so I can have multiple submenus. Also, menu-items should be from dropdown-item class. Is this possible? http://v4-alpha.getbootstrap.com/components/dropdowns/
Thank you.
BSS isn't on Boostrap4 yet that's coming soon once Boostrap have released BS4
Guess the only way for you to do what you want now is ton use the custom code component and manually code what you want.
So here's the thing, the Bootstrap Devs (getbootstrap.com) decided to remove support for multi-tier dropdown menus in v3.
I speculate that it's related to the whole mobile first approach.
If your willing to edit the Bootstrap.js file you can try http://www.jeffmould.com/2014/01/09/responsive-multi-level-bootstrap-menu/.
However, the following may work for you from stackoverflow.com
http://stackoverflow.com/questions/23430283/bootstrap-3-multi-tier-navigation-menu-support-for-mobiles-and-up
The fiddle for it http://jsfiddle.net/mfirdaus/chJC4/
Saj
Do this :)
https://www.gaslampmedia.com/multilevel-dropdown-menus-bootstrap-3-x/
/**
* NAME: Bootstrap 3 Triple Nested Sub-Menus
* This script will active Triple level multi drop-down menus in Bootstrap 3.*
*/
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// Re-add .open to parent sub-menu item
$(this).parent().addClass('open');
$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});
You just have to add that snippet of JS code into one of your custom js files or create a new js file specifically for it.
You will need to position the submenu because apparently Bootstraps' designated class "dropdown-menu-right" doesn't actually position the submenu to the right, so add a class to the submenu ul.
.dropdown-menu.submenu{
left:100%;
}
You will have to create your submenus using the custom code option because the Bootstrap app won't let you drag and drop a List into any of the Menu Items.
I was able to make this work on a new project using just this js snippet and custom coded the whole nav and copy pasted the dropdown code into the "First Item"
Hope that helps :)
Saj