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.
|