Introduction
  Publishing web pages
  RXML
  Information tags
  String tags
  Variable tags
  URL tags
  If tags
  Graphics tags
  Database tags
  LDAP
  Programming tags
  SSI tags
  Image maps
  IntraSeek
  LogView
  Templates
  Navigation
    <navigation>
    <textstyle>
    <boxstyle>
    <mi>
    Examples
  SiteBuilder tags
  Supports system
  Security
  Appendix
 
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>