Drupal 6 - Hauptnavigation mit DropDown Effekt ab Ebene Zwei
Nicht nur Drupal Anfänger stellt ein Menue, das eine "statische erste Ebene" hat und ab der zweiten Ebene mit den bekanten 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 erlernt hat.
Bei diesem Beispiel werden eingesetzt:
- Drupal 6.17
- Pathauto Modul http://drupal.org/project/pathauto
- Token Modul http://drupal.org/project/token
- Nice Menus Modul http://drupal.org/project/nice_menus
- Framework Theme http://drupal.org/project/framework
Pathauto und Token werden benötigt, um 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 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:
a:hover, a:active, li a.active, li.expanded ul li a {
color: #069;
outline: none;
text-decoration: underline;
}
li.active-trail a{
color: red;
}
/**
* 2.LAYOUT
*/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:
<div id="nav">
<?php if ($nav): ?>
<?php print $nav ?>
<?php endif; ?>
<?php if (!$nav): ?> <!-- if block in $nav, overrides default $primary and $secondary links -->
<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
<?php endif; ?>
<?php if ($nicemenue): ?>
<div id="nicemenue">
<?php print $nicemenue ?>
</div><!-- /#nicemenue -->
<?php endif; ?>
</div> <!-- /#nav --> Damit sind die Theme Vorbereitungen abgeschlossen. Anschliessend aktivieren wir das Theme und wählen es als Standard unter ../admin/build/themes und wenn alles richtig war, dann sollte unter /admin/build/block die neue Region bereits in der Blockverwaltung zu sehen sein.
Inhalte erstellen mit Zuhilfenahme von Pathauto
l
Jetzt geht es an das Inhalt erstellen. Bevor es losgeht, weisen wir den zu erstellenden Nodes mit dem Pathauto und Token Modulen schon bei der Erstellung ansprechende Pfade zu, die uns bei den nächsten Schritten die Arbeit erleichtern werden.
Unter ../admin/build/modules aktivieren wir das Pathauto Modul ... ( dadurch werden das dafür benötigte Core Modul Path und auch das vorhandene und benötigte Token Modul mit aktiviert. )
Nachdem die Module aktiviert sind, wird in Pathauto unter ../admin/build/path/pathauto bei den Beitragseinstellungen unter Pfadeinstellungen für Beiträge der Pfad [menupath-raw] aus dem Ersetzungsmustern für Seitenpfade festgelegt. Nach dem abspeichern erhalten die Seiten dann automatisch die entsprechenden Pfade.
Inhalte erstellen
Jetzt kann der Beispielinhalt mit dem Inhaltstypen Seite erstellt werden. Für das Beispiel werden einfach Seiten angelegt, die bereits beim Erstellen mit Hilfe der Menueoption den entsprechenden Pfaden der Hauptlinks zugeordnet werden
Beim Erstellen der Seiten in den Menue Anweisungen einfach Pflanzen den Hauptliks zuweisen, Blumen den Pflanzen, Rosen den Blumen ... usw. Wenn alle Nodes entsprechend angelegt wurden, dann sollten die Hauptlinks unter ../admin/build/menu-customize/primary-links wie folgt aussehen:
Pflanzen
- Baum
- Blumen
-- Rosen
-- Tulpen
- Gras
Tiere
-Affen
- Hunde
-- Dackel
-- Terrier
-KatzenDie Kür, der Einsatz von Nice Menue für DropDowns in der zweiten Ebene
Wie gehabt wird das bereits wartende Modul Nice Menus unter ../admin/build/modules aktiviert und kann dann unter ../admin/settings/nice_menus konfiguriert werden. Für dieses Tutorial einfach die Standard Einstellungen belassen und die Konfiguration dort wie vorhanden speichern.
Nun kommt es zum eigentlichen Einsatz der Nice Menus. In der Blockverwaltung unter ../admin/build/block sind nun in der "Deaktiviert Abteilung" die beiden neuen Blöcke "Nice menu 1" und "Nice menu 2". Durch die Auswahl der Region "Nice Menu" im Dropdown Feld werden die Blöcke der Region "Nice Menu" zugewiesen.
Nach dem Zuweisen "Blöcke speichern" am unteren Seitenende wählen! Danach sollten die beiden Blöcke wie folgt der Region zugewiesen sein:
Damit wir wie gewünscht unsere zweite Ebene als Dropdown erhalten, müssen wir die beiden Blöcke noch konfigurieren. Deshalb einfach bei den Blöcken für den Block "Nice Menu 1" "konfigurieren" auswählen. Nicht erschrecken, daß das Design aktuell etwas wirr ausieht und folgende Einstellungen vornehmen:
- Bocktitel:
- Menu Parent: Pflanzen
- Menu Style: down
- Sichtbarkeitseinstellungen: Nur auf den aufgelisteten Seiten anzeigen. und im Textfeld Seiten: pflanzen* eingeben.
Alle anderen Werte unverändert lassen und anschliessend speichern.
un den zweiten "Nice Menu 2" Block entsprechend konfigurieren und die folgenden Einstellungen vornehmen:
- Bocktitel:
- Menu Parent: Tiere
- Menu Style: down
- Sichtbarkeitseinstellungen: Nur auf den aufgelisteten Seiten anzeigen. und im Textfeld Seiten: tiere* eingeben.
Auch hier alle anderen Werte unverändert lassen und anschliessend speichern.
Tja und das war es dann schon. Wenn man nun auf die Startseite klickt, dann erscheinen nur die Hauptpunkte. Wenn man Tiere auswählt, dann erscheint das Drop down Menue in der zweiten Ebene und wennman nun beispielsweise über den Punkt Hunde fährt, kann man dort auf dem öffnenden Menuepunkt Terrier klicken.
Man erreicht die "Seite Terrier" und auch die Links oben behalten durch die anfangs getätigte Ergänzung der style.css schön ihre rote Kennzeichnung.
Viel Spaß und Erfolg beim Nachbauen!
Bebildert gibt es das Tutorial auch noch einmal bei Thoor.de unter Drupal Hauptnavigation mit Drop Down Effekt ab Ebene Zwei
Neue Kommentare
vor 2 Tagen 13 Stunden
vor 2 Tagen 16 Stunden
vor 2 Tagen 16 Stunden
vor 2 Tagen 16 Stunden
vor 3 Tagen 13 Stunden
vor 3 Tagen 15 Stunden
vor 4 Tagen 12 Stunden
vor 5 Tagen 6 Stunden
vor 5 Tagen 6 Stunden
vor 5 Tagen 10 Stunden