• DE

vimeo.com/135455870

-> hier soll die Navigation oben im Kofbereich durch JavaScript erzeugt werden
-> 1. zuerst drei weitere Seiten im Seitenbaum erstellen -> damit später die Navigation überprüft werden

kann
-> am besten dazu das Modul Funktionen nehmen -> drei Unterseiten von root
-> das HTML der Navigation von initializr.com -> liegt in der Header.html -> jetzt im Verzeichnis

Private/Partials

<div class="header-container">
    <header class="wrapper clearfix">
        <h1 class="title">h1.title</h1>
        <nav>
            <ul>
                <li><a href="#">nav ul li a</a></li>
                <li><a href="#">nav ul li a</a></li>
                <li><a href="#">nav ul li a</a></li>
            </ul>
        </nav>
    </header>
</div>

-> Das ist eine sehr einfache Navigation
-> sie soll durch ein TypoScript nachgebaut -> das soll den Namen tragen lib.mainnav.ts
-> 1. eine Datei mit diesem Namen im Verzeichnis TypoScript/Library anlegen
-> 2. Das TypoScript sieht so aus:

lib.mainnav = HMENU
lib.mainnav {
    wrap = <ul>|</ul>

-> Das vom TS generierte HTML wird mit einer unsortierten Liste gewrappt



    1 = TMENU
    1 {
        NO = 1
        NO.allWrap = <li>|</li>
        NO.stdWrap.htmlSpecialChars = 1

-> Ebene 1 ist ein TMENU -> es soll von einem li umschlossen werden
-> mit dem htmlspecialchars wrap werden Sonderzeichen mit korrektem HTML kodiert

        CUR = 1
        CUR.allWrap = <li class="cur">|</li>
        CUR.stdWrap.htmlSpecialChars = 1
    }
}

-> damit ist lib.mainnav.ts fertig
-> die aktuelle Seite (CUR = current) sollte ursprünglich nicht anders aussehen -> aber das kann man schon

einmal vorbereiten
-> die Klasse cur müßte dann noch ins CSS

-> 3 im Partial dafür sorgen, dass lib.mainnav ausgegeben wird
-> das wird in der Header.html getan -> dort wird ja der ganze UL-Bereich durch die lib.mainnav.ts ersetzt
-> im Folgenden ist die neue Header.html

<div class="header-container">
    <header class="wrapper clearfix">
        <h1 class="title"><f:cObject typoscriptObjectPath="lib.homelink"/></h1>
        <nav>
            <f:cObject typoscriptObjectPath="lib.mainnav"/>
        </nav>
    </header>
</div>

-> wie zu sehen ist -> das UL der alten Header.html wurde ja vom TypoScript ersetzt
-> dafür wurde der cObject-ViewHelper eingesetzt -> danach muß der Name des TypoScript-Opjekts angegeben

werden -> das geschieht in diesem VieHelper mit dem Parameter typoscriptObjectPath
-> Header.html im Partial speichern -> Seite root im FE ausgeben
-> Seite root wir richtig ausgegeben -> Eine der Unterseiten zeigt aber einen orangenen Balken unter der Navigation