Welche Navigations-Typen gibt es?

Es gibt grundsätzlich drei verschiedene Typen von Navigationen. Diese Typen unterscheiden sich sowohl im Aufbau des Themes als auch in den Möglichkeiten:

Navigation
Nested Navigation
Dropdown Navigation

Wir empfehlen für die Hauptnavigation die Dropdown-Navigation zu verwenden. Für die Unternavigation sollte, wenn die Dropdown-Navigation nicht sinnvoll einsetzbar ist, die Nested-Navigation verwendet werden.

1. Navigation

Empfohlen für einfache Seiten mit flachem Seitenbaum (wenige Ebenen) wenn der komplette HTML-Code editierbar sein muss. Eine weiterführende Dokumentation finden Sie hier: wiki.cloudrexx.com/Navigation#Navigation.

Vorteile	Nachteile

Vorteile	Nachteile
Einfach zu benutzen	Die generierte HTML-Struktur entspricht nicht der Struktur des Seitenbaums
Jede Ebene einzeln stylebar	Alle Seiten sind auf der gleichen Ebene der HTML-Liste
Kompletter HTML-Code editierbar	Elemente sind nicht verschachtelt

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

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

2. Nested-Navigation

Empfohlen für Seiten mit tiefem Seitenbaum (viele Ebenen) und Subnav-Navigationen. Eine weiterführende Dokumentation finden Sie hier: wiki.cloudrexx.com/Navigation#Nested_Navigation.

Vorteile	Nachteile

Vorteile	Nachteile
Seitenbaum wird im HTML korrekt abgebildet (Elemente sind verschachtelt), dies erlaubt einfacheres Styling	Die <ul>- und <li>-Tags werden vom System generiert und können nicht bearbeitet werden
Zu generierende Ebenen frei wählbar	HTML-Code grösstenteils nicht editierbar
Unendlich viele Unterebenen ohne Erweiterung des Templates möglich

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

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

3. Dropdown-Navigation

Empfohlen für alle Navigationen, die bei der ersten Ebene beginnen. Eine weiterführende Dokumentation finden Sie hier: wiki.cloudrexx.com/Navigation#Dropdown_Navigation.

Vorteile	Nachteile

Vorteile	Nachteile
Seitenbaum wird im HTML korrekt abgebildet (Elemente sind verschachtelt), dies erlaubt einfacheres Styling	Für Unternavigationen nur bedingt geeignet, da die generierte HTML-Struktur immer alle Ebenen (wenn auch ohne Inhalt) enthält.
Kompletter HTML-Code editierbar

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

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

Anwendungshilfe

Welche Navigations-Typen gibt es?

Analytics

1. Navigation

2. Nested-Navigation

3. Dropdown-Navigation

Related content