Schritt für Schritt

Schritt 4 : Das Hauptmenü mit TypoScript umsetzen

In diesem Schritt wird ein simples Hauptmenü mit typoscript erstellt.

TypoScript erstellen

Leider sieht man noch oft, das Navigationen mit <div> Elementen erstellt werden. Diese Zeiten sind jedoch vorbei! Nicht nur aus Accessibility Gründen erstellt man eine Navigation mit <ul> und <li> Elementen. In der ersten Version wird hier ein minimales Menü mit einem Level und nur einem Menü Status NO (normal) erstellt. Das einzig spezielle ist, dass das erste und letzte <li> Element eine CSS Class erhalten.

Dieser Code wird ebenfalls in eine Datei ausgelagert und nicht in der Datenbank gespeichert.


lib.navigation {
  # Hauptmenü
  tmenu1 = COA
  tmenu1 {

    10 = HMENU
    10 {
      # einstiegs level
      entryLevel = 0

      1 = TMENU
      1 {
        wrap = <ul id="menu1" class="menu">|</ul>
        expAll = 0
        # kein onfocus="blurLink(this);" bei den links, sonst Tabulator Probleme im IE
        noBlur = 1

        NO {
          wrapItemAndSub = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li>
        }
      }
    }

  }
}
Eine Simple HMENU Navigation

Hauptmenü einbinden

Damit der TypoScript Code vorhanden ist, muss in der setup.txt die Datei tmenu.ts eingebunden werden.


<INCLUDE_TYPOSCRIPT: source="FILE:EXT:fb_stepbystep/step4/static/tmenu.ts">
Mit INCLUDE_TYPOSCRIPT Datei einbinden

Für das einbinden in das bestehende Template wird dem Marker (MENU1) neu dieser TypoScript Code zugewiesen.


# alte version
MENU1 = HTML
MENU1.value (
  <ul id="menu1" class="menu">
    <li><a href="/#step3">Seite 1</a></li>
    <li><a href="/#step3">Seite 2</a></li>
    <li><a href="/#step3">Seite 3</a></li>
    <li><a href="/#step3">Seite 4</a></li>
  </ul>
)
# neues menue per typoscript
MENU1 = < lib.navigation.tmenu1
lib per typoscript einbinden

Dies war Schritt 4!

Vielen Dank für's rein schauen.

thefox

 

 

 

Live Demo

Diesen Code Schnipsel kann man im Beispiel anschauen.