// JavaScript Document
<!--Create a new menu object and activate it (place this script after the structure or attach to an onload type event)-->

	//Create the menu object
	var myMenu = new NF.widget.menu("myMenu", {showTimerMS:250,hideTimerMS:250});

	//~~~~~~~~~~~~~~~~~~~ Sub Menu Clip animations ~~~~~~~~~~~~~~~~~~~
	var clip = new NF.anim.clip({clip:{start:{value:'50% 50% 50% 50%', refNode:"self"}, end:{value:'0% 100% 100% 0%', refNode:"self"}}}, {frames:12,reset:true,hook:"NFplayOnSubShow"});
	myMenu.addReplicator(new NF.replicator("transition", {master:clip,widgetClass:"nfSubC",widgetLevel:'level==1'}));

	clip = new NF.anim.clip({clip:{start:{value:'0% 100% 100% 0%', refNode:"self"}, end:{value:'50% 50% 50% 50%', refNode:"self"}}}, {frames:12,reset:true,hook:"NFplayOnSubHide"});
	myMenu.addReplicator(new NF.replicator("transition", {master:clip,widgetClass:"nfSubC",widgetLevel:'level==1'}));

	/*~~~~~~~~~~~ Main Expand Animations ~~~~~~~~~~~~~~*/

	//Create the styleAnim objects
	var fnArray = [NF.widget.hierStructure.getParentItem,NF.widget.hierStructure.getChildSub]
	var animShow = new NF.anim.styleAnim({width:{start:{value:"100%",refNode:"self"},end:{value:"100%",refNode:fnArray,adjust_offsetWidth:-1}}});
	var animHide = new NF.anim.styleAnim({width:{start:{value:"100%",refNode:"self"},end:{value:"100%",refNode:animShow}}});

	//Create a show clip using the styleAnim object
	var clip = new NF.anim.clip(animShow, {frames:12,hook:"NFplayOnLinkActiveShow"});
	myMenu.addReplicator(new NF.replicator("transition",{master:clip,widgetClass:"nfItem",targetClass:"nfLink",widgetLevel:0}));
		
	//Create a Hide clip using the styleAnim object
	clip = new NF.anim.clip(animHide, {frames:12,hook:"NFplayOnLinkActiveHide"});
	myMenu.addReplicator(new NF.replicator("transition",{master:clip,widgetClass:"nfItem",targetClass:"nfLink",widgetLevel:0}));

	//~~~~~~~~~~~~~~~~~~~ Sub Link Text Color Animates From Gray to Black  (All Browsers) ~~~~~~~~~~~~~~~~~~~

	var hovClip = new NF.anim.clip({color:{start:"#999",end:"#333"}},{frames:5,hook:"NFplayOnLinkHoverShow"});
	myMenu.addReplicator(new NF.replicator("transition",{master:hovClip,widgetClass:"nfItem",targetClass:"nfLink",widgetLevel:"level>0"}));

	hovClip = new NF.anim.clip({color:{start:"#333",end:"#999"}},{frames:60,hook:"NFplayOnLinkHoverHide"});
	myMenu.addReplicator(new NF.replicator("transition",{master:hovClip,widgetClass:"nfItem",targetClass:"nfLink",widgetLevel:"level>0"}));
						
	//~~~~~~~~~~~~~~~~~~~ Sub Active Item Backgrounds Color Animates From Off White to Gray  (All Browsers) ~~~~~~~~~~~~~~~~~~~

	hovClip = new NF.anim.clip({backgroundColor:{start:"#eee",end:"#ddd"}},{frames:60,hook:"NFplayOnLinkActiveShow"});
	myMenu.addReplicator(new NF.replicator("transition",{master:hovClip,widgetClass:"nfParent",targetClass:"nfLink",widgetLevel:"level>0"}));

	hovClip = new NF.anim.clip({backgroundColor:{start:"#ddd",end:"#eee"}},{frames:30,hook:"NFplayOnLinkActiveHide"});
	myMenu.addReplicator(new NF.replicator("transition",{master:hovClip,widgetClass:"nfParent",targetClass:"nfLink",widgetLevel:"level>0"}));
				
	//Activate the menu
	myMenu.activate();