Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Benutzerhandbuch › Fortgeschrittene › Tutorials & How To's - Tipps & Tricks ›

Drupal 6 - Hauptnavigation mit DropDown Effekt ab Ebene Zwei

Eingetragen von Thoor (3678) am 24.06.2010 - 16:15 Uhr in
  • Drupal 6.x

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
-Katzen

Die 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

‹ Drupal 6 - Google Adsense ohne Zusatzmodul einbinden nach oben Drupal 6 - ImageMagick mit XAMPP Lite nutzen ›

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Как войти на сайт 1win и начать играть в онлайн казино и ставки на спорт, простые инструкции для новичков и опытных игроков.
  • Advertising Modul gesucht
  • Mysql Ver 8.0.41 zu MariaDB 10.11.11
  • Drupal 11 neu aufsetzen und Bereiche aus 10 importieren
  • Doppelte Einträge verhindern
  • [abgeschlosen] PHP Composer von Plesk + .bashrc nicht vorhanden
  • Drupal 7 Focal Point – Bild auf Desktop vollständig anzeigen, nur in Responsive zuschneiden
  • ECA validiere Felder mit unlimitierter Eingabe
  • Zugriff auf Webform beschränken/gewähren
  • Drupal 10.4.5 und Bootstrap 3.x.
  • Probleme mit Drupal 10 - HTTP Statuscode 403 (gelöst)
  • View mit mehreren Ansichten, übersteuert nicht
Weiter

Neue Kommentare

  • War Eure Suche erfolgreich?
    vor 7 Stunden 16 Minuten
  • V-Server ..
    vor 1 Woche 17 Stunden
  • ... generelle
    vor 1 Woche 17 Stunden
  • oder..
    vor 2 Wochen 1 Tag
  • Also ich will dich ja nicht
    vor 2 Wochen 2 Tagen
  • nochmal MariaDB vs Mysql
    vor 2 Wochen 2 Tagen
  • Vielen Dank - feedback zu den Videos
    vor 3 Wochen 6 Tagen
  • Falls dieses Thema noch mal
    vor 4 Wochen 2 Tagen
  • Prima, dann schreib bitte
    vor 4 Wochen 3 Tagen
  • Ah perfekt. Es hat an der
    vor 4 Wochen 3 Tagen

Statistik

Beiträge im Forum: 249989
Registrierte User: 20270

Neue User:

  • KeilyLelm
  • CharlestydaY
  • Darrenwem

» Alle User anzeigen

User nach Punkten sortiert:
wla9454
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3855
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 4 Gäste online.

DrupalCenter durchsuchen:

Benutzerhandbuch

  • FAQ - Häufig gestellte Fragen.
  • Links & Downloads
  • Über Drupalcenter.de und das deutschsprachige Benutzerhandbuch
  • Über Drupal
  • Einsteiger
  • Fortgeschrittene
    • Best Practice - Drupal Sites - Guidelines
    • Die beliebtesten Themes und Module
    • Tutorials & How To's - Tipps & Tricks
      • Kurztipps - Dinge die Stunden sparen können.
      • Notfallpläne - Tipps die Deine Drupalinstallation retten können
      • Anleitung zur Erstellung eines einfachen Kontaktformulars
      • Arbeiten mit dem Drupal Taxonomie-System [beinhaltet veraltete Inhalte]
      • Bearbeiten-Tab zu jeden Block hinzufügen
      • Block View mit Argument
      • Das Tagebuch einer Site
      • Drupal 6 - Automatisch unterschiedliche Bildgröße bei Teaser und Artikel
      • Drupal 6 - Eigene CSS Datei in ein Theme integrieren
      • Drupal 6 - Einfache Bildergalerie mit Image und Lightbox2
      • Drupal 6 - Einrichten eines Kalenders
      • Drupal 6 - Google Adsense ohne Zusatzmodul einbinden
      • Drupal 6 - Hauptnavigation mit DropDown Effekt ab Ebene Zwei
      • Drupal 6 - ImageMagick mit XAMPP Lite nutzen
      • Drupal 6 - Imagefield mit Imagecache und Colorbox
      • Drupal 6 - Installation FCK Editor
      • Drupal 6 - Installieren der WYSIWYG API inkl. Editoren
      • Drupal 7: mehrere Bilder in Node: 1 Bild in Anrisstext
      • Drupal Code Highlighting in Redmine Projektarchiv (CodeRay)
      • Drupal Theming: JavaScript einhängen in Abhängigkeit von Page-Variablen
      • Drush - Das Schweizermesser für Drupal auf Kommandozeile
      • Einfaches und erfolgreiches Patchen unter Windows
      • Eingabeformat & Inputfilter
      • Einrichten eines einfachen, statischen Menüsystems
      • Erstellen von Patches
      • Gallery mit CCK und Views erstellen (Drupal 5)
      • Header image Modul einrichten
      • Inhaltsübersicht für einen User mit einem View erstellen
      • Javascript und CSS-Dateien einbinden
      • Kontaktformular mit Jquery aufwerten
      • Leitfaden zur Erstellung von Suchmaschinenoptimierten Drupal-Sites
      • Mac OSX - Backupskript für Websites auf MAMP
      • Module updaten via Shell auf Windows
      • Module übersetzen
      • Perl-Script zum Erzeugen einer statischen Kopie einer Drupal-Website
      • Portierung eine Themes von openwebdesign.org
      • Prozentbalken bei Views (Balkendiagramm)
      • Themen eines Node-Formulars
      • Titel mit Stil
      • Umkreissuche mit Location- und Views-Modul
      • Usergalerie mit ImageCache, CCK, Views + Thickbox
      • Userprofil mit Usernodes erstellen
      • Validierung von Usereingaben bei Nodes
      • Variation vom Showroom auf drupalcenter.de
      • View mit Eingabeformular für neue Beiträge
      • WebSVN mit Drupal Code Highlighting
      • Zusätzliche Submit-Schaltfläche in Node-Formularen
      • i18n Language Switcher Block, die Links mit den Flaggen themen
      • ui.slider als Ersatz für den Ajax-Pager von Views
      • Zugriffsbeschränkungen für Nodes - eine Übersicht der Möglichkeiten
  • Entwicklung von Modulen und Themes
  • Drupalcenters Community
  • Drupal 7 Video-Trainings (Deutsch)
  • Drupal-Testumgebung erstellen
  • Drupal 6 Module
  • Drupal 7 Module
  • Drupal Screencasts auf deutsch
  • Archiv

Das Copyright des deutschsprachigen Drupal-Benutzerhandbuches unterliegt den jeweiligen Autoren. Übersetzungen des englischsprachigen Drupal-Benutzerhandbuches unterliegen der Creative Commons License, Attribution-ShareAlike 2.0.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association