Advanced API Features

Introduction

Many advanced features and design capabilites are possible through the API. This document section touches on some advanced options, for a complete reference to all API features see the API Docs.

Replicators

The replicator class (NF.replicator) is an automated cloning tool. When creating a new replicator object you provide a master object to be cloned and rules defining where the clones will be added. The advantage of using a replicator is the ability to easily manage similar content, styles, or animation effects. The replicator also automatically applies and removes clones when activating the menu.

In the example below a replicator is used to add drop shadow effects to all the subs in a menu. Once the replicator is applied, any new sub menus added automatically recieve a drop shadow clone.

Animation Player Control

The player object (NF.player) includes VCR (or DVR) like methods for controlling the play of a timeline. The example code below is triggered by simple play, pause, stop, step, and change direction buttons.

Animating Descendant Nodes

When applying animations to a document or widget node you may target a specific descendant by specifying a 'targetClass' property on the clip. When the clip plays, the animation will be applied to the first descendant element with a className matching the specified 'targetClass'.

The feature is usefull for targeting specific nodes in the menu widget. The example below uses an opacity animation to fade an arrow into view when the first level subs are shown.

Nesting Menu Objects

Adding multiple menus to a single document simply requires instantiating multiple menu objects. It's equally simple to nest or embed menu objects within other menu objects.

Nested menu objects may take the form of traditional subs, an individual main acting as a menu item, or multiple mains nested within a mega item. The reasoning for splitting a single menu hierarchy into multiple objects is varied and may range from styling to API control.

Before creating a new menu object, the root node of your nested structure must have the 'nfPure' class name applied. The 'nfPure' class name identifies your menu object(s) root node and applies pure CSS styling in the absence of JavaScript. The following example structure shows the basic concept of how to use the 'nfPure' class name with a main menu object and a nested sub menu object.

After defining the nested objects with 'nfPure' your structure will be configured correctly for API control. The example menu below creates a main menu object with seperate sub menu objects. The example uses different timers and event triggers with each menu object to create sticky main items combined with standard vertical subs activated by a shorter delay timer.

Use the menu manager's 'activateMenus' method (see example above) to activate all the document menu objects at once.

Working with Events

Most of the library objects such as the menu widget dispatch events at points of interest during program execution. The event class (NF.util.event) is used to listen for and set custom event handlers. Available events are documented with each class in the API Docs.

The example below listens for the menu widgets 'linkHoverShow' event. A custom handler function displays the content of the item in a display area above the menu.

Breadcrumbs

The menu widget includes a breadcrumb style feature which applies custom styling to items in the menu matching the location of the document. If the item is a sub menu, an active path to the sub is optionally made visible.

First use the dom classes 'getLocationMatchedLinks' to retrieve the matches, start searching from the menu root. You can then pass the links to the 'setBreadCrumb' method to apply the styling, optionally we show the visible path in the example below.

The breadcrumb styles are typically located in the CSS skin file, the above example includes the styling in the HTML for the document.