NlsMenu Pro
addobject.com
NlsMenu Options
NlsMenu Professional - Advanced Javascript Drop Down Menu Control
   

1. Menu Orientation

NlsMenu supports horizontal and vertical menu orientation. Each menu (menubar/submenu) has it own orientation property. To set menu orientation:


            var prodMenu = menuMgr.createMenu("products");
            prodMenu.orient="V"; //for vertical menu
            prodMenu.orient="H"; //for horizontal menu
          


2. Menu Width

Set the width of the menu. If this property is not set, the menu width will be equals to the widest menu item in the menu.


            var prodMenu = menuMgr.createMenu("products");
            prodMenu.absWidth="150px";
          


3. Menu Icon and Submenu Pointer Icon

You can enable/disable menu icon and submenu pointer icon. Set the showIcon property to enable/disable menu icon and showSubIcon property to enable/disable submenu pointer icon.


            var prodMenu = menuMgr.createMenu("products");

            //enable the menu icon, the default value is false.
            prodMenu.showIcon=true;

            //set to false if you want to disable submenu pointer icon. The default value is true.
            prodMenu.showSubIcon=true;

            //use your own custom submenu pointer icon.
            //If this property is not set, default submenu pointer icon will be used.
            prodMenu.subMenuIc=["pointer_normal.gif", "pointer_over.gif"];
          


4. Item Icon

Specify default icon for all item defined in the menu. Use this when you want all items in the menu have same icon. Item icon specified in individual item overrides this value.


            var prodMenu = menuMgr.createMenu("products");

            //enable the menu icon, the default value is false.
            prodMenu.showIcon=true;


            //set default item icon
            prodMenu.itemIco=["normal.gif", "hover.gif"];

          


5. Drop Shadow

Use dropShadow() function to enable shadow on a menu. Menu shadow by default is disabled.

            var prodMenu = menuMgr.createMenu("products");
            prodMenu.dropShadow("bottomright", "5px");
          

The first argument to the dropShadow function is menu position. The other posible values are "none", "bottomleft", "topright" and "topleft". The second argument is the shadow distance. Refer to Reference for more information about dropShadow() function. The example code above only enable the shadow on the menu, you need to configure the menu style in stylesheet. For example in basic-v.css file in earlier chapter:

            /*horizontal shadow*/
            .horzshadow {
                -moz-opacity:0.4;
                background-repeat:no-repeat;
                background-image:url(img/hshadow.gif);
                filter:progid:DXImageTransform.Microsoft.Alpha(
                  Opacity=40, FinishOpacity=0, Style=0, StartX=0,  FinishX=100, StartY=0, FinishY=100
                );
            }

            /*vertical shadow*/
            .vertshadow {
                -moz-opacity:0.4;
                background-repeat:no-repeat;
                background-image:url(img/vshadow.gif);
                filter:progid:DXImageTransform.Microsoft.Alpha(
                  Opacity=40, FinishOpacity=0, Style=0, StartX=0,  FinishX=100, StartY=0, FinishY=100
                );
            }

            /*corner shadow*/
            .cornshadow {
                -moz-opacity:0.4;
                background-repeat:no-repeat;
                background-image:url(img/cornershadow.gif);
                filter:progid:DXImageTransform.Microsoft.Alpha(
                  Opacity=40, FinishOpacity=0, Style=0, StartX=0,  FinishX=100, StartY=0, FinishY=100
                );
            }
          


6. Advanced Borders

Use applyBorder() function to apply advanced borders to the menu. The advanced borders are configured in stylesheet. Please check Menu Styles for more detail about configuring advanced borders.

The syntax for applyBorder() function is:

menu_object.applyBorder(topBorder, bottomBorder, leftBorder, rightBorder);

For example:

            var prodMenu = menuMgr.createMenu("products");

            //apply left border only.
            prodMenu.applyBorder(false, false, true, false);
          


7. Menu Position Adjustment

NlsMenu by default display submenu with position relative to the menu item.

  • If the parent menu's orientation is vertical then the top left of submenu will be the top right of parent menu item.
  • If the parent menu's orientation is horizontal then the top left of submenu will be the bottom left of parent menu item.
