add support for submenu

[mafar]

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

    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
    ...
    </ul>
    </li>
    </ul>
'''

[sydcanem]

This is something I'll have to do in the next version.

[sydcanem]

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?

[morgandenning]

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 });

[richardingham]

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!