Closed mafar closed 9 years ago
This is something I'll have to do in the next version.
I noticed bootstrap's dropdown does not automatically adjust submenu position when close on borders. Is this something that should be added to the contextmenu?
I was able to handle sub-contextmenus by calling .menu() on the context menu before initializing the plugin.
ie:
$("#context-menu").menu(); $("#container").contextmenu({ "target" : "#context-menu", "onItem" : handleContextMenu });
Bootstrap 3.0 has removed the ability to support submenus, but it is possible to position Bootstrap 2.3.2 submenus correctly with this context menu plugin by adding the following code:
In ContextMenu.prototype.show
:
$menu.on('mouseover.context.data-api', items, $.proxy(this.layoutSubmenu, this))
In ContextMenu.prototype.closemenu
:
$menu.off('mouseover.context.data-api', items, $.proxy(this.layoutSubmenu, this))
Then add the method:
,layoutSubmenu: function (e) {
var parent = $(e.currentTarget);
if (!parent.is('.dropdown-submenu') || parent.is('.dropdown-submenu-positioned')) {
return;
}
parent.removeClass("pull-left dropup");
var child = parent.children('.dropdown-menu');
var childOffset = child.offset();
if (childOffset.left + child.outerWidth() > $(window).width()) {
parent.addClass("pull-left");
}
if (childOffset.top + child.outerHeight() > $(window).height()) {
parent.addClass("dropup");
}
parent.addClass('dropdown-submenu-positioned');
}
Note that with this solution, the CSS rule for .dropup. dropdown-submenu > .dropdown-menu
must be changed to .dropup.dropdown-submenu > .dropdown-menu
:
// Dropups
.dropup.dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
.border-radius(5px 5px 5px 0);
}
Since it's deprecated in Bootstrap I decided just to leave a comment here for anyone who (like me) really wanted this functionality regardless of whether Bootstrap thinks it's a good idea. I can submit a pull request if you like though!
bootstrap supports "dropdown-submenu". When I use submenu with this plugin, Parent Menu is ok but child menu goes off screen if too close to border of parent. http://getbootstrap.com/2.3.2/components.html