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 |
|---|---|
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 |
|---|---|
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 |
|---|---|
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 -->
© 2024 Cloudrexx AG | Schweizer Cloud CMS | Datenschutzerklärung