Examples
These examples shows how navigation can be used to build different
navigation interfaces. It should also shed some light on the use of
alpha channels. For more examples study the example templates supplied
with the Roxen Platform.
Simple navigation menu
This is a very simple graphical navigation interface. Note that
instead of setting the background color in the normal box, the
alpha attribute has been set to zero. This causes the alpha
channel in this box to be completely transparent. The color of the
normal boxes are instead the background color set in the
<navigation> tag. The point of using the color from the
lowest layer and not setting it in the box is that this way it is
easier to change color of the whole navigation interface.
Introduction
Templates
Navigation
SiteBuilder tags
Appendix
{navigation bg=#8094a3}
{textstyle font=bell_gothic scale=0.5 xspacing=7}
{boxstyle text middle normal fg=#ffffff alpha=0}
{boxstyle text middle selected bg=#ffffff fg=#8094a3}
{boxstyle text middle mouseover bg=#ffffff fg=#8094a3}
{sb-menu menu=example.menu}
{/navigation}
Using boxstyles
This example is basically the same as the first one, but there has
been added some extra <boxstyle> tags. In this case a green
box to the left and a delimiter. When adding a delimiter it is
important to define all the boxes affected. In this example, both the
middle and the left delimiter has been defined as a two
pixel high line dividing the buttons.
Introduction
Templates
Navigation
SiteBuilder tags
Appendix
{navigation bg=#8094a3}
{textstyle font=bell_gothic scale=0.5 xspacing=7}
{boxstyle text left normal bg=#9bc187 width=25}
{boxstyle text left selected bg=#ffffff width=25}
{boxstyle text left mouseover bg=#ffffff width=25}
{boxstyle text middle normal fg=#ffffff alpha=0}
{boxstyle text middle selected bg=#ffffff fg=#8094a3}
{boxstyle text middle mouseover bg=#ffffff fg=#8094a3}
{boxstyle delimit middle height=2 bg=#ffffff}
{boxstyle delimit left bg=#ffffff}
{sb-menu menu=example.menu}
{/navigation}
Alpha channels
In this example, two black and white images has been used to control
the alpha channel of the left middle box. The image for the
normal state of the button is and
is used for the mouseover state. The black
parts of the images corresponds to alpha=0, i.e full transparency, the
white parts corresponds to alpha=255, i.e no transparency. The parts
with full transparency (black) will show the color of the background
set in the <navigation> tag and the parts with no
transparency (white) will show the color set in the
<boxstyle> tag.
Introduction
Templates
Navigation
SiteBuilder tags
Appendix
{navigation bg=#8094a3
imgbase=/creator/img/}
{textstyle font=bell_gothic scale=0.5 xspacing=4}
{boxstyle text left normal alpha=half-sphere.gif
bg=#ffffff width=25}
{boxstyle text left selected bg=#ffffff width=25}
{boxstyle text left mouseover alpha=sphere.gif
width=25 bg=#ffffff}
{boxstyle text middle normal fg=#ffffff alpha=0}
{boxstyle text middle selected bg=#ffffff fg=#8094a3}
{boxstyle text middle mouseover bg=#ffffff fg=#8094a3}
{boxstyle delimit middle height=2 bg=#ffffff}
{boxstyle delimit left bg=#ffffff}
{sb-menu menu=example.menu}
{/navigation}
Changing colors using alpha channels
Since the background color of the graphical buttons is defined in the
<navigation> tag, it is a simple task to change color of the
navigation interface. By changing the background color in the
<navigation> the color of the whole navigation interface is
changed in a few seconds. To get a consistent look the colors of the
text has also been changed from blue to yellow.
Introduction
Templates
Navigation
SiteBuilder tags
Appendix
{navigation bg=#c1a44b
imgbase=/creator/img/}
{textstyle font=bell_gothic scale=0.5 xspacing=4}
{boxstyle text left normal alpha=half-sphere.gif
bg=#ffffff width=25}
{boxstyle text left selected bg=#ffffff width=25}
{boxstyle text left mouseover alpha=sphere.gif
width=25 bg=#ffffff}
{boxstyle text middle normal fg=#ffffff alpha=0}
{boxstyle text middle selected bg=#ffffff fg=#c1a44b}
{boxstyle text middle mouseover bg=#ffffff fg=#c1a44b}
{boxstyle delimit middle height=2 bg=#ffffff}
{boxstyle delimit left bg=#ffffff}
{sb-menu menu=example.menu}
{/navigation}
Background images
Instead of using a solid color as background in the
<navigation> tag, it is possible to use an image. In this
example the attribute bg=#c1a44b has been replaced by an image,
bgsrc=craters.gif.
Introduction
Templates
Navigation
SiteBuilder tags
Appendix
{navigation bg=#c1a44b
imgbase=/creator/img/
bgsrc=craters.gif tile}
{textstyle font=bell_gothic scale=0.5 xspacing=4}
{boxstyle text left normal alpha=half-sphere.gif
bg=#ffffff width=25}
{boxstyle text left selected bg=#ffffff width=25}
{boxstyle text left mouseover alpha=sphere.gif
width=25 bg=#ffffff}
{boxstyle text middle normal fg=#ffffff alpha=0}
{boxstyle text middle selected bg=#ffffff fg=#c1a44b}
{boxstyle text middle mouseover bg=#ffffff fg=#c1a44b}
{boxstyle delimit middle height=2 bg=#ffffff}
{boxstyle delimit left bg=#ffffff}
{sb-menu menu=example.menu}
{/navigation}
Coloring the background
The Navigation module supports layers with partial
transparency i.e alpha channels. Taking advantage of this allows for
coloration of the background image set in the <navigation>
tag. This has been used in the next example to color the
selected and the mouseover boxes in a lighter blue
color. The transparency, or alpha, is set to alpha=100 and the
background color is set to a light blue color (bg=#0066ff).
Introduction
Templates
Navigation
SiteBuilder tags
Appendix
{navigation imgbase=/creator/img/
bgsrc=craters.gif tile}
{textstyle font=bell_gothic scale=0.5 xspacing=7}
{boxstyle text middle fg=#ffffff alpha=0}
{boxstyle text middle selected alpha=100 bg=#0066ff
fg=#ffffff}
{boxstyle text middle mouseover alpha=100 bg=#0066ff
fg=#ffffff}
{boxstyle delimit middle height=1 bg=#ffffff}
{sb-menu menu=example.menu}
{/navigation}
Submenus
Working with submenus is also possible in Roxen SiteBuilder. In this
example the <sb-output> and the <submenu> tags are
used to define a two-level graphical navigation interface. The
attribute above, selected and below
are used in <sb-output> to define which part of the menu to
output. Above outputs the part above the selected button,
selected outputs the selected part and below outputs the
part of the menu below the selected button. The <submenu> tag
works exactly the same way as the <navigation> tag.
Introduction
Templates
Navigation
Images
More images
Even more
SiteBuilder tags
Appendix
{navigation imgbase=/creator/img/
bgsrc=craters.gif tile}
{textstyle font=bell_gothic scale=0.5 xspacing=7}
{boxstyle text middle fg=#ffffff alpha=0 width=190}
{boxstyle text middle selected alpha=100 bg=#0066ff
fg=#ffffff}
{boxstyle text middle mouseover alpha=100 bg=#0066ff
fg=#ffffff}
{boxstyle delimit middle height=1 bg=#ffffff}
{sb-menu menu=example.menu above}
{sb-menu menu=example.menu selected}
{submenu imgbase=/creator/img/
bgsrc=craters.gif tile}
{textstyle font=bell_gothic scale=0.5 xspacing=7}
{boxstyle text left fg=#ffffff alpha=0 alpha=100
bg=#0066ff width=10}
{boxstyle text left selected alpha=100 bg=#00aa66
fg=#ffffff}
{boxstyle text left mouseover alpha=100 bg=#00aa66
fg=#ffffff}
{boxstyle text middle fg=#ffffff alpha=0 alpha=100
bg=#0066ff width=180}
{boxstyle text middle selected alpha=100 bg=#00aa66
fg=#ffffff}
{boxstyle text middle mouseover alpha=100 bg=#00aa66
fg=#ffffff}
{boxstyle delimit middle height=1 bg=#ffffff}
{boxstyle delimit left height=1 bg=#ffffff}
{boxstyle left bottom height=1 bg=#ffffff}
{boxstyle middle bottom height=1 bg=#ffffff}
{sb-menu menu=sub-example.menu}
{/submenu}
{sb-menu menu=example.menu below}
{/navigation}
|