Drei Ebenen ( Drop down ) Menue unter Verwendung von Nice Menues und der "active-trail" Klasse! Nicht nur Drupal ( Ein Open Source Content Management System ( CMS ) und Community Framework ) Anfänger stellt ein Menue, das eine "statische erste Ebene" hat und ab der zweiten Ebene mit den bekannten Superfish Effekten als Dropdown arbeitet, oft vor Schwierigkeiten in der Umsetzung.
Wie man eine derartige Navigation, die von vielen großen Portalen eingesetzt wird mit Drupal Bordmitteln und einigen Zusatzmodulen realisieren kann, möchte ich in diesem Tutorial aufzeigen.
Um das Tutorial nachbauen zu können, sind keine tiefergehenden Kenntnisse erforderlich. Es fällt aber sicherlich leichter, wenn man den grundsätzlichen Umgang und Basic Kenntnisse im Theming für Drupal bereits kann.
Bei diesem Beispiel werden eingesetzt:
- Drupal 6.x
- Pathauto Modul
- Token Modul
- Nice Menus Modul
- Framework Theme ( Ein Theme ist bei Drupal die Bezeichnung für eine Designvorlage. Bei Wordpress spricht man beispielsweise von Templates. )
Pathauto und Token werden benötigt, um zum lesbare Pfade zu realisieren, die dann in der Blockverwaltung hinsichtlich der Sichtbarkeit der Blöcke zum Einsatz kommen. Das Nice Menu Modul sorgt für die Dropdown Effekte, die wir ab der zweiten Ebene erhalten wollen und das Framework Theme ist ein einfaches Theme, das leicht zu verstehen ist. Meiner Meinung nach ein ideales Einsteigertheme.
Module und Themes in die Drupal Seite einfügen
Los gehts mit dem Download und dem Extrahieren der Module Pathauto, Token und Nice Menus nach ../sites/default/modules und Download und Extraktion des Framework Theme nach ../sites/default/themes. Wenn Die Installation von Drupal noch "jungfräulich" sein sollte, dann müssen die beiden Ordner modules und themes unter ../sites/default erst angelegt werden, wie auch in der dort befindlichen readme.txt nachzulesen ist!
Anpassen des Themes
Nach dem Download des Themes und dem Extrahieren sind drei Anpassungen des Framework Theme für unser Vorhaben von Nöten. Eine kleine Änderung in der style.css ( Cascading Style Sheets CSS ... eine Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML eingesetzt und legt fest, wie Inhalte oder Bereiche dargestellt werden sollen. ) um die aktiven Links besser unterscheiden zu können und eine Anpassung der page.tpl.php um unsere "Nice Menues" anstelle der "Secondary Links" im Theme auszugeben.
In der style.css ergänzen wir die Zeile 115 so daß dort dann zwischen den Zeilen 115 und 127 folgendes steht:

Die Datei framework.info ergänzen wir um eine Region indem wir die Zeile regions[nicemenue] = Nice Menue bei den Regionen ergänzen.

Zuletzt muss die Region noch in der page.tpl.php eingefügt werden. Die Anweisung für die Secondary Links wird aus dem "nav" Bereich entfernt und anstelle dessen die eben angelegte Region eingefügt. Die Zeilen 39 bis 55 sollten nun wie folgt aussehen:






0 Kommentare zu "Navigation mit Drop Down Effekt ab Ebene zwei!"
Kommentar schreiben