|
Node Package: Navigation Nodes
|
The centre piece of any design template is the main menu, generated by the navigation node (wpNavigation). This node is inserted into a layoutbox and dynamically renders a multi-level menu based on the chapter structure of the web. You can create both horizontal and vertical menus, image or text based layout, with fly-out or drop-down options for multi-level functionality.
The sitemap node can be inserted into a chapter and renders a hierarchical set of links (a sitemap) of your web.
The location-path (wpLocationPath) (also known as "bread-crumb-trail") lists the parents of the currently selected chapter, in a linked path. This node is inserted into a layoutbox and can be styled to have smaller customized font/link styles. This is an especially useful feature for websites with many levels of content.
|
Screen Shots
 wpNavigation
The navigation node dynamically generates a menu (and its sub-menus if applicable) based on the chapter structure of your web. This node has a variety of options including:
- Horizontal or Vertical Menu layout;
- Image Based or Text Based Menu Items;
- Drop-down or Fly-out options for Submenus.
Developers Note: To change the root level of the navigation use the following:
root-chapter: /chapters/chapter[@name='new_root_chapter']
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| width
|
oneof
|
100%, default
|
The width of the navigation. Defaults to 100%.
|
| root-chapter
|
default
|
/chapters
|
Identifies the root (=parent) node of this menu. All sub-nodes of the root node are listed as level-1 menu links.
|
| max-levels
|
default
|
2
|
How many levels to expand the menu. Default=2, but any value is possible.
|
| expand-levels
|
default
|
1
|
On load, the navigation will expand this many levels. For example, "2" will show all level-1 and level-2 items of the menu tree. This attribute is only useful for vertical type="standard".
|
| type
|
oneof
|
popup, standard, subchapters
|
For "popup" (default), level-1 items are rendered side-by-side or stacked, and higher-level items will "fly-out" on roll-over of the appropriate level-1 items. For "standard", all level-1 items are shown, but only sub-chapters of the current chapter are expanded. Type "subchapters" shows only the subchapters or the current chapter.
|
| subchap-backtrack
|
oneof
|
no, yes
|
If type="subchapters", setting this attribute to "yes" will cause the navigation to list all siblings of the current chapter as level-1 items, with the current chapter expanded, showing the sub-chapters.
|
| use-active
|
oneof
|
no, yes
|
Determines whether or not the menu should use an active state of a menu item. (Ie. Show a different button image for the currently selected page.)
|
Sub Nodes
| Name | Type | Help |
|---|
| level
|
wpNavigationLevel
|
Navigation levels define styling for each level and sub-level of the menu.
|
Sample
 wpNavigationLevel
Navigation levels define the styling for each level of the menu. The order of the nodes is relevant in that the first level will apply to level-1, the second to level-2, and so on. Each navigation will contain at least 1 level. Some webs may have 2 or 3 levels depending on the the size of the website.
If n levels are defined, level n+1 of the navigation is defined the same as level n.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| layout
|
oneof
|
horizontal, vertical
|
Choose whether the layout is horizontal or vertical.
|
| repeat-parent
|
oneof
|
no, yes
|
Used in sub-menu levels, determines whether you repeat the parent chapter in the submenu.
|
Sub Nodes
| Name | Type | Help |
|---|
| box-style
|
wpBoxStyle
|
Configures the styles for the level
|
| font-style
|
wpNavFontStyle
|
Configures the font style for the level.
|
Sample
 wpNavFontStyle
This node gives you the control to style the css for the font styles used in a menu. Specifcally this comes in handy when creating drop-down or fly-out menus where you want the menu items (links) to have a specific colour and behaviour.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| name
|
oneof
|
item, item_over
|
|
wpBoxStyle
Box styles control the appearance, size and positioning of the various levels and their associated menu items. Each level will have a box style which "wraps" the "items" in that level. In turn you can style an item inside the level to take on a certain behaviour. Eg. Changing background colour on hover.
Where to use this node
Sub Nodes
 wpLocationPath
Create a linked bread-crumb-trail on each page so users can back-track through pages. This node is inserted into a layout box and can be custom styled using the "footnote" style in the font style selector.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| text-transform
|
oneof
|
normal, lowercase, uppercase
|
Provides an option to explicitly define the case of the bread-crumb-trail.
|
Sub Nodes
| Name | Type | Help |
|---|
| separator-bullet
|
wpImage
|
Allows the use of an image to separate the links.
|
Sample
 wpSitemap
Add this node anywhere in a chapter node to generate a sitemap of your web site. This is an overview of all chapters set to "show in menu = yes" and will help users quickly find their way around your site.
Typically, this node will be inserted within a chapter called "Site Map" or something similar.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| title
|
optional
|
|
This will insert a tile above the sitemap.
|
| style
|
oneof
|
standard, detailed
|
Choose whether you want to display shorttitles (simple) or titles (detailed) as the labels for each entry.
|
| column
|
oneof
|
1, 2
|
Determine whether the list is single or 2-column.
|
Sub Nodes
| Name | Type | Help |
|---|
| bullet
|
wpImage
|
Adds a bullet before each item.
|
Sample
 wpSubChaptersList
This node creates a bulleted list of all the sub chapters within the current chapter. The show-in-menu attribute is used within the chapter to determine whether or not the sub chapter will appear. The include-all attribute if set to yes will display all chapters regardless of the show-in-menu value.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| style
|
oneof
|
standard, detailed
|
Choose whether you want to display shorttitles (simple) or titles (detailed) as the labels for each entry.
|
Sample
|
|
|
