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.