NlsMenu Pro
Custom HTML Menubar
NlsMenu Professional - Advanced Javascript Drop Down Menu Control

HTML Menubar allows you to defines your own menubar. Any HTML element such as hyperlink or image can be used as menubar. With this feature you can have the so called search engine friendly menubar. You also have freedom in the menubar design.

            var prodMenu = menuMgr.createMenu("products");
            prodMenu.addItem("1", "NlsMenu Pro", "");
            prodMenu.addItem("2", "NlsTree Pro", "");

            var servMenu = menuMgr.createMenu("services");
            servMenu.addItem("1", "Custom Component Development", "");

            //the html menubar
            <a href="url" onmouseover="nls_showMenu('products', this, 'H')" onmouseout="nls_hideMenu('products')">Products</a>
            <a href="url" onmouseover="nls_showMenu('services', this, 'H')" onmouseout="nls_hideMenu('services')">Services</a>
            <a href="url" onmouseover="hideAllNlsMenu();">Services</a>

Basically you only need to specify onmouseover and onmouseout event on the menubar element as shown in example above.

  • To display the submenu use nls_showMenu() function.
    nls_showMenu(menuId, objElement, orient, subDir, subPosAdj);
    • menuId, the id of the submenu, in the example above the id is "product" or "services"
    • objElement, is the element which fires the onmouseover event. Simply pass this to this argument. The menu position will be calculated based on the element position.
    • orient, orientation of menubar. Specify 'H' if your menubar is horizontal, otherwise specify "V".
    • subDir, menu direction, by default the menu is opened in down right direction. You can specify null (use default) or ["right" or "left", "down" or "up"]
    • subPosAdj, menu position adjustment, the format is [xpos, ypos] for example: nls_showMenu('products', this, 'H', ['left', 'up'], [10, 15]).
  • To hide submenu when mouse move out from an element use nls_hideMenu() function. This function has 1 argument only which is the submenu id.
  • For elements (menubar items) that don't have submenu, you need to specify onmouseover="hideAllNlsMenu()" to hide opened submenu when mouse move over item or element without submenu.