Inhaltsverzeichnis Beispiele & Vorlagen Aufklappbare Navigation

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:
  1. {**
  2. * XHTML-konforme Navigation für Egotec-CMS
  3. * ----------------------------------------
  4. * Features:
  5. * - Navigations-Tiefe einstellbar
  6. * - Nur Navigation des aktuellen Pfads anzeigen
  7. * - keine leeren UL-Tags (XHTML-komform)
  8. * - Einstellbare Ausgangsseite ($page oder $rootId)
  9. * - CSS-Klassen:
  10. *   - Pfad zur aktuellen Seite: "active" (a-Element)
  11. *   - Aktive Seite: "active current" (a-Element)
  12. *   - Aktuelle Tiefe: "levelx" (ul-Element), x steht dabei für die Ebene
  13. *}

  14. {* #######################
  15.    ##  Konfigurationen  ##
  16.    ####################### *}

  17. {* Nur Seiten im aktuellen Pfad aufklappen *}
  18. {assign var="path_only" value="1"}

  19. {* maximale Tiefe der Navigation *}
  20. {assign var="max_level" value="5"}

  21. {* ID der Ausgangsseite (bitte gewünschte Modus auskommentieren) *}
  22. {assign var="rootPage" value=$site->getRoot()}    {* Navigation startet bei ID=1 *}
  23. {**assign var="rootPage" value=$page**}         {* Navigation zeigt immer nur aktuelle Unterseiten *}

  24. {** Template-Pfad zur Include-Datei **}
  25. {capture assign="childTpl"}{$egotec_conf.egotec_dir}skin/{$site->skin}/tpl/more_children.html{/capture}

  26. {**
  27. * Beispiele:
  28. * 1) Vollständig aufgeklappte Navigation (Navigationstiefe: 5) = Sitemap:
  29. * path_only=0, max_level=5,rootPage=$site->getRoot
  30. *
  31. * 2) Aufklappbare Navigation mit 3 Ebenen
  32. * path_only=1, max_level=3, rootPage=$site->getRoot
  33. *}

  34. {* ##############
  35.    ##  Skript  ##
  36.    ############## *}

  37. {** Aktuellen Pfad ermitteln **}
  38. {get_path page=$page var="aktPfad" show_self=1}
  39. {foreach from=$aktPfad item="p" key="k"}
  40.     <a href="{page_url page=$p}">{$p->field.name}</a>  
  41. {/foreach}

  42. {assign var="level" value="1"}
  43. <ul class="level{$level}">

  44.     {* Auf gleicher Ebene bleiben, wenn keine Kinder vorhanden sind *}
  45.     {if $rootPage == $page}

  46.         {assign var="max_level" value="1"}    {* nur 1 Ebene anzeigen *}
  47.         {assign var="path_only" value="1"}

  48.         {* Prüfen, ob aktuelle Seite Unterseiten hat *}
  49.         {get_children page=$page var="kind" param.no_nav_hide=1 first_page=1}
  50.         {if !$kind}    {* wenn nicht... *}

  51.             {* den aktuellen Pfad nochmal durchlaufen *}
  52.             {foreach from=$aktPfad item="p" key="k"}
  53.                 {if $p->field.id != $page->field.id}
  54.                     {assign var="page_parent" value=$p}
  55.                 {/if}
  56.             {/foreach}

  57.             {* als letztes Kommt der Parent raum *}
  58.             {assign var="rootPage" value=$page_parent}
  59.         {/if}
  60.     {/if}

  61.     {nav id=$rootPage->field.id item="level1" param.has_children=1}

  62.     {* Liegt die Seite im Pfad? *}
  63.     {in_path path=$aktPfad id=$level1->field.id var="inpath"}
  64.     {if !$path_only}{assign var="inpath" value="1"}{/if}

  65.     <li><a class="{if $inpath}active{/if} {if $page->field.id == $level1->field.id}current{/if}" href="{nav_url}">{$level1->field.name}</a>

  66.         {if $level1->field.has_children && $level<$max_level && $inpath} {* Gibts Unterseiten? *}

  67.             {* Weiter mit Unterseiten *}
  68.             {include file=$childTpl start_id=$level1->field.id level=$level}

  69.         {/if} {* ENDIF: Gibts Unterseiten? *}

  70.     </li>
  71.     {/nav}

  72. </ul>

more_children.html

QuelltextSmarty Code:
  1. {**
  2. * Navigation für Unterseiten (wird rekursiv aufgerufen)
  3. *}

  4. {* Aktuelle Ebene ermitteln *}
  5. {assign var="level" value=$level+1}

  6. <ul class="level{$level}">

  7. {nav id=$start_id item="child" param.has_children=1}

  8.     {* Im Pfad? *}
  9.     {in_path path=$aktPfad id=$child->field.id var="inpath"}
  10.     {if !$path_only}{assign var="inpath" value="1"}{/if}

  11.     <li><a class="{if $inpath}active{/if} {if $page->field.id == $child->field.id}current{/if}" href="{nav_url}">{$child->field.name}</a>

  12.         {* Gibts Unterseiten ? *}
  13.         {if $child->field.has_children && $level<$max_level && $inpath} {* Nur maximal eingestelle Ebenen anzeigen *}
  14.             {include file=$childTpl start_id=$child->field.id level=$level}
  15.         {/if}    {* ENDIF: Gibts Unterseiten? *}

  16.     </li>

  17. {/nav}

  18. </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.