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