Tutorial: jQuery Dropdown Menü für WordPress
Inhalte von WordPress-Seiten werden immer komplexer und damit natürlich ihre Navigation. Eine schicke Sache für ein komplexes Navigationsmenü ist ein Dropdown-Menü. Eine Lösung, die ich gern verwende, ist das Superfish jQuery-Plugin von Joel Birch. Die Implementierung in WordPress ist nicht schwer.
Vor drei Wochen habe ich bereits ein Tutorial geschrieben, welches das Einfügen eines Superfish-Dropdown in eine normale Website erklärt. Wer also noch keine Erfahrung mit dem jQuery-Plugin hat, sollte dort mal einen Blick drauf werfen.
Grundlage für dieses Tutorial
Tutorial: jQuery Dropdown Menü mit Superfish
Einbindung des Superfish-Skriptes
Wie in dem vorherigen Tutorial, müssen wir zunächst das Skript des jQuery-Plugins im Head-Bereich der Website einbinden und aufrufen.
In einem WordPress-Theme bearbeiten wir dafür die Datei header.php. Wir setzen weiterhin voraus, dass sowohl die jQuery-Library (jquery-1.2.6.min.js), das Superfish-Skript (superfish.js) und das Superfish-Stylesheet (superfish.css) im Theme-Ordner im Unterordner /sf/ liegen.
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_url'); ?>/sf/superfish.css" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/sf/superfish.js"></script>
Bemerkung:
Hiermit binden wir also sowohl das Stylesheet des Dropdown also auch das Javascript mit den richtigen Pfaden (/wp-content/themes/dein-theme/sf/) in den Head-Bereich ein.
Somit ist das Plugin für uns nun aufruf- und einsetzbar.
<script type='text/javascript'>
$(document).ready(function() {
$('ul.sf-menu').superfish();
});
</script>
Bemerkung:
Mit diesem Aufrunf wird das Superfish-Plugin nun auf alle ungeordneten Listen mit der CSS-Klasse .sf-menu angewendet. Weitere Anpassungen des Plugins entnehmt bitte dem vorherigen Tutorial.
Superfish-Dropdown und wp_list_categories()
Für die Anzeige eines Dropdown-Menüs für Kategorien brauchen wir eine ungeordnete Liste (ul) aller Kategorien. Unterkategorien werden in verschachtelten Listen dargestellt (ul > li > ul etc.). WordPress stellt uns dafür die Funktion wp_list_categories() bereit.
Ein Aufruf könnte also wie folgt aussehen:
<ul id='cat-menu' class='sf-menu'>
<?php wp_list_categories('title_li='); ?>
</ul>
Dieses Konstrukt würde nun schon ein ansehnliches Dropdown-Menü erzeugen. Um das Ganze zu verfeinern, kann man dem Menü noch einen Link zur Startseite hinzufügen.
<ul id='cat-menu' class='sf-menu'>
<li class='cat_item<?php if(is_home()) echo ' current-cat'; ?>'><a href='<?php bloginfo('url'); ?>'>Startseite</a></li>
<?php wp_list_categories('title_li='); ?>
</ul>
Bemerkung:
Wir haben auch hier alle Einflussmöglichkeiten, die uns die Funktion wp_list_categories() bietet.
Superfish-Dropdown und wp_list_pages()
Ein Menü für WordPress-Seiten mit dem Dropdown darzustellen, ist nun relativ einfach. Mit der Funktion wp_list_pages() erhalten wir die erforderliche Listenstruktur für alle Seiten und Unterseiten.
<ul id='page-menu' class='sf-menu'>
<?php wp_list_pages('title_li='); ?>
</ul>
Bemerkung:
Auch hier können wir natürlich den Startseiten-Menüpunkt einfügen (s.o.) und das Menü mit den Parametern der Funktion wp_list_pages() an unsere Anforderungen anpassen.
Superfish-Dropdown und wp_page_menu()
Mit der Version 2.7 haben uns die WordPress-Entwickler eine neue Funktion zum Aufruf eines Seitenmenüs gegeben – wp_page_menu().
Wie oben erwähnt, ist es für die Darstellung eines Superfish-Menüs nötig, der ungeordneten Liste (ul) des Seitenemenüs die CSS-Klasse .sf-menu zu geben. Die neue Funktion wp_page_menu() bietet uns zwar einige neue Möglichkeiten (z. B. Startseiten-Link einfügen), “verwährt” uns jedoch den direkten Zugriff auf den ul-Tag der Liste.
Der Aufruf sieht bspw. wie folgt aus:
<?php wp_page_menu('show_home=1&include=1,2,4,7&menu_class=page-navi&title_li='); ?>
Bemerkung:
Wir können u.a. eine CSS-Klasse vergeben (menu_class). Jedoch wird diese Klasse auf den um die Liste (ul) erzeugten div-Container angewendet.
Der Output der Funktion würde etwa wie folgt aussehen:
<div class='page-navi'> <ul> <li class='current_page_item'><a href='#'>Home</a></li> <li class='page_item page-item-1'><a href='#' title='Seite1'>Seite1</a></li> <li class='page_item page-item-2'><a href='#' title='Seite2'>Seite2</a></li> <li class='page_item page-item-3'><a href='#' title='Seite4'>Seite4</a></li> <li class='page_item page-item-3'><a href='#' title='Seite7'>Seite7</a></li> </ul> </div>
Bemerkung:
Nun haben wir zwar eine Liste innerhalb eines div-Containers und für CSS-Formatierungen ist diese Verschachtelung natürlich kein Problem. Für unser Dropdown brauchen wir aber auf jeden Fall die Klasse .sf-menu auf dem ul-Tag.
Der Liste in wp_page_menu() eine Klasse zuteilen
Mit einer kleinen Erweiterung in der functions.php unseres WordPress-Themes können wir die Funktion wp_page_menu() durch einen WordPress-Filter schicken. Mit der PHP-Funktion preg_replace suchen wir uns den ersten(!) ul-Tag im Output unseres Seitenmenüs und erweitern diesen um eine ID und eine Klasse. Ian Steward von ThemeShaper hat diese Lösung vorgestellt.
// Add ID and CLASS attributes to the first <ul> occurence in wp_page_menu
function add_menuclass($ulclass) {
return preg_replace('/<ul>/', '<ul id='nav' class='something-classy'>', $ulclass, 1);
}
add_filter('wp_page_menu','add_menuclass');
Bemerkung:
Mit diesem kleinen Code-Schnipsel in der functions.php ist es nun ohne Probleme möglich, auch in der neuen wp_page_menu-Funktion unsere Klasse .sf-menu an die ungeordnete Liste (ul) weiterzugeben.
Fazit
Wir sehen also, es ist nicht weiter schwierig, ein Superfish-Dropdown-Menü in einer WordPress-Navigation zu nutzen, da wir lediglich eine Klasse vergeben müssen. Was etwas mehr Arbeit bereitet, ist die Anpassung des Stylesheets an das Layout der Seite. Aber auch das ist mit Geduld und Spucke ohne Weiteres zu schaffen 
Relevante Links
Simon [webdemar]
Moin, ich bin Simon und betreibe webdemar.com als meine ernstgemeinte Spielwiese für WordPress, Webdesign und so.
34 Kommentare
Kommentar schreiben
20. Februar 2009
vielen dank für dieses tut!!!
bemerkenswert, dass es nur mal wieder ein kleiner fehler war und zwar beim einbinden des skripts.
aber jetzt funktionierts!
have a nice day
20. Februar 2009
@Stephen:
Ja, der Deibel im Detail
3. März 2009
cool. funktioniert. ist schnell gelaufen.
nur eine anmerkung: ich hab das superfish als zip runtrgeladen, das entpackte verzeichnis in “sf” unbenannt und in das themen-verzeichnis raufgelade: theme/sf
danach müssen 2 pfade angepasst werden
1. /sf/superfish.js in /sf/js/superfish.js
2. /sf/superfish.css in /sf/css/superfish.css
dann funtioniert alles super.
vielen dank!
20. März 2009
Hi,
I have this great theme DeLight of Yours on a local server trying to learn to use wordpress and change a few things. I would like to change the picture in the heeader. Is it possible, and is it only to replace the image in the original?
27. März 2009
@Monica:
Be sure to check bg-header.gif as well as bg-body.gif.
27. März 2009
Hi,
sehr cooles und gut gemachtes Tutorial.
Gibt es eigentlich eine Möglichkeit, die Dropdowns oberhalb der horizontalen Menuleiste zu öffnen ?
Ich habe das Superfish Menu unterhalb des Headers (Bild) und möchte das sich die Submenus dort öffnen und nicht über dem eigentlichen Content.
Danke & Gruss
Ronald
27. März 2009
@Ronald:
Das ist sicherlich möglich. Allerdings sind dazu Abänderungen im Javascript und im CSS des Plugins nötig. Mit CSS könnte ich helfen, jedoch ein Javascript-Experte bin ich keineswegs und kann Dir somit leider nicht sagen, wie man erreicht, dass die Menüs nach oben aufgehen. Du könntest diese Frage mal in der Mailing-List für das Superfish-Plugin stellen. Joel kann Dir sicher weiterhelfen.
Danke
27. März 2009
@Simon
Danke für die prompte Antwort, ich hatte mir schon gedacht, dass das nicht so einfach wird. Die Änderungen in der CSS würde ich sicherlich auch hinbekommen, aber an Javascript hapert es bei mir leider auch
Da bleibt mir wohl nur noch der Weg über die MailingList…
5. April 2009
Ich muss komischerweise erst auf die parent seite klicken und dann erscheint das scroll down mit menü mit dem effekt.. oder ist das auch so gedacht`?:D
ich wollte es aber eigentlich so haben, dass wenn man rüber geht, schon der effekt kommt, wie bei deiner homepage oben auch…
kannst du mir helfen`?
6. April 2009
@Oli:
Hehe nee, das ist so nicht gedacht. Du müsstest mir einen Link geben, damit ich mir das live ansehen kann. So auf blauen Dunst ist das schwer
6. April 2009
habs schon rausgefunden, .. ist nicht ganz kompatibel mit dem plugin “ilc folding”..
anonsten echt nices tut!
14. Mai 2009
found what i was looking for! great information besides your amazin wordpress themes. Thanks.
ps: hope you write more in english
14. Mai 2009
@guney:
Thanks man! webdemar.com will always be a German resource. But soon I’starting with ThemeShift.com where I’ll offer both premium and free WordPress themes. The blog of this site with tutorials and resources will be in English then
19. Mai 2009
Hey mate.. I am really grateful for explaining the way we can use the Jquery Dropdown menu in wordpress. I really need that, but sadly I dont know any german !! Did you by any chance translate into English, and if not, is it available in English somewhere else. and IF NOT , is there a similar plugin that is made especially for WP ?
Thanx !
19. Mai 2009
@Mouad:
Thanks Mouad! Unfortunately I could’t find any tutorial like this one in English. But maybe you want to try this Multi-level Navigation Menu WordPress plugin. I did not test it, but it seems to be a well-supported solution for a dropdown menu. Good luck
19. Mai 2009
Thank you very much. I will have a look at it.
25. Juni 2009
…wenn das jetzt noch ohne javascript auskäme, wärs sensationell
24. Juli 2009
großes kino. sehr schön, danke!
aber wie hast du das ganze page-item-1..page-item-2 gedönse aus deinen menu listen wegbekommen? bis auf das current braucht man ja nicht für jedes li eine eigene klasse…
3. August 2009
@mic:
Ich habe die ganzen Klassen nicht im Menü, da meines nicht dynamsich erstellt wird. Es ist hardcoded und wird nicht mit wp_list_categories erstellt.
30. Juli 2009
hallo Simon, danke für dein Tutorial. Ich bin gerade daran, so etwas auf meiner in der Entstehung begriffenen WP Seite einzubauen. Aber es klappt da einfach nicht. Ich habe die drei Codestücke alle drei im Head Bereich des header.php reingepflanzt, und die Superfisch Sachen, die dann auch im WP Editor erscheinen unter “Styles” auch raufgeladen auf den Server. Da sie erscheinen, denke ich auch, dass der Pfad stimmt.
Das Dropdown erscheint bei mir leider nur als reines HTML (in den typischen Farben blau und Violett) wie eine Liste aller Kategorien, wie man das von Sitemap-ansichten her kennt) am oberen Pagerand. Ich weiss nicht weshalb. Ich bin vielleicht ein blutiger Anfänger, aber wenn du gerade sehen würdest, was ich da falsch mache, wäre ich sehr glücklich über den Hint. Danke auf jeden Fall fürs Lesen, für die Codes und für das Teilen deiner Kenntnisse.
Gruss,
Vera
3. August 2009
@vera:
sorry für die späte Antwort. Wie ich sehe, hast Du es jetzt mit dem Plugin hinbekommen
30. Juli 2009
hallo ich habe folgende frage in meiner header.php im body-tag benutze ich folgenden code
<li class=”page_item current_page_item”><a href=”">Home
klappt auch alles ganz gut sprich wenn ich auf einen menü punkt klicke bleibt dessen zustand erhalten so wie bei dir oben…allerdings wenn ich dann im browser auf die zurück funktion gehe bleibt der angeklickte menü punkt aktiv und der den ich zuvor angeklickt hatte…
was mache ich falsch wie hast du das gelöst?
3. August 2009
@Stefan:
Auch an Dich sorry für die lange Wartezeit. Habe versucht, Deine Seite online zu besuchen. Jedoch hast Du im Moment den Maintenace Mode eingeschaltet. Um genaueres sagen zu können, müsste ich einen Blick in den Quellcode werfen.
3. August 2009
hallo simon,
also bis auf das genannte problem habe ich das mit dem menü hinbekommen…nur wie gesagt wenn ich mehrer oberpunkte anklicke dann bleiben immer zwei stehen…
danke für die rückmeldung
Eine Frage habe ich aber noch ist es auch möglich im header zwei Navigation parallel zubetreiben…also quasi eine mit wp_list_page und eine von hand angelegte mit Links die auf eine andere Seite verweisen? So als hättest du quasi deine Hauptnavigation zweimal…warum weil ich das bbpress forum benutze und da ja jetzt irgendwie hinlinken muss da hätte ich gerne die gleiche navigationstechnik (bei dir wäre das die navigation “Was solls” nur halt mit superfisch…
danke für deine hilfe
stefan
19. August 2009
Also ich bin ja echt am verzweifeln, er zeigt bei mir das ganze Menü leider nur als Text und nur untereinander an, ich kann mir aber wirklich nicht mehr erklären wieso…
gibt es irgendwas was man noch beachten muss bei WP 2.8?
mfg
Made
20. August 2009
Hallo Simon,
vielen Dank für Dein Tutorial, aber irgendwie bin ich zu doof das Untermenü zum “Laufen” zu bekommen. Auf der Webseite gibt es unter “Kontakt” eine Unterseite “Impressum”. Die wird aber nicht angezeigt. Die Fehler-Konsole sagt immer “menu is undefined” und verweist dann auf die superfish.js. Was mach ich falsch? Vielen Dank für Tipps und Hinweise.
Viele Grüße
Michael
27. August 2009
Hallo,
ich hänge gerade über Superfish-Dropdown und wp_list_categories() – und zwar öffnet sich bei mir keine Unterkategorie. Es sollte aber alles eingebunden sein wie oben beschrieben…
An was kann es noch liegen?
Gruß & Danke
markus
27. August 2009
Hat sich erledigt… es kann gar keine Unterkategorie angezeigt werden… wenn kein Inhalt darin ist…. *batsch*
Gruß Markus
16. Dezember 2009
Hi Simon,
prima Tutorial – vielen Dank.
An sich läuft alles prima. Habe es dynmisch mit wp_list_pages eingebunden. Meine Startseite ist eine Seite und die eigentliche Blogseite heisst Aktuell. Nun möchte ich, dass die Startseite nicht in der Navigation auftauscht. Hast Du eine Idee?
Link: *****
Danke und Gruß
Nils
16. Dezember 2009
Habs rausgefunden … mit exclude
Siehe http://www.texto.de/wp_list_pages-spielereien-41/
3. Januar 2010
Super tutorial, irgendwie habe ich mich immer um ein suckerfish-menu gedrückt, benötige es aber nun unbedingt für ein Projekt. Dein Tutorial hat mir dabei geholfen es ohne Probleme in Wordpress zu integrieren. Danke, Smashill
6. Januar 2010
ich komm net weiter
habs hochgeladen code in header eingebaut und wie kann ich nun das ding velrinken ich will eigentlich folgendes hab oben 1 button der nennt sich Categorie erstellt im Wp admin als Site so nun will ich das ich wenn man mit der maus drübergeht sich die categorien öffnen .
Was muss ich denn nun machen und was für einen code muss ich nutzen??
5. Februar 2010
Simon,
Is it possible to see the final code with the function ” wp_page_menu()” included?
I do not manage to make it work !
The code for “functions.php” makes an “syntax error, unexpected T_STRING”
A solution ?
9. März 2010
hallo.
ich habe gerade die navigation in eine wordpress seite eingebaut.
funktioniert soweit auch gut. bis auf die tatsache dass bei klick auf einen pu nkt in der subnavi diese beim reload der seite wieder verschwindet…sitze schon den ganzen tag an dem problem