Positioning Sub Menu

[jojo-tutor]

I'm finding a solution to position the Sub Menus directly as a child to a certain Menu, not on a different DOM node. Any ideas ?

[benjycui]

Please provide more details.

[jojo-tutor]

I mean, is there a way that the DOM structure would look like this one?

<ul class="rc-menu rc-menu-root rc-menu-horizontal">
   <li class="rc-menu-submenu rc-menu-submenu-horizontal">
      <div class="rc-menu-submenu rc-menu-submenu-popup">
         <ul class="rc-menu rc-menu-sub rc-menu-vertical">
            ...
         </ul>
      </div>
    </li>
</ul>

[benjycui]

Try getPopupContainer, see: http://react-component.github.io/menu/#menu-props

[borisrorsvort]

@benjycui, could you provide a pen for this? I don’t see very well how to achieve this.
This used to be the default behaviour, and with the update to react 16 this brakes compat.

With the current default solution, it’s not possible to achieve this (submenu top aligned with parents).

@picodoth any idea?

[picodoth]

@borisrorsvort are you talking about the same issue (mount submenu on a particular node) here?

If you're only talking about the position (submenu top aligned with parents) rather than the dom structure, will #112 (comment) help your issue?

[borisrorsvort]

@picodoth Yep this would solve it. Anyone working on this?

[picodoth]

@borisrorsvort i think #112 could not solve your particular use case, that would be a custom placement config(similar to this: http://yiminghe.me/dom-align/examples/simple.html) for entire menu to specify where the popover should appear relatively to the parent node. However, in your case seems like you have to do a case by case situation since you want the popover always align with the previous menu. It's not easy since the target node(active node) keeps changing

[likan999]

I am also looking for it. I am writing a chrome extension whose popup page is a cascading menu. The sub menu here doesn't take DOM space, so the popup page won't show the submenus properly. Any suggestions?