Aufklappbare Navigation
Ein zentrales Skript, über welches komplexe Navigationsstrukturen über Smarty erstellt werden können.
Dieses Skript verwendet die {nav}-Funktion und kann nach Belieben für Projekte angepasst und ändern werden.
navigation.html
QuelltextSmarty Code:
- {**
- * XHTML-konforme Navigation für Egotec-CMS
- * ----------------------------------------
- * Features:
- * - Navigations-Tiefe einstellbar
- * - Nur Navigation des aktuellen Pfads anzeigen
- * - keine leeren UL-Tags (XHTML-komform)
- * - Einstellbare Ausgangsseite ($page oder $rootId)
- * - CSS-Klassen:
- * - Pfad zur aktuellen Seite: "active" (a-Element)
- * - Aktive Seite: "active current" (a-Element)
- * - Aktuelle Tiefe: "levelx" (ul-Element), x steht dabei für die Ebene
- *}
- {* #######################
- ## Konfigurationen ##
- ####################### *}
- {* Nur Seiten im aktuellen Pfad aufklappen *}
- {* maximale Tiefe der Navigation *}
- {* ID der Ausgangsseite (bitte gewünschte Modus auskommentieren) *}
- {**assign var="rootPage" value=$page**} {* Navigation zeigt immer nur aktuelle Unterseiten *}
- {** Template-Pfad zur Include-Datei **}
- {**
- * Beispiele:
- * 1) Vollständig aufgeklappte Navigation (Navigationstiefe: 5) = Sitemap:
- * path_only=0, max_level=5,rootPage=$site->getRoot
- *
- * 2) Aufklappbare Navigation mit 3 Ebenen
- * path_only=1, max_level=3, rootPage=$site->getRoot
- *}
- {* ##############
- ## Skript ##
- ############## *}
- {** Aktuellen Pfad ermitteln **}
- {get_path page=$page var="aktPfad" show_self=1}
- <a href="{page_url page=$p}">{$p->field.name}</a>
- {/foreach}
- <ul class="level{$level}">
- {* Auf gleicher Ebene bleiben, wenn keine Kinder vorhanden sind *}
- {* Prüfen, ob aktuelle Seite Unterseiten hat *}
- {get_children page=$page var="kind" param.no_nav_hide=1 first_page=1}
- {* den aktuellen Pfad nochmal durchlaufen *}
- {/if}
- {/foreach}
- {* als letztes Kommt der Parent raum *}
- {/if}
- {/if}
- {nav id=$rootPage->field.id item="level1" param.has_children=1}
- {* Liegt die Seite im Pfad? *}
- {in_path path=$aktPfad id=$level1->field.id var="inpath"}
- {* Weiter mit Unterseiten *}
- {/if} {* ENDIF: Gibts Unterseiten? *}
- </li>
- {/nav}
- </ul>
more_children.html
QuelltextSmarty Code:
- {**
- * Navigation für Unterseiten (wird rekursiv aufgerufen)
- *}
- {* Aktuelle Ebene ermitteln *}
- <ul class="level{$level}">
- {nav id=$start_id item="child" param.has_children=1}
- {* Im Pfad? *}
- {in_path path=$aktPfad id=$child->field.id var="inpath"}
- {* Gibts Unterseiten ? *}
- {if $child->field.has_children && $level<$max_level && $inpath} {* Nur maximal eingestelle Ebenen anzeigen *}
- {/if} {* ENDIF: Gibts Unterseiten? *}
- </li>
- {/nav}
- </ul>
Einbinden der Navigation ins Template
- Erstellen Sie entsprechenden HTML-Dateien mit dem Code (siehe oben)
- Binden Sie die "navigation.html" an gewünschter Stelle im Ihrem Template ein
- Nehmen Sie gewünschte Einstellungen im Skriptbereich "konfiguration" (Datei: navigation.html) vor.