NlsMenu Pro
addobject.com
AJAX Menu (Load On Demand Menu)
NlsMenu Professional - Advanced Javascript Drop Down Menu Control
   

Ajax Menu

With AJAX menu, you can initially loads only the menubar. Submenu will be loaded when the mouse move over an item. This feature improves your AJAX application loading perfomance especially if you have large menu system. Below is basically how the AJAX menu works:

  1. Initially loads only the menubar.
  2. Menu item which has submenu must have the subUrl property specified. The "subUrl" property should be an url to load the submenu.
  3. When mouse over the item, a request is send to server (AJAX call to server).
  4. Server returns the submenu in XML format.
  5. NlsMenu XML function parse the XML and display the submenu.

1. Includes required script files nlsmenuext_xml.js

To enable the AJAX menu, you need to includes additional script files nlsmenuexp_xml.js. The format of the menu data is XML.

          <head>
          <script language="javascript" src="nlsmenuext_xml"></script>
          </head>
        


2. Build the menu.

Creating AJAX menu is no different to creating standard menu except when adding submenu, you need to use addAJAXSubmenu() function instead of standard addSubmenu() function.


          var menuMgr=new NlsMenuManager("mgr");

          var mbar = menuMgr.createMenubar("menubar");
          mbar.addItem("1", "Home", "http://www.myserver.com");

          mbar.addItem("2", "Products", "http://www.myserver.com");

          //add ajax submenu to Products menu item. The submenu must have id=subProducts.
          //Url to load the submenu must be supplied.
          mbar.addAJAXSubmenu("2", "subProducts", "http://www.myserver.com/loadmenu.php?pId=products");

          mbar.addItem("3", "About Us", "http://www.myserver.com");


        

In the example above, menu item 2 (Products item) has AJAX submenu. When mouse move over the item, a request to the specified url (http://www.myserver.com/loadmenu.php?pId=products) will be sent. Server load the menu from database or file and return XML format menu data to browser.

The example if returned XML data format:

          <menus>
            <menu id="products" orient="V" showicon="true" showsubicon="true" target="" stlprf="">
              <items>
                <item id="1" url="" enb="true" subid="computer" suburl="http://www.myserver.com/loadmenu.php?pId=computer">Computer</item>
                <item id="2" url="" enb="true" subid="network" suburl="http://www.myserver.com/loadmenu.php?pId=network">Networking</item>
                <item id="3" url="" enb="true" subid="">Software</item>
                <item id="4" url="" enb="true" subid="">Accessories</item>
              </items>
            </menu>
          </menus>
        

The root element of the returned XML must be <menus> and inside the root element you can create one or many submenus.
Notice the subUrl attribute in the XML. If the subUrl is specified, the submenu of the item will be loaded via AJAX.

For complete working example of load AJAX menu from database, please see the "Load on Demand (AJAX) from database (PHP or ASP)" example.


3. Loading AJAX Menu Using XML.

Loading AJAX menu using XML is the same as loading standard menu using XML (see Loading Menu From XML). The difference is you need to specify the subUrl attribute to enable the AJAX menu. Below is the example of XML file used to load a menubar.


          <menumgr id="mgr" flowoverformelement="false" defaulteffect="aoslide">
            <menubar id="menubar" orient="H" showicon="false" showsubicon="false" target="" stlprf="horz_" itemspc="1px">
              <items>
                <item id="1" url="" ico="" enb="true" title="" subid="products" suburl="product.xml">Products</item>
                <item id="2" url="" ico="" enb="true" title="" subid="">Support</item>
                <item id="3" url="" ico="" enb="true" title="" subid="news" suburl="news.xml">News</item>
                <item id="4" url="" ico="" enb="true" title="" subid="">About Us</item>
              </items>
            </menubar>
          </menumgr>
        

Notice the subUrl in the xml above. The subUrl attribute points to another XML file which defines the submenu. For example the XML that defines the Products submenu (product.xml).


          <menus>
            <menu id="products" orient="V" showicon="true" showsubicon="true" target="" stlprf="">
              <items>
                <item id="1" url="" ico="" enb="true" title="" subid="computer" suburl="computer.xml">Computer</item>
                <item id="2" url="" ico="" enb="true" title="" subid="network" suburl="network.xml">Networking</item>
                <item id="3" url="" ico="" enb="true" title="" subid="">Software</item>
                <item id="4" url="" ico="" enb="true" title="" subid="">Accessories</item>
              </items>
            </menu>
          </menus>
        

Note that the id of the submenu (products) must be the same as the id defined in subid attribute.

For complete working example of creating AJAX menu using XML, please see the "Load on Demand (AJAX) using XML" example.