1-Level-Struktur
Um was gehts? — YAML-Hauptnavigation einbinden | Integration | Modifikation
Eigenschaften "Shiny Buttons" oder "Sliding Door"
"Shiny Button" oder "Sliding Door" ist eine 1-Level-Navigation, die so konzipiert ist, dass nur eine Strukturebene abgebildet wird. Unterebenen werden ignoriert.
Die einzelne Menü-Button selber besitzt eine flexible Breite und passt sich so automatisch dem Inhalt an.
In diesem Tutorial wird nur auf "Shiny Button" eingegangen, da die Modifikationen von "Sliding Door" im Zusammenhang mit YAML 3.1 noch nicht ausgetestet wurden.
Anwendungsgebiet
Diese einfache Menüvariante eignet sich hervorragend für simple Internet-Seiten mit einer Ebene. Besitzt die Internet-Seite mehr Ebenentiefe, ist die Kombination mit einer vertikalen Navigation in der rechten oder linken Spalte zu empfehlen.
Vorkehrungen "Shiny Buttons"
Dieses Menü benötigt ein YAML-Template mit der Einstellung "Horizontale Navigation Shiny Buttons". Zusätzlich muss noch eine zusätzliche CSS-Klasse in die CSS-Datei eingebaut werden, damit der aktive Button hervorgehoben wird. phpwcms generiert Klassen, die in der YAML-CSS nicht vorhanden sind.
Template-Code
Im Template findet man den Kommentar für die Navigation:
<!-- skiplink anchor: navigation -->
<div class="hlist">>
Unterhalb dieses Kommentars wird dieser RT eingefügt:
{NAV_LIST_UL:F,0,1,subactiv,current,}
Erklärung:
0 =
ID der abzubildenden Ebene (Mutter-Ebene). Alle Unterebenen dieser Mutter-Ebene werden im Menü abgebildet. 0 = ID der Wurzelebene von phpwcms
1 =
Anzahl der Ebenen die abgebildet werden. Es ist wichtig, dass für dieses Menü immer 1 angegeben wird.
Modifizieren der Navigation
Die Einstellungen der Navigationen "Shiny Buttons" und "Sliding Door" befinden sich im YAML-Core:
templateyaml navigationnav_shinybuttons.css
Es ist nicht empfohlen, Änderungen in den Core-Dateien vorzunehmen, da bei einem Update von YAML eigene Modifikationen evtl. verloren gehen können.
Folgendes Vorgehen ist empfohlen...
Aus templateyamlnavigationimages das Verzeichnis
shiny_buttons kopieren nach: templateinc_cssscreenimages
Aus templateyamlnavigation die Datei
nav_shinybuttons.css kopieren nach: templateinc_cssscreen
Nun muss nur noch der CSS-Link zur Navigations-CSS korrigiert werden. Dazu öffnet man my_layout.css und ändert
../yaml/navigation/nav_shinybuttons.css
nach:
screen/nav_shinybuttons.css
Der DIV-Container der Navigation selbst lässt sich in basemod.css verändern (zum Beispiel die horizontale Ausrichtung der Navigation). Die zuständigen Klasse lautet:
#nav ul
In der Datei nav_shinybuttons.css muss unbedingt noch diese Klasse hinzugefügt werden, um die Schrift des aktiven Buttons zu verändern:
.hlist ul li.subactiv a
{color: #FFF;}