Wenn ihr ein vorhandenes Menü mit Richtungspfeilen ergänzen möchtet: hier ist ein kleines Plugin dafür.
English summary: If you have an existing menu on your WordPress blog or site and want to enhance it with arrows to indicate submenus: here is a proposal to do so. But be aware, that the plugin isn’t out of the box and needs slight modifications to meet your special requirements.
Die Grundidee findet man z.B. auch beim superfish Menu: per JavaScript/ jQuery werden dem Menü beim Laden der Seite kleine Pfeilchen hinzugefügt, wenn ein Menüpunkt Untermenüs besitzt.
Der js Code besteht nur aus wenigen Zeilen:
jQuery(document).ready( function()<
{
jQuery(".vlist li:has(ul) > a").each(function() {
jQuery(this).html(jQuery(this).text() + '<img src="' + pathtoimage.jsmenuImageUrl + 'arrow_down.png" width="20px" height="10px"/>');
});
jQuery("#access > .menu > ul > li:has(ul) > a").each(function() {
jQuery(this).html(jQuery(this).text() + '<img src="' + pathtoimage.jsmenuImageUrl + 'arrow_down.png" width="20px" height="10px"/>');
});
jQuery("#access > .menu > ul > li:not(ul) li:has(ul) > a").each(function() {
jQuery(this).html(jQuery(this).text() + '<img src="' + pathtoimage.jsmenuImageUrl + 'arrow_right.png" width="20px" height="10px"/>');
});
});
Die erste Funktion:
jQuery(".vlist li:has(ul) > a").each(function() {.....
findet alle li- Listpunkte nach dem div mit der Klasse vlist, die Untermenüs besitzen und fügt einen arrow-down an.
Ich benutze dies für ein Menü in der Sidebar, das Untermenüs durch Einrückung anzeigt und nicht „aufklappt“.
Die zweite Funktion:
jQuery("#access > .menu > ul > li:has(ul) > a").each(function() {...
findet alle li-Listpunkte mit Untermenüs auf der ersten Ebene und fügt ebenfalls einen arrow-down an.
Dass benutze ich für das Hauptmenü, das die zweite Ebene nach unten aufklappt.
Die dritte Funktion
jQuery("#access > .menu > ul > li:not(ul) li:has(ul) > a").each(function() {...
findet alle li-Listpunkte mit Untermenüs nach der ersten Ebene und fügt einen arrow-right an. Dies benutze ich im Hauptmenü für alle folgenden Untermenüs.
Mit
jQuery(this).html(jQuery(this).text() + ....
wird der angezeigte Menüname gefunden und um das entsprechende Bild erweitert.
Damit das Plugin funktioniert, müsst ihr für jQuery den Suchpfad (z.B („.vlist li…“ oder „#access > .menu > ul > li…“ modifizieren, damit die richtigen li-Listpunkte gefunden werden.
Hier könnt ihr das Plugin downloaden: jsmenu. Denkt aber daran, dass ihr es anpassen müsst
