5-Level-Struktur
Um was gehts? — Einbinden vertikale phpwcms-Navigation | Modifikation
Eigenschaften vertikale phpwcms-Navigation
Die vertikale Navigation von phpwcms ist eine 5-Level-Navigation, die so konzipiert ist, dass fünf Strukturebenen abgebildet werden. Die abgeänderte CSS-Datei passt sich dank %-Angaben für Breiten automatisch an die Spaltenbreite an, in der die Navigation verwendet wird.
Mit dem RT kann man die Verhaltensweise der Navigation steuern. Zum Beispiel ob alle Ebenen aufgeklappt sein sollen oder geschlossen. Im zweiten Fall expandiert das Menü automatisch, wenn auf eine Ebene mit Unterebene geklickt wird.
Anwendungsgebiet
Dieses mächte Menü bildet bis zu fünf Strukturen ab. Jedoch können weitere Strukturen in der CSS-Datei hinzugefügt werden. In 99,9% aller Fälle werden aber nicht mehr als 5 Ebenen benötigt. Nicht aktive Ebenen können aus- oder eingeblendet werden.
Diese Navigation lässt sich sehr gut mit einer horizontalen Navigation kombinieren.
Vorkehrungen
Dieses Menü benötigt die modifizierte CSS-Datei und die ergänzten "Knoten-Grafiken". Diese Grafiken sind der Vollständigkeit halber schon in allen Klassen integriert und können später problemlos ersetzt oder aus der CSS-Datei entfernt werden.
Die vertikale Navigation kann hier runtergeladen werden. Das Original (nav_vlist.css ) stammt von Knut (flipflop). Die Klassen-Namen und die Klassen selber wurden für dieses Tutorial abgeändert.
vlist.zip entpacken und den gesamten Ordner vlist kopieren nach:
templateinc_cssscreenimages
nav_vlist.css kopieren nach:
templateinc_cssscreen
Download
Import der Navigations-CSS
In der Datei my_layout.css muss man jetzt noch die neue Navigation importieren.
Dazu fügt man oberhalb des basemod.css-Imports den Import für die nav_vlist.css ein:
@import url(screen/nav_vlist.css);
Integration der vertikalen Navigation im Template
An der gewünschten Stelle im Template (z.B. linke oder rechte Spalte) fügt man einen Container für die Navigation ein:
<div class="vertnavi1">{NAV_LIST_UL:F,0,,act_path,active}</div >
Erklärung zum RT
NAV_LIST_UL
Umwandeln der Strukturebene(n) in eine UL-Liste
F
Veranlasst die Navigation, Unterebenen im Menü zu verstecken und bei Klick auf die Mutter-Ebene, die Unterebenen zu öffnen.
0
ID der abzubildenden Ebene (Mutter-Ebene). Alle Unterebenen dieser Mutter-Ebene werden im Menü abgebildet. 0 = ID der Wurzelebene von phpwcms
Anmerkung: NAV_LISTUL:F,0,3,act_path,active würde bewirken, dass Ebene 0 (home) die Mutter-Ebene ist und dass 3 Unterebenen abgebildet werden.
Referenzgrafik als Hilfe
 Referenzgrafik |
Um die hochkomplexe CSS-Datei nach den eigenen Wünschen zu gestalten, verändert man diese vorerst einmal nicht. Es ist ratsam, die Navigation im phpwcms-Template einzubinden und (falls noch nicht vorhanden) ein paar Strukturebenen anzulegen. Hat man alles richtig gemacht, erscheint eine kunterbunte Navigation im Browser. Jetzt kann man meine hier zur Verfügung gestellte Referenz-Grafik zur Hilfe nehmen, um den richtigen CSS-Tag in der nav_vlist.css zu lokalisieren und abzuändern. Dazu vergleicht man die im Browser gerenderten Farben mit der Referenzgrafik, in der jede Ebenengruppe mit einer anderen Farbton und jede Klasse in der entsprechenden Ebenengruppe mit einer anderen Farbabstufung gekennzeichnet ist. Tip: Ist wegen zu schwacher Differenzierung der Farbabstufungen nicht genau ersichtlich, welche Klasse zu verändern ist, ändert man einfach in der CSS-Datei die Farben einzelner Klassen so ab, dass eindeutig verglichen werden kann. |
Vertikale Navigation Pro
Wem das Anpassen der Navigation Mittels Referenzgrafik nicht gelingen will, kann die Pro-Version der vertikalen Navigation runterladen (vlist_pro.zip).
imagesvlistreferenzbilder
enthält 45 unterschiedliche transparente GIF-Bilder, für alle Klassen, aller Ebenen. Jedes GIF enthält einen Text, der beschreibt, welche Klasse in der nav_vlist.css zu modifizieren ist. Zusätzlich wird mit einem farbigen Balken gezeigt, zu welcher Farbgruppe die Klasse gehört (siehe Referenzgrafik oben).
Da die GIF-Bilder transparent sind, schimmern zusätzlich noch die Farben der Referenzgrafik durch.
nav_vlist.css
Alle 45 Ebenen-Klassen haben das dazugehörige GIF schon integriert. Die einzelnen Klassen sind für ein leichters Auffinden zusätzlich noch kommentiert.
arbeitsdatenLK.ai
Die Adobe Illustrator-Datei enthält alle 45 Referenz-GIFs. Natürlich mit 45 Slices für einen schnellen Export.
Mit dieser Navigation kann wirklich nichts mehr schief laufen. Später löscht man einfach die Grafik-Links aus der CSS oder ersetzt diese durch andere Bilder (z.B. Knotengrafiken).
Bildschirmfotos
