/*New Item
\
\
'
//Add the new item before the main 'Mega Item' and save the newly created node to the 'newItem variable'
var newItem = NF.widget.menuManager.addItem($("megaItemRef"),{html:s},"before").node[0];
/*Activate the items first child sub to help show the user what was added. 'newItemRef' is an ID attached to one
of the items in the child sub (see the html above).*/
NF.widget.menuManager.setActivePath($("newItemRef"));
/*The 'holdSubsUntilInteraction' property forces the path to stay visible until the user interacts
with the menu or clicks the document.*/
NF.widget.menuManager.holdSubsUntilInteraction=true;
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//save it for removal later
mc.t0.newItem = newItem;
}
}
//Item Bullets
this.t1=function(e,isR,sa)
{
if (isR)
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Remove the replicator clones, then remove the replicator from the menu
smp.arrowRightReplicator.removeClones();
sampMenu.removeReplicator(smp.arrowRightReplicator);
//Remove the replicator clones, then remove the replicator from the menu
smp.arrowDownReplicator.removeClones();
sampMenu.removeReplicator(smp.arrowDownReplicator);
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
else
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*~~~~~~~~ Right Arrow ~~~~~~~~~~~~~*/
//
var html = "
";
//
//Create a new replicator with the html string, config properties specify where to target the replicated clones
//
smp.arrowRightReplicator = new NF.replicator("content", {master:html,widgetClass:"nfParent",targetClass:"nfLink",widgetLevel:"any",addWhere:"first-child"})
/*~~~~~~~~ Down Arrow ~~~~~~~~~~~~~*/
//
html = "
";
//
//Create a new replicator with the html string, config properties specify where to target the replicated clones
//
smp.arrowDownReplicator = new NF.replicator("content", {master:html,widgetClass:"nfParent",targetClass:"nfLink",widgetLevel:0,addWhere:"first-child"});
/*~~~~~~~~ Add Right and Down Arrow Replicators ~~~~~~~~~~~~~*/
//
sampMenu.addReplicator(smp.arrowRightReplicator);
sampMenu.addReplicator(smp.arrowDownReplicator);
//
//Runs the replicators and updates the menu
//
if (!sa) sampMenu.activate();
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
}
//Animate Item Bullets
this.t2=function(e,isR,sa)
{
if (isR)
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Remove the replicator clones, then remove the replicator from the menu
smp.bulletsAnimate_On_Replicator.removeClones();
sampMenu.removeReplicator(smp.bulletsAnimate_On_Replicator);
//Remove the replicator clones, then remove the replicator from the menu
smp.bulletsAnimate_Off_Replicator.removeClones();
sampMenu.removeReplicator(smp.bulletsAnimate_Off_Replicator);
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
else
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*~~~~~~~~ Show Code ~~~~~~~~~~~~~*/
//
//Create animation clips for both the right and down arrows
var clip1 = new NF.anim.clip({opacity:{start:1,end:0}},{frames:20,hook:"NFplayOnLinkActiveShow",targetClass:"arrowR",startStyles:{visibility:'visible'},endStyles:{visibility:'hidden'}});
var clip2 = new NF.anim.clip({opacity:{start:0,end:1}},{frames:20,hook:"NFplayOnLinkActiveShow",targetClass:"arrowD",startStyles:{visibility:'visible'},endStyles:{visibility:'inherit'}});
//
//Add the animation clips to a new timeLine as seperate tracks
//
var tl = new NF.anim.timeline(clip1,"NFplayOnLinkActiveShow");
tl.addTrack(clip2);
//
//Create a new replicator where the master object is the timeline
//
smp.bulletsAnimate_On_Replicator = new NF.replicator("transition",{master:tl,widgetClass:"nfItem",targetClass:"nfLink",widgetLevel:0});
/*~~~~~~~~ Hide Code ~~~~~~~~~~~~~*/
//
//Create animation clips for both the right and down arrows...
clip1 = new NF.anim.clip({opacity:{start:0,end:1}},{frames:20,hook:"NFplayOnLinkActiveHide",targetClass:"arrowR",startStyles:{visibility:'visible'},endStyles:{visibility:'inherit'}});
clip2 = new NF.anim.clip({opacity:{start:1,end:0}},{frames:20,hook:"NFplayOnLinkActiveHide",targetClass:"arrowD",startStyles:{visibility:'visible'},endStyles:{visibility:'hidden'}});
//
//Add the animation clips to a new timeLine as seperate tracks
//
tl = new NF.anim.timeline(clip1,"NFplayOnLinkActiveHide");
tl.addTrack(clip2);
//
//Create a new replicator where the master object is the timeline
//
smp.bulletsAnimate_Off_Replicator = new NF.replicator("transition",{master:tl,widgetClass:"nfItem",targetClass:"nfLink",widgetLevel:0});
/*~~~~~~~~ Add HIde and Show Timeline Replicators ~~~~~~~~~~~~~*/
//
sampMenu.addReplicator(smp.bulletsAnimate_On_Replicator);
sampMenu.addReplicator(smp.bulletsAnimate_Off_Replicator);
//
//Runs the replicators and updates the menu
//
if (!sa) sampMenu.activate();
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
}
//Set a Path Visible
this.t3=function(e,isR)
{
if (isR)
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Reset the hold subs property
NF.widget.menuManager.holdSubsUntilInteraction=false;
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
else
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*The 'holdSubsUntilInteraction' property forces the path to stay visible until the user interacts
with the menu or clicks the document.*/
NF.widget.menuManager.holdSubsUntilInteraction=true;
//Set a visible path to a specific menu item ('$' is a shortcut for getElementByID())
NF.widget.menuManager.setActivePath($("setPathRef"));
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
}
//Remove the 'Mega Item' Sub
this.t4=function(e,isR)
{
if (isR)
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*Remove the Nodes child subs with id='megaItemRef'. Save the removed sub to a custom
variable so it can be re-applied later.*/
var sub = NF.widget.hierStructure.getChildSub($("megaItemRef"));
if (sub)
{
var removedSub = NF.widget.menuManager.removeNode(sub);
//Update the menu to correctly reflect the new structure.
sampMenu.activate();
}
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
mc.t4.removedSub = removedSub;
}
else
{
var removedSub = mc.t4.removedSub;
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* Check the custom removedSub variable to see if the sub was previously removed.
If it was then resore it. */
if (removedSub)
{
NF.widget.menuManager.addSub($("megaItemRef"),{element:removedSub[0]});
sampMenu.activate();
}
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
}
//Animate Sub Containers
this.t5=function(e,isR,sa)
{
if (isR)
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Remove the replicator clones, then remove the replicator from the menu
smp.subAnim_Show_Replicator.removeClones();
sampMenu.removeReplicator(smp.subAnim_Show_Replicator);
//Remove the replicator clones, then remove the replicator from the menu
smp.subAnim_Hide_Replicator.removeClones();
sampMenu.removeReplicator(smp.subAnim_Hide_Replicator);
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
else
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*~~~~~~~~ Show Code ~~~~~~~~~~~~~*/
//
//Create an animation clip for showing the menu. Animate the CSS clip style from the center out.
var clip = new NF.anim.clip({clip:{start:{value:'50% 50% 50% 50%', refNode:"self"}, end:{value:'0% 100% 100% 0%', refNode:"self"}}}, {frames:6,reset:true,hook:"NFplayOnSubShow"});
//
//Create a new replicator where the master object is the clip
//
smp.subAnim_Show_Replicator = new NF.replicator("transition", {master:clip,widgetClass:"nfSubC",widgetLevel:'level>=1'});
sampMenu.addReplicator(smp.subAnim_Show_Replicator);
/*~~~~~~~~ Hide Code ~~~~~~~~~~~~~*/
//
//Create an animation clip for hiding the menu. Animate the CSS clip style from the edges to the center.
clip = new NF.anim.clip({clip:{start:{value:'0% 100% 100% 0%', refNode:"self"}, end:{value:'50% 50% 50% 50%', refNode:"self"}}}, {frames:6,reset:true,hook:"NFplayOnSubHide"});
//
//Create a new replicator where the master object is the clip
//
smp.subAnim_Hide_Replicator = new NF.replicator("transition", {master:clip,widgetClass:"nfSubC",widgetLevel:'level>=1'});
sampMenu.addReplicator(smp.subAnim_Hide_Replicator);
/*~~~~~~~~ Update the Menu ~~~~~~~~~~~~~*/
if (!sa) sampMenu.activate();
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
}
//Sub Drop Shadows
this.t6=function(e,isR,sa)
{
if (isR)
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Remove the replicator clones, then remove the replicator from the menu
smp.dropShadowLevel1.removeClones();
sampMenu.removeReplicator(smp.dropShadowLevel1);
//Remove the replicator clones, then remove the replicator from the menu
smp.dropShadowLevel2Plus.removeClones();
sampMenu.removeReplicator(smp.dropShadowLevel2Plus);
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
else
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*~~~~~~~~ Level 1 Sub Drop Shadows (Bottom Corners CSS Rounded in Non IE) ~~~~~~~~~~~~~*/
//
var roundStyles = "-moz-border-radius-bottomLeft:10px;-moz-border-radius-bottomRight:10px;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;"
var html = "";
//
//Create a new replicator where the master object is the html with rounded styles.
//
smp.dropShadowLevel1 = new NF.replicator("content", {master:html,widgetClass:"nfSubC",widgetLevel:1,addWhere:"first-child"});
/*~~~~~~~~ Level 2+ Sub Drop Shadows (Bottom and Top Right Corners CSS Rounded in Non IE) ~~~~~~~~~~~~~*/
//
roundStyles = "-moz-border-radius-topRight:10px;-moz-border-radius-bottomLeft:10px;-moz-border-radius-bottomRight:10px;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-top-right-radius:10px;";
html = "";
//
//Create a new replicator where the master object is the html with rounded styles.
//
smp.dropShadowLevel2Plus = new NF.replicator("content", {master:html,widgetClass:"nfSubC",widgetLevel:"level>1",addWhere:"first-child"});
/*~~~~~~~~ Add Sub Shadow Replicators ~~~~~~~~~~~~~*/
//
sampMenu.addReplicator(smp.dropShadowLevel1);
sampMenu.addReplicator(smp.dropShadowLevel2Plus);
//
//Runs the replicators and updates the menu
//
if (!sa) sampMenu.activate();
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
}
//Sub Parent Item Animations
this.t7=function(e,isR,sa)
{
if (isR)
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Remove the replicator clones, then remove the replicator from the menu
smp.subActiveItem_Show_Replicator.removeClones();
sampMenu.removeReplicator(smp.subActiveItem_Show_Replicator);
//Remove the replicator clones, then remove the replicator from the menu
smp.subActiveItem_Hide_Replicator.removeClones();
sampMenu.removeReplicator(smp.subActiveItem_Hide_Replicator);
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
else
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*~~~~~~~~ Show Code ~~~~~~~~~~~~~*/
//
var hovClip = new NF.anim.clip({backgroundColor:{start:"#e5ebf7",end:"#ccd0e3"}},{frames:30,hook:"NFplayOnLinkActiveShow"});
//
//Create a new replicator where the master object is the clip
//
smp.subActiveItem_Show_Replicator = new NF.replicator("transition",{master:hovClip,widgetClass:"nfParent",targetClass:"nfLink",widgetLevel:"level>0"});
sampMenu.addReplicator(smp.subActiveItem_Show_Replicator);
/*~~~~~~~~ Hide Code ~~~~~~~~~~~~~*/
//
var hovClip = new NF.anim.clip({backgroundColor:{start:"#ccd0e3;",end:"#e5ebf7"}},{frames:30,hook:"NFplayOnLinkActiveHide"});
//
//Create a new replicator where the master object is the clip
//
smp.subActiveItem_Hide_Replicator = new NF.replicator("transition",{master:hovClip,widgetClass:"nfParent",targetClass:"nfLink",widgetLevel:"level>0"});
sampMenu.addReplicator(smp.subActiveItem_Hide_Replicator);
/*~~~~~~~~ Update the Menu ~~~~~~~~~~~~~*/
if (!sa) sampMenu.activate();
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
}
//Long Show Sub Delay
this.t8=function(e,isR)
{
if (isR)
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*Set the delay time in Milliseconds for showing and hiding subs. 'smp.config' is a custom
object property used to hold a reference to the configuration settings for the sample menu.*/
smp.config.showTimerMS = 150;
smp.config.hideTimerMS = 150;
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
else
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*Set the delay time in Milliseconds for showing and hiding subs. 'smp.config' is a custom
object property used to hold a reference to the configuration settings for the sample menu.*/
smp.config.showTimerMS = 300;
smp.config.hideTimerMS = 300;
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
}
//Activate Subs with Click
this.t9=function(e,isR)
{
if (isR)
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*set the event triggers. The item trigger is responsible for showing subs, the document
trigger hids all subs. These can be set to 'mouseover' or 'click'.*/
smp.config.itemTrigger = 'mouseover';
smp.config.documentTrigger = 'mouseover';
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
else
{
//~~~~~~~~~~~~~~~~~~~Start Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/*set the event triggers. The item trigger is responsible for showing subs, the document
trigger hids all subs. These can be set to 'mouseover' or 'click'.
In the code below an array of event types is used for the 'itemTrigger'. Each item in the array
corresponds with a menu level, starting at the main.*/
smp.config.itemTrigger = ['click','mouseover'];
smp.config.documentTrigger = 'click';
//~~~~~~~~~~~~~~~~~~~End Display Code~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
}
}
/*]]>*/