The position adjustment lets you define offset to the original position. To specify position adjustment, use addSubmenu() to add submenu and specify the position for subPosAdj argument.

            //create menubar
            var menuBar = menuMgr.createMenubar("menubar");

            //add menu item
            menuBar.addItem("1", "Products", "");

            //set the 'products' submenu to this item
            menuBar.addSubmenu("1", "products", false, null, null, [5, 5]);

            //create another item in menubar.
            menuBar.addItem("2", "Downloads", "");

            //create submenu: products
            var prodMenu = menuMgr.createMenu("products");
            prodMenu.addItem("1", "NlsTree Pro", "http://www.addobject.com");
            prodMenu.addItem("2", "NlsScroller Pro", "http://www.addobject.com");
          

Note that the value of the position adjustment can be nagative.


8. Menu Direction Priority

NlsMenu by default display a submenu in bottom right direction. To change the menu direction, use NlsMenu.addSubmenu() to add submenu and specify the direction for subDir argument.


            //create menubar
            var menuBar = menuMgr.createMenubar("menubar");

            //add menu item
            menuBar.addItem("1", "Products", "");

            //set the 'products' submenu to this item
            menuBar.addSubmenu("1", "products", false, null, null, [5, 5], ["right", "up"]);

            //create another item in menubar.
            menuBar.addItem("2", "Downloads", "");

            //create submenu: products
            var prodMenu = menuMgr.createMenu("products");
            prodMenu.addItem("1", "NlsTree Pro", "http://www.addobject.com");
            prodMenu.addItem("2", "NlsScroller Pro", "http://www.addobject.com");
          

The possible value for menu direction is ["left" or "right", "up" or "down"].

Note that if there is not enough space in the specified direction, the menu will calculates the best position to display the submenu.


9. Drop Down on Click

NlsMenu supports drop down on click menu. This option only available for menubar. By default, user only need to click on the menu item once to drop down the menu, NlsMenu Pro provides another option to force always click on menu item to drop down submenu once the submenu is hidden.


            //create menubar
            var menuBar = menuMgr.createMenubar("menubar");
            menuBar.dropOnClick=true;

            //to force always click to drop down. Default value is true.
            menuBar.firstClickOnly=false;
          


10. Target

NlsMenu supports menu level target (apply to all items in the menu) and item level target.

To specify menu level target:


            //create menu
            var prodMenu = menuMgr.createMenu("products");

            //set the target.
            //you can use _blank, _self, _top or frame name for the target
            prodMenu.target = "frameName";
          

To specify item level target:


            var prodMenu = menuMgr.createMenu("products");

            prodMenu.add("1", "NlsTree Pro", "http://www.addobject.com");

            //get the menu item with id=1 and set the target of the item
            //you can use _blank, _self, _top or frame name for the target
            prodMenu.getItemById("1").target="_blank";
          


11. Item Spacing

Set the space between menu items.


            var prodMenu = menuMgr.createMenu("products");
            prodMenu.itemSpc="3px";

            prodMenu.add("1", "NlsTree Pro", "http://www.addobject.com");
            prodMenu.add("2", "NlsMenu Pro", "http://www.addobject.com");
          


12. Default Effect

Specifies the default effect for the menu.


            var menuMgr = new NlsMenuManager("manager");
            menuMgr.defaultEffect="aoslide"; //default value is null (no effect).
          
Note that the defaultEffect property applies to the NlsMenuManager object. This means the property affects all menus (menubar/submenus) created within this object.

NlsMenu also supports menu level effect, the effect that only applies to a particular submenu. For more information about menu effect please refer to NlsMenu Effect


13. Flow's Elements and ActiveX Object

NlsMenu supports 2 options to cover IE famous "form's element" issue (that is absolute element such as div/table is always rendered behind list box or drop down box or ActiveX Object (ie. Flash)).

  • Overflow the elements (for IE 5.5 and later).
    With this option the menu will flow over the form's element or ActiveX object. The default value for this property is false.
    
                    var menuMgr = new NlsMenuManager("manager");
                    menuMgr.flowOverFormElement=true;
                  
  • Hide the form's element (for IE 5.0 and later).
    In IE 5.0, this option will be activated regardless the value of flowOverFormElement property. To use this option, you have to call listAllWinElmt() function in page body onload event.
    
                    var menuMgr = new NlsMenuManager("manager");
                    menuMgr.flowOverFormElement=true;
    
                    <body onload="listAllWinElmt()">
                      Your html here
                    </body>
                  

