phpwcms Navigation horizontal

Dropdown Menü mit phpwcms-Bordmittel

Von: Santscho

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.