Inhalt
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