"Shiny Buttons" und "Sliding Door"

1-Level-Struktur

Von: Santscho

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;}