Navigation

From Cloudrexx Development Wiki
Jump to: navigation, search

General information

The following files can be used to create a navigation:

  • navbar.html
  • subnavbar.html

If you want to implement more than two navigations you can do it with these:

  • navbar2.html
  • navbar3.html
  • subnavbar2.html
  • subnavbar3.html

Use the following placeholders to integrate them into the template:

  • [[NAVBAR_FILE]] - navbar.html
  • [[NAVBAR2_FILE]] - navbar2.html
  • [[NAVBAR3_FILE]] - navbar3.html
  • [[SUBNAVBAR_FILE]] - subnavbar.html
  • [[SUBNAVBAR2_FILE]] - subnavbar2.html
  • [[SUBNAVBAR3_FILE]] - subnavbar3.html

Navigation vs. Subnavigation

A subnavigation depends on the currently active page. For example for the following tree

  • Home
  • Products
    • Shop
      • Special offers
      • Cart
      • Conditions
    • Other
  • About
  • Sitemap

If you want a main navigation for the first two levels (as seen on demo.contrexx.com) you would use a navigation file containing the code shown in Dropdown Navigation.

For a second navigation showing all other levels, but only of the current branch (as seen on demo.contrexx.com) you would use a subnavigation file containing the following 

<!-- BEGIN navigation_dropdown -->
<ul id="subnavigation">
    <!-- BEGIN level_1 -->
    <li class="level-1 [[STYLE]] [[CSS_NAME]]">
        <a href="[[URL]]" class="[[STYLE]] [[CSS_NAME]]" title="[[NAME]]" target="[[TARGET]]" >[[NAME]]</a>[[SUB_MENU]]
    </li>
    <!-- END level_1 -->
    <!-- BEGIN level_2 -->
    <li class="level-2 [[STYLE]] [[CSS_NAME]]">
        <a href="[[URL]]" class="[[STYLE]] [[CSS_NAME]]" title="[[NAME]]" target="[[TARGET]]" >[[NAME]]</a>[[SUB_MENU]]
    </li>
    <!-- END level_2 -->
    <!-- BEGIN level_3 -->
    <li class="level-3 [[STYLE]] [[CSS_NAME]]">
        <a href="[[URL]]" class="[[STYLE]] [[CSS_NAME]]" title="[[NAME]]" target="[[TARGET]]" >[[NAME]]</a>[[SUB_MENU]]
    </li><!-- END level_3 -->
    <!-- BEGIN level_4 -->
    <li class="level-4 [[STYLE]] [[CSS_NAME]]">
        <a href="[[URL]]" class="[[STYLE]] [[CSS_NAME]]" title="[[NAME]]" target="[[TARGET]]" >[[NAME]]</a>
    </li>
    <!-- END level_4 -->
</ul>
<!-- END navigation_dropdown  -->


Assuming, that you are looking at the "Shop" page, the navigation will show the following:

  • Home
  • Products
    • Shop
  • About
  • Sitemap

while the subnavigation will show

  • Products
    • Shop
      • Special offers
      • Cart
      • Conditions
    • Other

Navigation mode juggling

Since Contrexx 3.0 Service Pack 4, one can change the mode of a navigation (i.e. treat a navigation like a subnavigation or a subnavigation like a navigation). This is done by using the placeholders [[LEVELS_FULL]] (means: treat like a navigation) and [[LEVELS_BRANCH]] (means: treat like a subnavigation).

The following shows how a subnavigation can be treated as a normal navigation: 

<!-- BEGIN navigation_dropdown -->
[[LEVELS_FULL]]
 <ul id="subnavigation">
     <!-- BEGIN level_1 -->
     <li class="level-1 [[STYLE]] [[CSS_NAME]]">
         <a href="[[URL]]" class="[[STYLE]] [[CSS_NAME]]" title="[[NAME]]" target="[[TARGET]]" >[[NAME]]</a>[[SUB_MENU]]
     </li>
     <!-- END level_1 -->
     <!-- BEGIN level_2 -->
     <li class="level-2 [[STYLE]] [[CSS_NAME]]">
         <a href="[[URL]]" class="[[STYLE]] [[CSS_NAME]]" title="[[NAME]]" target="[[TARGET]]" >[[NAME]]</a>[[SUB_MENU]]
     </li>
...

This feature should be avoided and is thought for making updates easier only.

Types

There are three types of navigations you can use in a navigation file (mentioned above).