When the menu is designed to flow over ActiveX object such as Flash, add wmode=opaque parameter to the object/flash

            <object>
             <param name="wmode" value="opaque"/>
             <embed wmode=opaque />
            </object>
          

Please note that the flowOverFormElement property applied to NlsMenuManager object. The property affects all menus created within this object.


14. Selection Path

When this option is enabled, the path to the selected item will be highlighted. The selected item information is stored in browser's cookie, therefore this feature will works only and only user enable cookie in the browser. The style of selected path is configured in stylesheet. This option is disabled by default.


            var menuMgr = new NlsMenuManager("manager");
            menuMgr.memorizeSel=true;
          

Please note that the memorizeSel property applied to NlsMenuManager object. The property affects all menus created within this object.


15. Menu Timeout

This property control the amount of time the submenu stays visible when mouse leaves the menu. The timeout value is in miliseconds. The default value is 1000 (1 second).


            var menuMgr = new NlsMenuManager("manager");
            menuMgr.timeout=500; //in milliseconds
          

Please note that the timeout property applied to NlsMenuManager object. The property affects all menus created within this object.


16. Icon Path

Specify icon path. When you creates menu with icons (menu icon or submenu pointer icon), you may want to set the icon path. With icon path you don't need to specify full path for each icon. You only need to specify the file name. For example:

Without icon path:


            var menuMgr = new NlsMenuManager("manager");

            var prodMenu = new menuMgr.createMenu("products");
            prodMenu.addItem("1", "NlsTree Pro", "http://url", ["/resources/imgs/tree.gif", "/resources/imgs/treeover.gif"]);
            prodMenu.addItem("2", "NlsMenu Pro", "http://url", ["/resources/imgs/menu.gif", "/resources/imgs/menuover.gif"]);
          
With icon path:

            var menuMgr = new NlsMenuManager("manager");
            menuMgr.icPath="/resources/imgs/";

            var prodMenu = new menuMgr.createMenu("products");
            prodMenu.addItem("1", "NlsTree Pro", "http://url", ["tree.gif", "treeover.gif"]);
            prodMenu.addItem("2", "NlsMenu Pro", "http://url", ["menu.gif", "menuover.gif"]);
          


17. Render on Demand

Render on demand is one of NlsMenu Pro performance optimization feature. Menu structure is created and loaded but only menubar is rendered. Submenus will be rendered at the time mouse hover its parent menu item. This greatly improve menu performance when dealing with large menu structure. To activate render on demand feature just set second parameter of renderMenubar() function to false:


            var menuMgr = new NlsMenuManager("manager");
            ....

            menuMgr.renderMenubar(null, false);

          

By default if the second parameter is omitted or true, the function will render menubar and all submenus defined in the menu manager. Set it to false force the function to render only menubar and submenu will be rendered when mouse hover menubar item.

Note that since version 3.0, renderMenubar() automatically renders submenus and therefore, there is no need to explicitly call renderMenus() to render submenus as in previous version.


18. Vertical Scrollbar

When there are many menu items in a submenu, you can specify maximum height of the submenu and have the menu display vertical scroll bar.


            var menuMgr = new NlsMenuManager("manager");

            var prodMenu = new menuMgr.createMenu("products");
            prodMenu.maxHeight = 250;
            prodMenu.scrollType = 1;
            prodMenu.addItem("1", "NlsTree Pro", "http://url", ["/resources/imgs/tree.gif", "/resources/imgs/treeover.gif"]);
            prodMenu.addItem("2", "NlsMenu Pro", "http://url", ["/resources/imgs/menu.gif", "/resources/imgs/menuover.gif"]);
            ...

          

By default, scrollType is 2.


19. Menu Delay

NlsMenu is very responsive, submenu is displayed instantly when mouse move over an item. In some case, there may be a need have a delay before the menu displayed. To specify delay time:


            var menuMgr = new NlsMenuManager("manager");
            menuMgr.menuDelay = 1000; //in millisecond

            ...

          

By default the value is 0 that means no delay.