AddObject - NlsMenu Developer's Guide

Menu Effect

NlsMenu Professional - Advanced Javascript Drop Down Menu Control

NlsMenu supports cross browsers effects (sliding and fading) and all IE 5.5+ transition effects. You can configure the effect by specifying default effect on menu manager level (apply to all menus managed by the menu manager ) or effect on menu level. Below are steps to enable and configure NlsMenu effect:

1. Includes the nlsmenueffect.js script

Include the script in your page <head> section.


            <head>
            <script language="javascript" src="nlsmenu/nlsmenueffect.js" ></script>
            </head>

2. Specifying Default Effect

Default effect applies to all menus (menubar/submenus) created within a menu manager (NlsMenuManager).


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

3. Specifying Menu Level Effect

Menu level effect applies to a particular menu only. Use useEffect() function to specify menu level effect.


            var menuMgr = new NlsMenuManager("manager");

            //default effect, applies to all menus created within the menu manager.
            menuMgr.defaultEffect="fade";

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

            //specify menu level effect.
            prodMenu.useEffect("gradienwipe");

4. Item Effect

You can specify effect when mouse move over a menu item. To specify item effect:


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

5. Predefined Effects

Below are predefined effects you can use.

barn	blinds	checkerboard
fade	inset	iris
pixelate	radialwipe	randombars
randomdissolve	slide	spiral
stretch	strips	wheel
gradienwipe	zigzag	itemfade
itemdissolve	aoslide

6. Customizing the effects

You can customize the effect by modifying predefined effects or adding new effects. Simply customize the nlsEffectList definition in nlsmenueffect.js file.
For example:


              var nlsEffectList={ 
              .....
                fade1:"progid:DXImageTransform.Microsoft.Fade(Duration=1.0,Overlap=1.00);",
              .....
              }