TypoScript Navigation

Wir zeigen Ihnen hier den Aufbau einer Navigation mit TYPO3. Mit TyypoScript können Sie nicht nur eine hierarchische Navigation der gesamten Webseite erzeugen. Es gibt auch Sonderfälle von Menus, die sich mit TypoScript hervorragend generieren lassen.

Diese Art der Navigation baut mit TypoScript Links zu besonderen Seiten auf.

Denn oftmals steht man bei der Arbeit an einer Webseite vor der Aufgabe, bestimmte Links auf jeder Seite zu schalten. Dies können z. B. Links zum Impressum oder zum Datenschutz sein, die im Kopfbereich oder im Footer der Webseite dargestellt werden und auf jeder Seite sichtbar sein sollen. Für diesen Fall gibt es den Typ special = list der Navigation in TypoScript. Dieser Art der Navigation gibt man bestimmte IDs von Seiten vor, die dann als Links angezeigt werden. Dabei ist es unerheblich, in welcher Hierarchie diese Links stehen.

lib.navigation_banner = COA
lib.navigation_banner {
  10 = HMENU
  10 {
    special = list
    special.value = 2, 10, 72, 71
    entryLevel = 0
  
    1 = TMENU
    1 {
      NO = 1
      expAll = 0
      collapse = 0
      NO.ATagParams = class="bread_link_small white"
      NO.linkWrap = ||*|
    }
  }
}  

Als es noch keine Smartphones und noch keine tragbaren Navigationssysteme gab, wurden Kinder in Märchen in den Wald oder in Höhlen geschickt. Damit sie wieder hinausfanden, streuten sie Brotkrümel auf den Weg. Dem gleichen Zweck dient eine Navigation in einer Webseite, die uns sagt, wie wir wieder zur Startseite zurückkommen und welche Seiten auf dem Weg dahin liegen: Die Brotkrümel-, Breadcrumb- oder Parallel-Navigation.

TypoScript für eine Breadcrumb Navigation

Dieses TypoScript baut eine Breadcrumb Navigation auf, die in der Startseite beginnt.

Dabei sind die folgenden Parameter von Bedeutung:

  • special = rootline ist der Aufruf einer Parallelnavigation
  • special.range = 0 lässt die Navigation in der Startseite beginnen. Möchte man z. B. erst in der 2. Ebene der Navigation beginnen, kann man hier mit dem Wert „2“ starten.
  • allWrap = |*|| » |*|| ist ein schönes Beispiel für einen option split. Dieses Objekt baut die Navigation in einer bestimmten Reihenfolge auf. Als Trenner zwischen den einzelnen Menus dient ein HTML-Sonderzeichen.
  • ATagParams = […] weist dem generierten <a href=„[…]“> Link eine CSS-Klasse zu.
lib.breadcrumb = HMENU
lib.breadcrumb {
  special = rootline
  special.range = 0
  1 = TMENU
  1 {
    wrap = |
    target = _top
    NO {
      linkWrap = |
      allWrap = |*||&nbsp;&#187;&nbsp;|*||
      ATagParams = class="bread_link_small"
    }
  }
}

Hier ist ein Sonderfall einer Breadcrumb Navigation, den wir für die Georgienseite genutzt haben. Beim Überfahren eines Links in der Parallelnavigation taucht unter dem Link ein formatierter Text auf, der eine Beschreibung der Seite enthält. Dazu nutzen wir die prepend-Methode. Aus der Tabelle pages von TYPO3 werden mehrere potenzielle Felder über field in hierarchischer Reihenfolge ausgelesen.

Das Aufklappen der Navigation muss über ein entsprechendes CSS geregelt werden.

lib.breadcrumb = HMENU
lib.breadcrumb {
  special = rootline
  special.range = 0
  1 = TMENU
  1 {
    wrap = |
    target = _top
    NO {
      linkWrap = |
      allWrap = |*||&nbsp;&#187;&nbsp;|*||
    
      stdWrap.prepend = TEXT
      stdWrap.prepend {
        field = description // subtitle // title
        wrap = <span>|</span>
      }
      ATagParams = class="bread_link_small"
    }
  }
}

Hier ein Sonderfall für eine Breadcrumb-Navigation: Bei der aktuellen Seite (CUR) wird der Link abgeschaltet. Dies ist insofern sinnvoll, als man sich ja gerade auf dieser Seite befindet.

lib.breadcrumb = HMENU
lib.breadcrumb {
  special = rootline
  special.range = 0
  1 = TMENU
  1 {
    wrap = |
    target = _top

    ## Normalzustand der Navigation
    NO {
      linkWrap = |
      allWrap = |*||&nbsp;&raquo;&nbsp;|*||
    }

    ## Aktuell aufgerufene Seite nicht verlinkt
    CUR = 1
    CUR {
      doNotLinkIt = 1
    }
  }
}  

Hier finden Sie Beispiele für Aufbau und Integration einer Footer Navigation in einer Webseite. Man nutzt Footer oftmals, um für Besucher die wichtigsten Inhalte einer Webseite auf einen Schlag und in jeder Seite sichtbar darzustellen.

