This sample shows how you can clone a submenu. The "File" submenu is only defined once, but it is replicated several times very easily by just assigning some ID-s and class names accordingly. Here's how it's done:
<ul id="menu"> <li> File <ul id="the-file-menu"> ... content of the file menu </ul> </li> ... later ... <li class="clones-popup-the-file-menu"> Clone the file menu </li> </ul>
As you can see, you only need to add a certain, unique ID to the UL that defines the popup you would like to clone, and on items that should contain a copy of that menu add the class "clones-popup-ID" where ID is the one you assigned to the source UL.
NOTE that you need to pass an additional parameter to DynarchMenu.setup:
DynarchMenu.setup("menu", { clone: true });With this parameter on, DynarchMenu will clone the UL and LI contents that initialize the menu so that they can be reused a second time. If you don't pass this parameter then icons and HTML popups will only appear correctly in the first initialized menu.
You can clone a popup as many times you want. You can even use UL-s that aren't direct s of the main menu UL--in other words it doesn't matter where in the document are the UL-s that you wish to clone; DynarchMenu will do the job. To exemplify, following there's a menu that clones the same File popup of the first menu:
Warning: you should be careful not to create "recursive menus". They will work in "lazy" mode (when you pass "lazy: true" at DynarchMenu.setup) but will crash the browser in normal mode. You have been warned.