IOException.de

Sobald es ein paar mehr Seiten werden, wird die Standard-Seitenanzeige von Wordpress suboptimal und inflexibel. Also brauchte ich eine Methode um nur die Eltern-Elemente der aktuellen Seite anzuzeigen und den Rest einzuklappen. Bei der Suche nach einer Methode bin ich auf Folding menu for WordPress gestossen. Allerdings fand ich die Animation bei jedem Klick etwas störend.

$(".page_item ul").hide();
$(".current_page_item").parents("ul").show();
$(".current_page_item ul:first").slideDown();

Dies ist meine Version des Code-Schnipsels und tut eigentlich genau das was ich wollte (und animiert nur, wenn man ein Menüpunkt mit Unterpunkten angeklickt hat). Aber da ja sowieso schon die gesamte Navigation vorhanden ist (nur nicht sichtbar), könnte man ja auch den Rest ausklappbar machen …

$(".page_item > ul:hidden").before( '<a href="#" class="menuToggle menuToggleOpen">v</a>');
$(".page_item > ul:visible").before('<a href="#" class="menuToggle menuToggleClose">^</a>');
a = function(){
    $(this).text("^").next("ul").slideDown();
};
b = function(){
    $(this).text("v").next("ul").slideUp();
};
$(".menuToggleClose").toggle(b,a);
$(".menuToggleOpen").toggle(a,b);

Hab dazu auch mal ein kleines Demo hier aufgesetzt.

Einziges Problem ist natürlich mal wieder der Internet Explorer 6, der SlideDown/-Up nicht sonderlich schön darstellt. Aber es ist benutzbar. Je nach erwarteter IE6-Dichte könnte man einen Switch einbauen, der dann im IE 6 die Animation nicht anzeigt (und nur show()/hide() nutzt).

Originalartikel: Wordpress Navigation & jQuery