Mit diesem TypoScript können Sie eine Navigation mit einer Ebene in den Footer Ihrer Webseite integrieren.

lib.navigation_footer = COA
lib.navigation_footer {
  
  10 = HMENU
  10.wrap=<div class="ibkfooter">|</div>  
  10.entryLevel = 0
  10 {
    1 = TMENU
    1 {
      NO = 1
      expAll = 1
      collapse = 0
      NO.allWrap = |*||<br />|*||
      NO.ATagParams = class="bread_link_small"
      <span class="div_footer">|</span>
    }
  }
}  

Diese Navigation baut eine Navigation auf zwei Ebenen auf.

lib.navigation_footer = COA
lib.navigation_footer {
  20 = HMENU
  
  20 {
    special = directory
    special.value = 1
    excludeUidList = 1, 2
  
    1 = TMENU
    1 {
      expAll = 1
      collapse = 0
      NO = 1
      NO {
        ATagParams = class="footer_link_small strong"
        ATagTitle.field = description // subtitle // title
        linkWrap = <div class="div_navigation_footer footer_ebene_1">|</div>
        wrapItemAndSub = <div class="footer_frame">|</div>
      }
    }
  
    2 = TMENU
    2 {
      expAll = 1
      collapse = 0
      NO = 1
      NO {
        ATagParams = class="footer_link_small"
        ATagTitle.field = description // subtitle // title
        linkWrap = <div class="div_navigation_footer footer_ebene_2">|</div>
      }
    }
  }
}  

Nun muss das CSS angepasst werden, damit die Ebenen auch responsiv dargestellt werden.

Dieses Sprachmenu ist auf zwei Sprachen (deutsch, englisch) ausgelegt. Die IDs für die Sprachen sind 0 und 1. Das Menu lässt sich für weitere Sprachen erweitern.

lib.language_text = COA
lib.language_text {
  20 = HMENU
  20 {
    special = language
    special.value = 0,1
    special.normalWhenNoLanguage = 0
    wrap =
    1 = TMENU
    1 {
      noBlur = 1
      NO = 1
      NO {
        doNotLinkIt = 1
        stdWrap.override = &nbsp;de&nbsp; || &nbsp;en&nbsp;
        stdWrap {
          typolink {
            parameter.data = page:uid
            additionalParams = &L=0 || &L=1
            ATagParams = hreflang="de-DE" || hreflang="en-GB"
            ATagParams = class="bread_link_small"
            addQueryString = 1
            addQueryString.exclude = L,id,no_cache
            addQueryString.method = GET
            titleText.value = Hier Klicken!
            no_cache = 1
          }
        }
      }
      ACT < .NO
      ACT.linkWrap = |
      ACT.stdWrap.typolink.ATagParams = class="bread_link_small active"
      
      ## Normaler Zustand des Sprachumschalters
      USERDEF1 < .NO
      USERDEF1 {
        linkWrap = |
        stdWrap.typolink >
      }
      
      ## Aktiver Zustand für ausgewähltes Land
      USERDEF2 < .ACT
      USERDEF2 {
        linkWrap = |
        stdWrap.typolink >
      }
    }
  }
  wrap = |
}  

Sprachmenu mit Flaggen

Dieses Sprachmenu erlaubt die Umschaltung zwischen zwei Sprachen, in diesem Fall mit den IDs 0 und 1. Diesen sind die Sprachen deutsch und englisch zugeordnet. Für beide Sprachen müssen Flaggen oder andere Symbole als Bilder bereitgestellt und eingebunden werden. Die Sprachen sind beliebig erweiterbar.

lib.language_image = HMENU
lib.language_image {
  special = language
  special.value = 0,1
  special.normalWhenNoLanguage = 0
  1 = GMENU
  1.NO {
    XY = [5.w]+2, [5.h]+2
    XY = [5.w], [5.h]
    backColor = black
    
    ## Einbindung der Flaggen als Bilder
    5 = IMAGE
    5 {
      ## Link zum Bild
      file = fileadmin/img/flags/DE.png || fileadmin/img/flags/GB.png
      
      ## Bild zuschneiden und in Größe anpassen
      file.width = 30c
      file.height = 25
      border = 0
      altText = title
      offset = 0
    }
  }
  1.ACT < .1.NO
  1.ACT = 1
  1.ACT.backColor = white
  
  ## Normalzustand der Navigation
  1.USERDEF1 < .1.NO
  1.USERDEF1 = 1
  1.USERDEF1.backColor = gray
  1.USERDEF1.10 = EFFECT
  1.USERDEF1.10.value = gray
  1.USERDEF1.noLink = 1
  
  ## Aktiver Zustand - ausgewähltes Land
  1.USERDEF2 < .1.USERDEF1
  1.USERDEF2.backColor = gray
}
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • typoscript_navigation.txt
  • Zuletzt geändert: 25/09/2019 00:24
  • von Thomas Berscheid