1-Level-Struktur
Um was gehts? — Seitenebenen für die Navigation | Dynamische Navigation integrieren
Anlegen der "Mutterbene" der Header-Navigation
Als erstes wird unter ADMINSeitenstruktur eine neue Ebene angelegt, die man zum Beispiel Top-Menü benennt. Diese Ebene wird später alle Bereiche wie z.B. "Kontakt", "Impressum", "Haftungsausschluss", "Sitemap" und "Links" enthalten.
Top-Menü braucht eine spezielle Darstellungs-Einstellung, welche im Folgenden beschrieben wird.
 |
Wichtig ist, dass für diese Ebene der korrekte Frontend Menüstatus gesetzt wird. Dazu wählt man Frontend Menüstatus: versteckt Alle anderen Einstellungen werden belassen (siehe Bildschirm-Foto). |
Warum muss man diese Ebene verstecken? — Später wird die horizontale Navigation "Shiny Buttons" integriert. Diese Navigation stellt alle Ebenen dar, die sich auf "Ebenen-Level 1" befinden (index/home = Ebenen-Level 0). In der horizontalen Navigation würde also noch zusätzlich der Menüpunkt "Top Menü" erscheinen, was wir durch verstecken des Frontend Menüstatus unterbinden.
Anlegen der eigentlichen Navigationsebenen
Nun werden die eigentlichen Ebenen für "Kontakt", "Impressum", "Haftungsausschluss", "Sitemap" und "Links" erstellt. Diese Ebenen befinden sich alle in der neu erstellten Ebene "Top Menü". Für die Menü-Ebenen muss kein spezieller Frontend Status gesetzt werden.
Integration der Header-Navigation
 |
Bevor die Navigation im Template eingebaut werden kann, muss zuerst die ID-Nummer der Ebene "Top Menü" ermittelt werden. Dazu fährt man mit dem Maus-Cursor über das Seitensymbol links vom Namen "Top Menü" (siehe Bildschirm-Foto) In diesem Beispiel besitzt "Top Menü" die ID-Nummer 30 |
In der Vorlage im Bereich Haupt: sucht man jetzt die Stelle mit diesem Kommentar:
<!-- end: skip link navigation -->
Gefolgt wird dieser Kommentar von der statischen YAML-Navigation:
<a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a>
Diese Zeile Zeile ersetzt man durch:
{
NAV_ROW:X:Y} wobei X und Y durch folgende Zahlen ersetzt werden muss:
X = Vorher ermittelte ID von "Top Menü"
Y = 0 oder 1
0 = "Top Menü" wird nicht in der Navigation angezeigt
1 = "Top Menü" wird in der Navigation angezeigt
Es macht keinen Sinn, "Top Menü" in der Navigation anzuzeigen, da diese Ebene lediglich als Container für die eigentlichen Ebenen dient. Der RT für dieses Menü sollte deshalb etwa so aussehen:
{NAV_ROW:30:0}
Aussehen der Header-Navigation beeinflussen
Schrifteinstellungen und Navigations-Position:
CSS-Datei: basemod.css
CSS-Klasse: #topnav
Link-Farbe und Rollover-Effekt:
CSS-Datei: content.css
CSS-Klassen:
Link-Farbe = #topnav a
Link-Rollover = #topnav a:focus, #topnav a:hover, #topnav a:active
Tip: Möchte man die Textatribute (z.B. Farbe) des Trennungsstriches (|) in der content.css statt in der basemod.css verändern, legt man in der content.css einfach eine Klasse mit der Bezeichnung #topnav an. Dieser Klasse teilt man Textatribute wie Farbe, Auszeichnung und Grösse zu. Denn: Die content.css wird nach basemod.cssins Template geladen und übersteuert alle Klassen der basemod.css
Integration des Links zu "Home"
Die horizontale Header-Navigation wäre nun fertig, doch bei näherem Betrachten stellt man fest, dass ein Link zur "Homepage" fehlt. Man ergänzt nun im Template die horizontale Header-Navigation durch einen dynamischen Link zur Website Homepage.
"Home-Link" an erster Stelle der Navigation:
<a href="{SITE}">Home</a> | {NAV_ROW:30:0}
"Home-Link" an letzter Stelle der Navigation:
{NAV_ROW:30:0} | <a href="{SITE}">Home</a>
So lassen sich natürlich noch weitere Links in die Navigation einbauen. Einfach {SITE} durch einen Link ersetzen.