Navigation

  • Simple standard type
  • Not nested (children aren't in the same tag as the parent)
  • If the current page is invisible the children are still parsed.
  • There are only <li> tags even for the children.
<!-- BEGIN navigation -->

<ul id="navigation">

    <!-- BEGIN level_1 -->
    <li class="level-1 [[STYLE]] [[CSS_NAME]]">
        <a class="[[STYLE]] [[CSS_NAME]]" href="[[URL]]" target="[[TARGET]]" title="[[NAME]]">[[NAME]]</a>
    </li>
    <!-- END level_1 -->

    <!-- BEGIN level_2 -->
    <li class="level-2 [[STYLE]] [[CSS_NAME]]">
        <a class="[[STYLE]] [[CSS_NAME]]" href="[[URL]]" target="[[TARGET]]" title="[[NAME]]">[[NAME]]</a>
    </li>
    <!-- END level_2 -->

</ul>

<!-- END navigation -->

Placeholders

Placeholder Description Example
URL The page's URI /en/Welcome
NAME The page's name Welcome
TARGET The page's link target _self
LEVEL_INFO If the navigation entry (page) does have sub-entries (either empty or set to down) down
STYLE If the navigation entry (page) is an active element of the rendered site-tree (either set to active or inactive) active
PAGE_ID ID of the navigation entry (page) 3
PAGE_NODE_ID ID of the structure entry in the navigation (node) 3
CSS_NAME The page's optional attribute Additional CSS Navigation Class <value from attribute>

Nested Navigation

  • Advanced version of the standard navigation above
  • If the current page is invisible the children are still parsed.
  • Children are parsed in a new <ul> tag.
  • You have an "option" placholder like [[levels_XY]] to define how many levels you like to parse. The "X" for the start level and the "Y" for the end level.
    • [[levels_13]] - Levels 1-3
    • [[levels_11]] - Only one level (level 1)
    • [[levels_2+]] - All levels starting from level 2
    • [[levels_13_full]] - All levels 1-3
    • [[levels_13_branch]] - Only sub-pages in levels 1-3 of the current page
<!-- BEGIN nested_navigation -->

[[levels_12]]

<!-- BEGIN level -->
    <a class="[[CSS_NAME]]" href="[[URL]]" target="[[TARGET]]" title="[[NAME]]">[[NAME]]</a>
<!-- END level -->

<!-- END nested_navigation -->

Styling

The auto-generated list-elements (<li>-HTML-tag) have either the CSS-class active or inactive assigned, depending on if the navigation-entry lies within the active site-tree.

Placeholders

Placeholder Description Example
URL The page's URI /en/Welcome
NAME The page's name Welcome
TARGET The page's link target _self
CSS_NAME The page's optional attribute Additional CSS Navigation Class <value from attribute>
PAGE_ID ID of the navigation entry (page) 3
PAGE_NODE_ID ID of the structure entry in the navigation (node) 3
NAVIGATION_ID The index of the navigation entry within its level of the site-tree's hierarchical structure 1

Dropdown Navigation

  • Nested navigation (children are in the same tag as the parent)
  • The entire page structure will always be parsed (all levels).
  • If a page has children they are parsed with a new <ul> tag at the position you placed the [[SUB_MENU]] placeholder.
    • This placeholder parses the next defined level. In the example below the placholder will parse the code in <!-- BEGIN level_2 -->*<!-- END level_2 -->.
    • Available since v5 SP2: If the placeholder [[SUB_MENU]] is enclosed by the block <!-- BEGIN level_N_sub_menu -->*<!-- END level_N_sub_menu --> (where N represents the current level), then that blocks content will be used as a container for the node's children (instead of the system's default UL-tag).
[[V2]]
<!-- BEGIN navigation_dropdown -->

<ul id="navigation">

    <!-- BEGIN level_1 -->
    <li class="level-1 [[STYLE]] [[CSS_NAME]]">
        <a class="[[STYLE]] [[CSS_NAME]]" href="[[URL]]" target="[[TARGET]]" title="[[NAME]]">[[NAME]]</a>
        <!-- BEGIN level_1_sub_menu -->
        <ul class="nodeContainer">[[SUB_MENU]]</ul>
        <!-- END level_1_sub_menu -->
    </li>
    <!-- END level_1 -->

    <!-- BEGIN level_2 -->
    <li class="level-2 [[STYLE]] [[CSS_NAME]]">
        <a class="[[STYLE]] [[CSS_NAME]]" href="[[URL]]" target="[[TARGET]]" title="[[NAME]]">[[NAME]]</a>
        <!-- BEGIN level_2_sub_menu -->
        <ul class="nodeContainer">[[SUB_MENU]]</ul>
        <!-- END level_2_sub_menu -->
    </li>
    <!-- END level_2 -->

    <!-- BEGIN level_3 -->
    <li class="level-3 [[STYLE]] [[CSS_NAME]]">
        <a class="[[STYLE]] [[CSS_NAME]]" href="[[URL]]" target="[[TARGET]]" title="[[NAME]]">[[NAME]]</a>
    </li>
    <!-- END level_3 -->

</ul>

<!-- END navigation_dropdown -->

Placeholders

Placeholder Description Example
V2 Parses a level class in UL elements for branches (e.g.: <ul class="level_2 menu">) instead of an incremented ID (<ul id="menubuilder7" class="menu">)
URL The page's URI /en/Welcome
NAME The page's name Welcome
TARGET The page's link target _self
STYLE If the navigation entry (page) is an active element of the rendered site-tree (either set to active / inactive or starter_active / starter_normal if the entry lies on the first level of the site-tree's hierarchical structure).

Additionally, if the navigation entry does contain sub entries, then it will also contain the CSS class menu_node.

active
CSS_NAME The page's optional attribute Additional CSS Navigation Class <value from attribute>
PAGE_ID ID of the navigation entry (page) 3
PAGE_NODE_ID ID of the structure entry in the navigation (node) 3
NAVIGATION_ID The index of the navigation entry within its level of the site-tree's hierarchical structure 1
SUB_MENU The HTML-output of an entry's sub-entries (generated using the next deeper template block) will be put into this placeholder <HTML-output>

Navtree / Breadcrumb

The following placeholders are normally used to create a breadcrumb:

  • [[NAVTREE]] - The parent pages
  • [[NAVTITLE]] - The current page
<div id="breadcrumb">
    You are here:   <a href="{NODE_HOME}">Home</a> > {NAVTREE}<div class="current">{NAVTITLE}</div>
</div>

This example is from the standard template of Contrexx 3 and provides the following output:

Breadcrumb.jpg

Retrieved from "https://wiki.cloudrexx.com/index.php?title=Navigation&oldid=26488"