Navigation

Geändert am Mo, 19 Sep, 2016 um 11:22 VORMITTAGS

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
Diese Typen unterscheiden sich sowohl im Aufbau des Templates als auch in den Möglichkeiten. Näheres entnehmen Sie dem Abschnitt 2.1.


1.3. Navigations-Modi

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

  • Navbar
  • Subnavbar
Wobei der Modus Navbar für Navigationen, die im Umfang unabhängig von der aktiven Seite sind und Subnavbar für Navigationen, die abhängig von der gewählten Seite nur Teile des Seitenbaums darstellen.

ACHTUNG: Der Navigations-Modus sollte zwar, muss aber nicht zwingend mit dem Dateinamen (navbar.html / subnavbar.html) übereinstimmen. Mehr dazu im Abschnitt 3.3.


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


Dieses Beispiel generiert eine Navigation, die die ersten beiden Ebenen ausgibt.


Empfohlene Anwendung

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.


Beispiel einer 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.


Beispiel einer Unternavigation



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

War dieser Artikel hilfreich?

Das ist großartig!

Vielen Dank für das Feedback

Leider konnten wir nicht helfen

Vielen Dank für das Feedback

Wie können wir diesen Artikel verbessern?

Wählen Sie wenigstens einen der Gründe aus
CAPTCHA-Verifikation ist erforderlich.

Feedback gesendet

Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren