Adding submenu to XML file

The next step in our menu tutorial will be creating the submenu for our Main Menu module. As we are creating the vertical menu, the submenu will appear on the right.

We will start with editing the structure.xml file. At first, let's find the Main Menu module which we created before and add new parameters to the <data> node:

        <module id="5" type="dynamicMenu" librarySymbolLinkage="MainMenu" resizable="true" smallIcon="images/modules/menu_small_icon.png" icon="images/modules/menu_icon.png">
            <name><![CDATA[Main menu]]></name>
            <template alpha="1" width="200" height="52">
                <data>
                    <menu/>
                    <itemRenderer>MainMenuItemRenderer</itemRenderer>
                    <dropDown>true</dropDown>
                    <maxDepth>1</maxDepth>    
                    <maxRootItems>-1</maxRootItems>
                    <dropDownOnRollOver>true</dropDownOnRollOver>
                    <dropDownMenuType>6</dropDownMenuType>
                    <dropDownItemRenderer>MainSubMenuItemRenderer</dropDownItemRenderer>                        
                </data>
            </template>
        </module>

<dropDown>true</dropDown> - this parameter enables the submenu.
<maxDepth>1</maxDepth> - maximal depth is the quantity of submenu levels.
<maxRootItems>-1</maxRootItems> - maximal number of main menu buttons (-1 is unlimited).
<dropDownOnRollOver>true</dropDownOnRollOver> - enables submenu drop down on mouse roll over; if false, then on mouse click.
<dropDownMenuType>6</dropDownMenuType> - ID of submenu module in this structure.xml file (will be added below).
<dropDownItemRenderer>MainSubMenuItemRenderer</dropDownItemRenderer> - a name of class from the library used for submenu button rendering (will be created below).

Now we add the submenu node to the structure.xml file:

        <module id="6" type="dynamicMenu" librarySymbolLinkage="MainSubMenu" resizable="false" locked="true" icon="images/modules/menu_icon.png"/>

id="6" - ID number, must conform to <dropDownMenuType> parameter of the main menu.
type="dynamicMenu" - module type for the control panel.
librarySymbolLinkage="MainSubMenu" - a name of class from the library which will contain the submenu logic (will be created below).
resizable="false" - disabling the submenu module resizing.
locked="true" - the locked module won't be displayed in the module menu of the control panel, and it can't be added to the stage manually.

So, now we have the main menu and the submenu modules described correctly in the structure.xml:

        <module id="5" type="dynamicMenu" librarySymbolLinkage="MainMenu" resizable="true" smallIcon="images/modules/menu_small_icon.png" icon="images/modules/menu_icon.png">
            <name><![CDATA[Main menu]]></name>
            <template alpha="1" width="200" height="52">
                <data>
                    <menu/>
                    <itemRenderer>MainMenuItemRenderer</itemRenderer>
                    <dropDown>true</dropDown>
                    <maxDepth>1</maxDepth>    
                    <maxRootItems>-1</maxRootItems>
                    <dropDownOnRollOver>true</dropDownOnRollOver>
                    <dropDownMenuType>6</dropDownMenuType>
                    <dropDownItemRenderer>MainSubMenuItemRenderer</dropDownItemRenderer>                        
                </data>
            </template>
        </module>
 
        <module id="6" type="dynamicMenu" librarySymbolLinkage="MainSubMenu" resizable="false" locked="true" icon="images/modules/menu_icon.png"/>

Sections

Step 1: Adding submenu to XML file