Tutorial: jQuery Dropdown Menü für WordPress

20. Februar 2009 - Tutorials, WordPress, WordPress Funktionen - 42 Kommentare

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

Schlagwörter: , ,

Autor

Moin, ich bin Simon und ehemaliger Betreiber dieses Blogs.

RSS abonnieren

und so weiter...

Kommentare

  • Stephen - am 20. Februar 2009 - Antworten

    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

  • Simon [webdemar] - am 20. Februar 2009 - Antworten

    @Stephen:
    Ja, der Deibel im Detail :-)

  • davor - am 3. März 2009 - Antworten

    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!

  • Monica - am 20. März 2009 - Antworten

    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?

  • Ronald - am 27. März 2009 - Antworten

    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

    • Simon [webdemar] - am 27. März 2009 - Antworten

      @Ronald:
      Danke :-) 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.

  • Ronald - am 27. März 2009 - Antworten

    @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…

  • Oli Janssen - am 5. April 2009 - Antworten

    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`?

    • Simon [webdemar] - am 6. April 2009 - Antworten

      @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 ;-)

  • Oli Janssen - am 6. April 2009 - Antworten

    habs schon rausgefunden, .. ist nicht ganz kompatibel mit dem plugin “ilc folding”.. ;)

    anonsten echt nices tut!

  • guney - am 14. Mai 2009 - Antworten

    found what i was looking for! great information besides your amazin wordpress themes. Thanks.

    ps: hope you write more in english :)

    • Simon [webdemar] - am 14. Mai 2009 - Antworten

      @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 ;-)

  • Mouad - am 19. Mai 2009 - Antworten

    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 !

    • Simon [webdemar] - am 19. Mai 2009 - Antworten

      @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 ;-)

  • Mouad - am 19. Mai 2009 - Antworten

    Thank you very much. I will have a look at it.

  • daniel - am 25. Juni 2009 - Antworten

    …wenn das jetzt noch ohne javascript auskäme, wärs sensationell ;-)

  • mic - am 24. Juli 2009 - Antworten

    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…

    • Simon [webdemar] - am 3. August 2009 - Antworten

      @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.

  • vera - am 30. Juli 2009 - Antworten

    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

    • Simon [webdemar] - am 3. August 2009 - Antworten

      @vera:
      sorry für die späte Antwort. Wie ich sehe, hast Du es jetzt mit dem Plugin hinbekommen :-)

  • Stefan - am 30. Juli 2009 - Antworten

    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?

    • Simon [webdemar] - am 3. August 2009 - Antworten

      @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.

  • Stefan - am 3. August 2009 - Antworten

    hallo simon,
    danke für die rückmeldung ;-) 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…

    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

  • Made - am 19. August 2009 - Antworten

    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

  • Michael - am 20. August 2009 - Antworten

    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

  • markus - am 27. August 2009 - Antworten

    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

  • markus - am 27. August 2009 - Antworten

    Hat sich erledigt… es kann gar keine Unterkategorie angezeigt werden… wenn kein Inhalt darin ist…. *batsch* ;-)

    Gruß Markus

  • Nils - am 16. Dezember 2009 - Antworten

    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

  • Nils - am 16. Dezember 2009 - Antworten

    Habs rausgefunden … mit exclude

    Siehe http://www.texto.de/wp_list_pages-spielereien-41/

  • smashill - am 3. Januar 2010 - Antworten

    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

  • Bembam - am 6. Januar 2010 - Antworten

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

  • Benoît - am 5. Februar 2010 - Antworten

    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 ?

  • 2nuts - am 9. März 2010 - Antworten

    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 :-(

  • Hansi - am 24. Juli 2010 - Antworten

    Top Script und Anleitung, jedoch: hat schonmal jemand Superfish und den Nivo Slider (http://webdemar.com/webdesign/jquery/nivo-slider-jquery-image-slider) zusammen zum laufen bekommen?

    Bei mir klappt diese Konstellation und irgendwie steh ich auf, Schlauch …. :(

  • Hansi - am 24. Juli 2010 - Antworten

    uups … zu schnell gewesen, es muss natürlich heissen: Bei mir klappt diese Konstellation NICHT und irgendwie steh ich auf, Schlauch …

  • Nils - am 26. Juli 2010 - Antworten

    Aus Gründen der Benutzerfreundlichkeit möchte ich auf meiner Seite immer den aktuellen Link hervorheben. Die Navigation zeigt bei mir auf die Seiten. Den Blog-Bereich habe ich Referenzen genannt.

    Wenn ich nun die Suche benutze, auf einen Tag oder eine Kategorie klicke oder einen einzelnen Blog-Post anzeige, wird Referenzen nicht mehr hervorgehoben. Es ist kein Punkt der Navigation hervorgehoben. Deshalb suche ich nach einer Möglichkeit, zu definieren:

    wenn kein current_page_item definiert ist bzw. wenn search.php, single.php oder index.php genutzt wird, soll der Navigationspunkt “Referenzen” als current_page_item definiert werden.

    Hat da jemand eine Lösung?

  • Nils - am 26. Juli 2010 - Antworten

    noch ein Nachtrag zu meiner vorherigen Frage.

    Eine Möglichkeit ist natürlich, den header in den Seiten search.php, archive.php und single.php zu kopieren und den Part mit der dynamischen Navigation durch eine statische zu ersetzen. Dort kann ich dann meinen Menüpunkt durch current_page_item hervorheben.

    Der Nachteil liegt aber auf der Hand … ändert sich etwas an der Seitenstruktur, muss auf drei Seiten Hand angelegt werden. Deshalb würde mich nach wie vor interessieren, ob es da nicht eine elegantere Lösung gibt.

  • Jessica - am 11. August 2010 - Antworten

    Hallo…

    ersteinmal danke für dieses wirklich tolle Tutorial – baue gerade meine erste Webseite in WordPress, hatte keine Ahnung von Javascript und PHP und es hat trotzdem geklappt. Allerdings nicht lange :-(

    Das Menü funktioniert scheinbar nicht mit einigen Plugins… ohne kein Problem, aber wenn ich die einschalte, klappt kein JS mehr, nur der CSS-Teil funktioniert noch. Was mir nicht viel weiterhilft, da ich das hauptsächlich als Lösung für den ###!-Internet-Explorer einsetzen wollte.

    Ein Problem gab es bei mir mit “User Access Manager”, “Contact Form 7″, “wp-jquery-lightbox” und “WP Bannerize”. Kennt jemand eine Lösung dafür – oder Plugins, die das geiche können und sich nicht in die Quere kommen? Auf lightbox und bannerize könnte ich ja noch verzichten, aber die anderen beiden sind schon wichtig…

  • Sascha - am 1. März 2011 - Antworten

    servas,
    hab versucht, das Menü in mein BuddyPress Theme (Standard Theme) einzubinden. Habe alle Schritte befolgt, leider werden nur die Kategorien in einer Liste angezeigt. Auf das Javascript scheint das Theme nicht zu reagieren. Liegt es an mir oder an BuddyPress?

  • Rafa - am 23. März 2011 - Antworten

    Hi,
    finde es super das jemand so ein tutorial veröffentlicht.könntet ihr aber einem blutigen anfänger erklären,wo er was einzufügen hat?

    merci

Trackbacks

Deine Meinung