Dropdown Menü mit phpwcms-Bordmittel
Um was gehts? — Einbinden horizontale phpwcms-Navigation | Dropdown | Modifikation
Eigenschaften horizontale phpwcms-Navigation
Die horizontale Navigation von phpwcms ist eine Multil-Level-Navigation, die so konzipiert ist, dass Sub-Strukturebenen als Dropdown-/Flyout-Menü abgebildet werden. Die Standard-CSS-Datei für das Menü muss für den optimalen Einsatz modifiziert werden.
Anwendungsgebiet
Dieses mächte Menü bildet beliebig viele Sub-Ebenen ab. Daher lässt es sich, im Gegensatz zur horizontalen YAML-Navigation ohne Kombination mit einem vertikalen Menü einsetzen.
Demonstration
Vorkehrungen
Alle Bestandteile der Navigation sind im Gegensatz zu den bisher vorgestellten Navigationen schon in phpwcms integriert. Jedoch müssen noch ein paar wenige Anpassungen in der CSS-Datei der Navigation gemacht werden. Diese Änderungen werden in folgender Datei vorgenommen:
templateinc_cssspecificnav_list_ul_hcss.css
Selbstverständlich kann man die wie folgt veränderte CSS-Datei auch runterladen.
Integration der Navigation im Template
Für dieses Tutorial wird die Navigation möglichst einfach gehalten. An der gewünschten Stelle im Template (vorzugsweise im Navigations-DIV) fügt man den RT für die Navigation ein:
{NAV_LIST_UL:HCSS,0,,,active}
Es ist nicht nötig, eine CSS-Datei für das Menü in die my_layout.css zu importieren, da phpwcms automatisch die oben genannte CSS für das Rendern der Navi verwendet. Auch wird kein spezielles Frontend-Renderskript benötigt. Öffnet man nun die Seite im Browser, sollte eine horizontale Dropdown-Navigation vorhanden sein.
Wichtige Modifikationen
In der oben genannten Datei (nav_list_ul_hcss.css) werden folgende Modifikationen durchgeführt:
Problem: Die Dropdown-Menüs veschwinden hinter dem Seiten-Inhalt
Die Navigation muss auf eine höhere Index-Ebene gehoben werden. Dazu die Klasse .hcss_menu ul ergänzen mit z-index: 150;
Problem: Abstand zwischen den Menüpunkten der ersten Ebene
Die Abstände können eliminiert werden, indem man die Margins der Klasse .hcss_menu ul li auf Null gesetzt werden: margin: 0;
Problem: Die Menüpunkte der ersten Ebene nehmen zuviel Platz ein
Dies kann verhindert werden, indem man den bestehenden Festwert für "Breite" in der Klasse .hcss_menu ul li durch "automatisch" ersetzt: width: auto;
Problem: Der Abstand vor und nach dem Menütext der ersten Ebene ist zu gering
Alle Abstände in der ersten Ebene sind auf 5px gesetzt. Deshalb wird "Padding" für links/rechts um jeweils 10 pixel erhöht. In der Klasse
.hcss_menu ul li a, .hcss_menu ul li a:link, .hcss_menu ul li a:visited, .hcss_menu ul li a:active
wird "Padding" wie folgt abgeändert: padding: 5px 15px;
Problem: Die Unterebenen übernehmen den automatischen Breiten-Wert der übergeordneten Klasse
Dies sieht nicht nur unschön aus, sondern ist auch sehr unpraktisch. Deshalb gibt man für die Unterebenen eine Feste Breite an. Die Klasse .hcss_menu ul li ul li a ergänzen mit: width: 130px;
Problem: Die aktive Hauptebene wird nicht speziell hervorgehoben
Die CSS-Datei muss mit folgender Klasse ergänzt werden: .hcss_menu ul li.active a. Diese Klasse wie gewünscht anpassen.
Problem: Die aktive Hauptebene besitzt keinen Rollover-Effekt
Die CSS-Datei muss mit folgender Klasse ergänzt werden: .hcss_menu ul li.active a:hover. Diese Klasse wie gewünscht anpassen.
Problem: Die Unterebenen besitzen keinen Rollover-Effekt
Die CSS-Datei muss mit folgender Klasse ergänzt werden: .hcss_menu ul li:hover ul li a:hover. Diese Klasse wie gewünscht anpassen.
Problem: Die "Flyout"-Ebenen sind zu weit links positioniert
Die linke Abstand der Klasse .hcss_menu li ul li ul muss ergänzt werden: margin-left: 30px;
Download Tutorial-CSS
HCSS-Navigation "Pro"
In diesem Tutorial wurden nur die "Basis-Eigenschaften" der Navigation modifiziert. Natürlich lässt sich die Navigation beliebig ausbauen. Entsprechende Dokumentationen findet man im phpwcms-Forum.