Table of Contents

  • Introduction
  • Templates
  • Navigation
    · Introduction
    · Basic Concept
    · <navigation>
    · <textstyle>
    · <boxstyle>
    · <mi>
    · Examples
    · Example 1
    · Example 2
    · Example 3
  • SiteBuilder Tags
  • Examples
  • References
  • Example 2
    This example shows a navigation interface used at http://www.roxen.com. Figure 1 below shows the final result.

    Figure 1

    {navigation delimitabove maxwidth=122 width=122 imgbase=/templates/img/ bgsrc=menu_sv.ppm quant=64 noselectedmouseover}
    The navigation interface is defined:
    The delimit fields should be added above the text boxes instead of below them.
    The width is set to 122 pixels.
    A background image found in /templates/img/ should be used.
    Graphics should use a maximum of 64 colors.
    Selected items should not be highlighted when the mouse pointer is placed on them.

    {textstyle xspacing=4 yspacing=2 left scale=0.66 font="stone_sans bold"}
    The font is set to stone sans, the spacing and alignment of the text is defined.

    {boxstyle middle text fg=white bg=#5050ff alpha=70 _height=16}
    {boxstyle middle text selected fg=white bg=#ff8800 alpha=70 _height=16}
    {boxstyle middle text mouseover fg=#ffdd00 bg=#5050ff alpha=70 _height=16}
    {boxstyle middle delimit bg=white height=1 alpha=250}
    {boxstyle middle bottom bg=white height=1 alpha=250}
    {boxstyle middle top bg=white height=1 alpha=250}
    The appearance of the boxes is defined for the middle section of the navigation menu table. Since the left and right sections are not defined they will be left out. The alpha values are selected to show different amounts of the background picture. The text sections are also defined to change appearance when an item is selected or when the mouse pointer is placed on it.

    {sb-menu menu=top.menu above selected}
    The current directory, i e where the selected content page is located, will be searched for a file called top.menu and create the menu from its content. Only the part of the top menu above and including the selected item will be displayed.

    If the file is not found in the current directory, the above directory in the file structure will be searched until the file is found or until / is reached. If the file is not found at all, no menu will be displayed.

    {submenu maxwidth=122 width=122 noselectedmouseover imgbase=/templates/img/ bgsrc=menu_sv.ppm quant=64}
    {textstyle font="stone_sans bold" scale=0.66 xspacing=4 yspacing=2 right}
    {boxstyle middle text fg=white bg=#ff8800 alpha=70}
    {boxstyle middle text selected fg=#ffdd00 bg=#ff8800 alpha=70}
    {boxstyle middle text mouseover fg=#ffdd00 bg=#ff8800 alpha=70}
    {boxstyle middle delimit bg=white height=1 alpha=250}
    {boxstyle middle top bg=#ff7b00 height=1 alpha=250}
    A sub menu is defined much like the navigation section. The appearance will be somewhat different.

    {sb-menu menu=sub.menu}
    {/submenu}
    The current directory, or above, will be searched for a file called sub.menu and create the menu from its content. If the file exists, a sub menu will be displayed directly below the selected item in the top menu.

    {sb-menu menu=top.menu below}
    {/navigation}
    The current directory, or above, will be searched for a file called top.menu and create the menu from its content. Now, only the part of the top menu below the selected item will be displayed.