NlsMenu Pro
addobject.com
Loading Menu from XML
NlsMenu Professional - Advanced Javascript Drop Down Menu Control
   

Load from XML

NlsMenu supports loading menu from XML file or XML string. The xml defines the menu structure and configuration.

1. Create the XML File/String

Below is the basic XML file skeleton for the NlsMenu


          <menumgr id="mgr" flowoverformelement="false" defaulteffect="fade" icpath="img/" memorizesel="false">
            <menubar id="menubar" orient="H" showicon="false" showsubicon="false" target="" stlprf="">
              <items>
                <item id="1" url="" ico="" enb="true" title="" subid="computer" subposadj="[-1,0]">Computer</item>
                <item id="2" url="" ico="" enb="true" title="" subid="networking">Networking</item>
                <item id="3" url="" ico="" enb="true" title="" subid="software">Software</item>
                <item id="4" url="" ico="" enb="true" title="" subid="accessories">Accessories</item>
              </items>
            </menubar>
            <menus>
              <menu id="computer" orient="V" showicon="true" showsubicon="false" target="" stlprf="vert_" >
                <items>
                  <item id="1" url="" ico="['smallarr.gif']" enb="true" title="" >Workstation/Desktop</item>
                  <item id="2" url="" ico="['smallarr.gif']" enb="true" title="" subid="server" subposadj="[0,-1]">Server</item>
                  <item id="3" url="" ico="['smallarr.gif']" enb="true" title="" >Notebook</item>
                  <separator />
                  <item id="4" url="" ico="['smallarr.gif']" enb="true" title="" >Apple MAC</item>
                </items>
              </menu>
              <menu id="server" orient="V" showicon="true" showsubicon="false" target="" stlprf="vert_">
                <items>
                  <item id="1" url="" ico="['smallarr.gif']" enb="true" title="" >IBM</item>
                  <item id="2" url="" ico="['smallarr.gif']" enb="true" title="" >Hewlett Packard</item>
                  <item id="3" url="" ico="['smallarr.gif']" enb="true" title="" >Dell</item>
                  <item id="4" url="" ico="['smallarr.gif']" enb="true" title="" >Sun</item>
                </items>
              </menu>

              <!--repeat of submenu-->
              <menu>
                ....
              </menu>
              <menu>
                ....
              </menu>
              ...
            </menus>
          </menumgr>

        

The top level element (document root) is <menumgr> tag. Inside the <menumgr>, you can define <menubar> and <menus>, and inside <menus> you can define many submenus with <menu> tag. To define menu item use <item> tag. Click here for the sample XML file.

Below are the detail of the tags and its attributes:

  • <menumgr>

    The root element, this element represent the NlsMenuManager object. The attributes are:

    • id, the id of the menu manager object.
    • flowoverformelement, flow over form elements or ActiveX object. The value is true/false.
    • defaulteffect, default effect. Refer to NlsMenu Effect for possible value of effect.
    • memorizesel, true to enable selection path.
    • icpath, the icon path.

    Note that all attributes must be in lower case and the value must be quoted for example: defaulteffect="fade".

  • <menubar>

    Defines the menubar. This element must be declared inside <menumgr>. This element represent NlsMenu object.

    • id, the id of the menu
    • orient, defines the orientation of the menu, possible value is "V" or "H".
    • showicon, show menu item icon, true/false.
    • showsubicon, show submenu pointer icon, true/false.
    • target, menu level target, can be _blank, _self, _top or frame name.
    • stlprf, style prefix.
    • submenuic, custom submenu pointer icon.
    • icpath, menu level icon path, override the manager level icon path.
    • itemspc, item space, for example: "1px", "3px".

  • <menus>

    Defines collection of menu (submenus). There is no attribute in this element.

  • <menu>

    Defines menu/submenus. This element must be declared inside <menus> tag. This element represent NlsMenu object. Please see <menubar> for attributes list.

  • <item>

    Defines menu item. This element must be declared inside <menu> or <menubar> tag. This element represent NlsMenuItem object. The attributes are:

    • id, the id of the menu item.
    • url, specifies menu item url.
    • ico, specifies icon, the format is "[normalicon.gif', 'overicon.gif', 'disableicon.gif']".
    • enb, enable/disable item, true/false
    • title, tooltip text.
    • subid, submenu id.
    • suburl, submenu url. This attribute is used only when you use AJAX menu. Please refer to AJAX menu for more detail.
    • crsframe, true to enable cross frame menu.
    • subframe, associate frame name.
    • subpos, submenu posistion, to be used in cross frame menu only.
    • subposadj, submenu position adjustment, for example: "[10, 10]"
    • subdir, submenu direction, for example: "['right', 'up']"
    • Text between <item> tag will be menu item text. For example <item ...>Products</item>.

  • <separator>

    Defines the menu item separator. There is no attribute in this element.


Note that all the attributes are described in detail in NlsMenu Options.


2. Includes the required script nlsmenuext_xml.js.

All the NlsMenu XML functions are defined in nlsmenuext_xml.js file. You have to include this script file when working with XML.


          <head>
            <script language="javascript" src="lib/nlsmenuext_xml.js"></script>
          </head>
        


3. Load the Menu

You need to define a container element for the menu for example a <div id="xmlMenuDiv">. Assign an id for the div and then call NlsMenuUtil.loadFromXMLFile passing the xml file name and the id of the container element.


          <div id="xmlMenuDiv"><span style="font-size:7pt;color:#990000">Loading menu...</span></div>
          <script>
            NlsMenuUtil.loadFromXMLFile("menu.xml", "xmlMenuDiv");
          </script>
        


For more information about NlsMenu XML function, please see Reference.

For complete working example of loading menu from XML, please see the "Load Menu from XML" example.