Changing the appearance of the navigation objects

Web Site Navigation generates Web Site Navigation, such as navigation bars and site maps, from the site structure and the Specification pages. The specification pages are HTML files that contain special comment tags and expressions.

A specification page can be specified as an attribute of siteedit:navbar, siteedit:navtrail, siteedit:navtab and siteedit:sitemap tags, which are the tags inserted in your Web pages when you add Web Site Navigation such as navigation bars, navigation trails, navigation tabs, and site maps. The following is a list of Web Site Navigation and associated specification pages that are included with this product:

Web Site Navigation Specification page (HTML or JSP)
Horizontal Bar horizontal-text

horizontal

horizontal-button

horizontal-sep

horizontal-tab

Horizontal Tabs horizontal-tab01

horizontal-tab02

horizontal-tab03

Vertical Bar vertical-text

vertical

vertical-button

vertical-sep

vertical-tab

Vertical Tabs vertical-tab01
Navigation Trail trail

trail_horizontal

trail_vertical

Drop-Down Menu dropdown
Site Map sitemap

sitemap_vertical

To modify the navigation specification:

  1. Right-click the navigation element and select Properties to open the Properties view.

  2. You can edit the navigation specification by editing the information in the different properties tabs. Depending on the properties available to the navigation element, you can edit the properties for:

    • Specification File

    • Link Destination

    • Link Level

    • Normal Link

    • Highlighted Link

    • Destination Group

  3. In the Specification File tab, you can specify a style in the

    Style field using CSS conventions, for example color: white; font-style: italic; background-color: blue The style will be applied to the <A> tag of the navigation bar and the navigation bar would look like this:

  4. You can also achieve the same effect by using the

    Class field. For example, if you specified sample in the

    Class field, the style in the sample class would be applied to the <A> tag of the navigation bar. The sample class in the style sheet could look like this:

    Note that the class must belong to a style sheet that is applied to the page.

  5. You can use the

    User value field if you are designing your own navigation. The

    User value field refers to the ${sitenav.userdata} variable in the navigation specification file. For example, if you have the following code in your specification file below the <body> tag: 

    <h1>${sitenav.userdata}</h1>
    whatever you enter into the

    User value field will appear in the <h1> tags. If you typed This is a user value in the

    User value field, the navigation bar would look like this:

    Tip: You can also modify the navigation specification file directly by opening it in the editor. Use caution when doing so, as changing the code may break the functioning of the navigation elements.