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

<ul>{** * 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 *} {assign var="path_only" value="1"} {* maximale Tiefe der Navigation *} {assign var="max_level" value="5"} {* ID der Ausgangsseite (bitte gewünschte Modus auskommentieren) *} {assign var="rootPage" value=$site->getRoot()}   {* Navigation startet bei ID=1 *} {**assign var="rootPage" value=$page**}       {* Navigation zeigt immer nur aktuelle Unterseiten *} {** Template-Pfad zur Include-Datei **} {capture assign="childTpl"}{$egotec_conf.egotec_dir}skin/{$site->skin}/tpl/more_children.html{/capture} {** * 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} {foreach from=$aktPfad item="p" key="k"}    <a href="{page_url page=$p}">{$p->field.name}</a>   {/foreach} {assign var="level" value="1"} <ul>    {* Auf gleicher Ebene bleiben, wenn keine Kinder vorhanden sind *}    {if $rootPage == $page}       {assign var="max_level" value="1"}   {* nur 1 Ebene anzeigen *}       {assign var="path_only" value="1"}       {* Prüfen, ob aktuelle Seite Unterseiten hat *}       {get_children page=$page var="kind" param.no_nav_hide=1 first_page=1}       {if !$kind}   {* wenn nicht... *}          {* den aktuellen Pfad nochmal durchlaufen *}          {foreach from=$aktPfad item="p" key="k"}             {if $p->field.id != $page->field.id}                {assign var="page_parent" value=$p}             {/if}          {/foreach}          {* als letztes Kommt der Parent raum *}          {assign var="rootPage" value=$page_parent}       {/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"}    {if !$path_only}{assign var="inpath" value="1"}{/if}    <li><a href="{nav_url}">{$level1->field.name}</a>       {if $level1->field.has_children && $level<$max_level && $inpath} {* Gibts Unterseiten? *}          {* Weiter mit Unterseiten *}          {include file=$childTpl start_id=$level1->field.id level=$level}       {/if} {* ENDIF: Gibts Unterseiten? *}    </li>    {/nav} </ul>

more_children.html

<ul>{** * Navigation für Unterseiten (wird rekursiv aufgerufen) *} {* Aktuelle Ebene ermitteln *} {assign var="level" value=$level+1} <ul> {nav id=$start_id item="child" param.has_children=1}    {* Im Pfad? *}    {in_path path=$aktPfad id=$child->field.id var="inpath"}    {if !$path_only}{assign var="inpath" value="1"}{/if}    <li><a href="{nav_url}">{$child->field.name}</a>       {* Gibts Unterseiten ? *}       {if $child->field.has_children && $level<$max_level && $inpath} {* Nur maximal eingestelle Ebenen anzeigen *}          {include file=$childTpl start_id=$child->field.id level=$level}       {/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.