Bootstrap 3 is still at RC, but I was just trying to implement it. I couldn\'t figure out how to put a sub menu class. Even there is no class in css and even the new docs do
Shprink's code helped me the most, but to avoid the dropdown to go off-screen i updated it to:
JS:
$('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();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
var menu = $(this).parent().find("ul");
var menupos = $(menu).offset();
if (menupos.left + menu.width() > $(window).width()) {
var newpos = -$(menu).width();
menu.css({ left: newpos });
} else {
var newpos = $(this).parent().width();
menu.css({ left: newpos });
}
});
CSS: FROM background-color: #eeeeee TO background-color: #c5c5c5 - white font & light background wasn't looking good.
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #c5c5c5;
border-color: #428bca;
}
I hope this helps people as much as it did for me!
But i hope Bootstrap add the subs feature back ASAP.