Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How about adding support of nested menus? #11

Open
KenZZ107 opened this issue Jan 7, 2017 · 12 comments
Open

How about adding support of nested menus? #11

KenZZ107 opened this issue Jan 7, 2017 · 12 comments

Comments

@KenZZ107
Copy link

KenZZ107 commented Jan 7, 2017

Would it support nested menus(submenus) by options like

{
   actions: [{
      name: 'have some sub Actions',
      actions: [{
         name: 'I am a sub item', 
         onClick: function() {...}
      }]
   },
   ...
   ]
}

?

@Nabid
Copy link

Nabid commented Jun 15, 2017

Sub-menu on hover/click will be remarkable.

@schmoove
Copy link

I'm working on a PR for this. Will hopefully get it finished this weekend

@schmoove
Copy link

schmoove commented Jun 18, 2017

Ok here is my fork which offers submenu support:

https://github.com/schmoove/bootstrap-menu/tree/master/dist

I have refactored it somewhat, replacing "actions" with "menuItems" (which I feel is more consistent with the new functionality and existing options), and removing actionGroups in favor of adding the divider to the "menuItems" object. Bootstrap 3 doesn't support submenus by default, so you will need to include the new BootstrapMenu.css file if you are using Bootstrap 3+

Here's a demo showing how the new "menuItems" option replaces "actions":

https://github.com/schmoove/bootstrap-menu/blob/master/docs/submenu-demo.html

I've only modified the dist files for now - let me know what you think of these changes, and I can update the src files for a possible PR to the original repo.

@lon9man
Copy link

lon9man commented Aug 23, 2017

Hello, have tried your fork (from dist-folder), it works. but it seems it needs some logic about positioning nested submenus. screenshot: https://drive.google.com/open?id=0B7YxJcgXibf5OTRQT3FvckRNOHc .
so each submenu (on some rendering-point) should analyze will it have enough space for showing.. if not it should be rendered (in some magic way) into another direction. what do you think?
thanks

@schmoove
Copy link

schmoove commented Aug 23, 2017 via email

@lon9man
Copy link

lon9man commented Aug 25, 2017

also can be useful (as option) adding title-attribute into menuitem-DOM, which by default in browsers shows as tooltip. possible use case: short explaining of the meaning for the strange:) text of the menuitem.
screen: https://drive.google.com/open?id=0B7YxJcgXibf5NVV2cjhiaWFSVzA

@schmoove
Copy link

schmoove commented Sep 6, 2017

Ok I've added force-left support for submenus if there is no space to the right.

If everything checks out I can open a PR if the @dgoguerra is interested in supporting this

@lon9man
Copy link

lon9man commented Sep 7, 2017

@schmoove
have tried, works as expected! screenshot: https://drive.google.com/open?id=0B7YxJcgXibf5RExGNWc0Ul9hN2M
what do you think about my last message related to the title-attribute (#11 (comment)) ?
thanks for your time

@schmoove
Copy link

schmoove commented Sep 7, 2017

Ok all set, and pushed to my repo

image

@lon9man
Copy link

lon9man commented Sep 8, 2017

@schmoove
ooh, it is made my day) your changes are very helpful, will check it with my sources!
big thanks

@lon9man
Copy link

lon9man commented Sep 21, 2017

@schmoove, it looks like a bug.

What i am doing
i am trying to use isEnabled-method, which dynamically must Disable/Enable menuitem.
https://jsfiddle.net/longman/d33ptjzy/ (your js is fully inserted into Javascript-window, my js is there at the bottom)

What i got
when menuitem was ONCE disabled then it NEVER can be enabled. it looks like wrong logic, which manipulates with css-classes.

FYI: i have investigated sources in BootstrapMenu.prototype.open-method.
Maybe problem in:
you got classes from DOM-element (in my case when menuitem disabled, it has 'disabled'-class)

baseClasses = $menuItem.attr('class')
...
var outputClasses = classNames(baseClasses,customClasses);
...
$menuItem.attr('class', outputClasses);

but dgoguerra got it only from options and doesn't use classes from DOM-element:

var action = _this.options.actions[actionId];
var classes = action.classNames || null;
...
$action.attr('class', classNames(classes || ''));

What i expect
it should Disable/Enable menuitem strictly to the result of isEnabled-method.
correctly workable example based on dgoguerra-sources: https://jsfiddle.net/longman/jzfxx004/2/

@dmkallan
Copy link

Ok all set, and pushed to my repo

FYI, seems to be a bug with this fork where a divider immediately following a menuItem with subMenuItems will not render.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants