IntroductionIntroduction
  Publishing web pagesPublishing web pages
  RXMLRXML
  Information tagsInformation tags
  String tagsString tags
  Variable tagsVariable tags
  URL tagsURL tags
  If tagsIf tags
  Graphics tagsGraphics tags
  Database tagsDatabase tags
  LDAPLDAP
  Programming tagsProgramming tags
  SSI tagsSSI tags
  Image mapsImage maps
  IntraSeekIntraSeek
  LogViewLogView
  TemplatesTemplates
  NavigationNavigation
    <navigation>navigation<navigation>navigation
    <textstyle>textstyle<textstyle>textstyle
    <boxstyle>boxstyle<boxstyle>boxstyle
    <mi>mi<mi>mi
    <Examples>Examples<Examples>Examples
  SiteBuilder tagsSiteBuilder tags
  Supports systemSupports system
  SecuritySecurity
  AppendixAppendix
 
Navigation

The Navigation module draws graphical navigation menus, thus eliminating the need to create them manually. Within the <navigation> container tag the exact look of the menu is defined. It is possible to use images for backgrounds and use any TrueType font for the text. The end result will can be made to look as if the entire menu was drawn by hand.

The actual content of a navigation menu can be fetched in a number of ways. Since the <navigation> tag is a RXML tag the content can be created by other RXML tags. A special tag, <sb-menu>, exists for the purpose of creating menu content from a SiteBuilder site.

A navigation menu is defined in a table-like manner, where the menu is divided into a fixed number of table cells. The layout for each cell is defined with the <boxstyle> tag.

Defining cells
When creating a menu the appearance of each cell can be defined by stating for example, that the left top cell should have a white background while the right bottom cell should be blue.

The image below shows the name of the different cells. The <boxstyle> tag takes attributes defining the position within the table. One of the left, middle attributes and right attributes defines the horizontal position while one of the top, text, delimiter or bottom attributes defines the vertical position. The tag <boxstyle left top> would define a cell in the upper left corner.


Vertical menu

The Navigation module also allows for horizontal menus. When defining a horizontal menu all the <boxstyle> positioning attributes are rotated 90 degrees. This makes the top row named right instead of top, thus <boxstyle top right> defines the upper left corner in the horizontal menu.


Horizontal menu

Cell state
A cell on the text row has three states, normal, selected and mouseover. The selected state is used to highlight the menu item for the current page. The mouseover state is used to highlight the menu item the user is holding the mouse pointer over. The attributes normal, selected or mouseover are used to specify what type of text cell it is in a <boxstyle>.

Alpha channels and backgrounds
Alpha channels are used to define the opacity of a foreground image in respect to a background image. The alpha channel can in itself be a grayscale image, in which case the background might be more visible in certain parts of the image.

The Navigation module uses a alpha channel to determine the opacity between a cell and the background image of the whole navigation menu. The alpha channel is defined with the alpha attribute of the <boxstyle> tag. It is either a grayscale value between zero and 255, or a image. 255 means opaque, only the cell itself will be shown, while zero is totally transparent, only the background will be shown. If an image is used the grayscale value of each pixel will be used. White parts will be opaque while black parts are totally transparent.

The most common usage of an alpha channel is to use a alpha image to define the shape of a cell. Since an alpha channel is used the background can be changed by changing background color or image for the whole menu. If instead a background image was drawn for each cell, which would achieve the same result, all those images would have to be redrawn in order to change the menu background.

Fonts
To choose font, font size and other text related attributes the <textstyle> tag is used. As with the <boxstyle> tag, the <textstyle> is placed within the <navigation> tag.

Creating menu items
With the <navigation> tag, the layout and appearance of the navigation interface is defined. The actual text for the navigation interface is given in <mi> tags. The <mi> tags are most often automatically generated, by the the <sb-menu> tag, which uses access control to provides dynamic navigation menus customized for each user.

Sub menus
It is possible to create nested, multi-level graphical menus. This is done by the <submenu> tag which is placed within the <navigation> tag. The <submenu> tag is in essence a <navigation> tag defining the submenu and it takes the same attributes as the <navigation> tag.

The placement of the submenu is defined by the <submenu> tag's position in relation to the <mi> tags defining the menu content. The <submenu> tag will usually be placed somewhere in the middle of a group of <mi> tags.

If the <sb-menu> tag is used to create the <mi> tags in such a scenario tags it becomes necessary to have two <sb-menu> tags. One above the <submenu> tag and another below the <submenu> tag. The attributes above, below and selected are used to determine what part of the menu a <sb-menu> should return. <sb-menu menu=my-menu.menu above> returns, for example, all the <mi> tags above, and including, the selected button.

The navigation tags

<navigation>
Generates graphical menus.

<submenu>
Same as navigation, used inside a <navigation> or another <submenu> tag.

<textstyle>
Defines the style of the text in the menu.

<boxstyle>
Defines the appearance of one of the cells of the menu.

<mi>
Describes a menu item.