Inhaltsverzeichnis

1. Übersicht
   1. Zweck dieses Artikels
   2. Navigations-Typen
   3. Navigations-Modi
2. Navigations-Typen
   1. Navigation
   2. Nested-Navigation
   3. Dropdown-Navigation
3. Navigations-Modi
   1. Navbar-Modus
   2. Subnavbar-Modus
   3. Modus festlegen
4. Best practices

1. Übersicht

1.1. Zweck dieses Artikels

Dieser Artikel dient als erleichterter Einstieg in das Thema "Navigationen in Cloudrexx". Eine detaillierte Dokumentation der Möglichkeiten findet sich unter http://wiki.contrexx.com/en/index.php?title=Navigation.

1.2. Navigations-Typen

Es gibt 3 grundsätzlich verschiedene Typen von Navigationen:

• Navigation
• Nested Navigation
• Dropdown Navigation

1.3. Navigations-Modi

Zudem gibt es, unabhängig vom Navigationstyp, 2 verschiedene Modi der Navigation:

• Navbar
• Subnavbar

2. Navigations-Typen

2.1. Navigation

Vorteile

• Einfach zu benutzen
• Jede Ebene einzeln stylebar
• Kompletter HTML-Code editierbar

Nachteile

• Die generierte HTML-Struktur entspricht nicht der Struktur des Seitenbaums (alle Seiten sind auf der gleichen Ebene der HTML-Liste / Elemente sind nicht verschachtelt)

Beispiel

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

Einfache Seiten mit flachem Seitenbaum (wenige Ebenen) wenn der komplette HTML-Code editierbar sein muss.

Dokumentation

http://wiki.contrexx.com/en/index.php?title=Navigation#Navigation

2.2. Nested-Navigation

Vorteile

• Seitenbaum wird im HTML korrekt abgebildet (Elemente sind verschachtelt), dies erlaubt einfacheres Styling
• Zu generierende Ebenen frei wählbar
• Unendlich viele Unterebenen ohne Erweiterung des Templates möglich

Nachteile

• HTML-Code grösstenteils nicht editierbar: Die <ul>- und <li>-Tags werden vom System generiert und können nicht bearbeitet werden

Beispiel

<!-- BEGIN nested_navigation -->

[[levels_12]]

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

<!-- END nested_navigation -->

Dieses Beispiel erzeugt eine Navigation der ersten beiden Ebenen (wegen des Platzhalters [[levels_12]]).

Empfohlene Anwendung

Seiten mit tiefem Seitenbaum (viele Ebenen), und Subnav-Navigationen (siehe Nachteile Dropdown-Navigation)

Dokumentation

http://wiki.contrexx.com/en/index.php?title=Navigation#Nested_Navigation

2.3. Dropdown-Navigation

Vorteile

• Seitenbaum wird im HTML korrekt abgebildet (Elemente sind verschachtelt), dies erlaubt einfacheres Styling
  
• Fast kompletter HTML-Code editierbar

Nachteile

• Die <ul>-Tags der Unterebenen werden vom System generiert und können nicht bearbeitet werden
• Für Unternavigationen nur bedingt geeignet, da die generierte HTML-Struktur immer alle Ebenen (wenn auch ohne Inhalt) enthält.

Beispiel

<!-- 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>[[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>
    </li>
    <!-- END level_2 -->

</ul>

<!-- END navigation_dropdown -->

Auch dieses Beispiel erzeugt eine Navigation mit den ersten beiden Ebenen.

Empfohlene Anwendung

Alle Navigationen, die bei der ersten Ebene beginnen.

Dokumentation

http://wiki.contrexx.com/en/index.php?title=Navigation#Dropdown_Navigation

3. Navigations-Modi

3.1. Navbar-Modus

Eine Navigation im Navbar-Modus stellt unabhängig von der aktuell dargestellten Seite immer die gleichen Elemente dar. In diesem Modus ist es also nicht möglich, nur einen Zweig des Seitenbaums darzustellen. Dieser Modus eignet sich hervorragend für die Hauptnavigation.

3.2. Subnavbar-Modus

Eine Navigation im Subnavbar-Modus zeigt immer nur Elemente des aktuellen Zweiges des Seitembaumes an. In diesem Modus ist es also nicht möglich, alle Elemente einer Ebene des Seitenbaumes darzustellen (es sei denn alle existierenden Elemente sind im aktiven Zweig). Dieser Modus eignet sich hervorragend für Unternavigationen.

3.3. Modus festlegen

Der Modus einer Navigation kann auf zwei Arten festgelegt werden:

1. Durch Auswahl des geeigneten Dateinamens: Navigationen in den Dateien navbar.html, navbar2.html und navbar3.html sind standartmässig im Navbar-Modus. Navigationen in den Dateien subnavbar.html, subnavbar2.html und subnavbar3.html sind standartmässig im Subnavbar-Modus.
2. Durch Überschreiben des Standart-Modus: Eine Navigation, die sich standartmässig im Navbar-Modus befindet, kann durch Hinzufügen des Platzhalters [[LEVELS_BRANCH]] innerhalb des Hauptblocks (z.B. <!-- BEGIN navigation-->) in den Subnavbar-Modus versetzt werden. Umgekehrt kann eine Navigation im Subnavbar-Modus mit dem Platzhalter [[LEVELS_FULL]] (an selber Stelle) in den Navbar-Modus versetzt werden.

4. Best practices

Wenn möglich sollten immer die folgenden Ansätze gewählt werden:

• Das Festlegen des Modus' durch Überschreiben sollte vermieden werden
• Für Hauptnavigationen sollte immer die Dropdown-Navigation verwendet werden
• Für Unternavigationen sollte, wenn die Dropdown-Navigation nicht sinnvoll einsetzbar ist, die Nested-Navigation verwendet werden