Möchte man in Wordpress ein dynamisches Menü mit Hover-Effekten erstellen, dann bietet sich das Multi-level Navigation Plugin an. Es funktioniert durch reine CSS-Formatierung in allen wichtigen Browsern. Lediglich für den Internet Explorer bis einschließlich Version 6 wird Javascript vorausgesetzt.
Trotzdem gibt es einen Punkt, an dem man zwangsläufig scheitern wird, nämlich wenn man "Permalinks" aktiviert.
Dann passiert es, dass den Menüpunkten mit Kindern der Klassenwert "haschildren" fehlt. Der Grund hierfür findet sich in der Funktion pages() in core.php.
Hier die korrigierte Version:
function pages() {
echo '', ereg_replace("\"><a [^<]+</a>([\t\n]+)<ul"," haschildren\\0",
wp_list_pages('title_li=&exclude='. get_option('suckerfish_excludepages').'&echo=0')) ,
'';
}
Die "Eltern-Elemente" können jetzt mit "#suckerfishnav li:hover.haschildren" für alle Browser außer IE<=6 gestylet werden. Um das auch mit dem IE6 zu ermöglichen, muss man die suckerfish_ie.js etwa so anpassen:
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("suckerfishnav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
if((this.className.search(/haschildren/)) != -1) {
this.className+="sfhover";
} else {
this.className+=" sfhover";
}
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
this.className=this.className.replace(/sfhover/, "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
Damit kann man die Elemente im IE mit "#suckerfishnav li.haschildrensfhover" ansprechen.
UPDATE:
Mittlerweile wurde der Code vom Entwickler eingepflegt und ist in der neuesten Version des Plugins enthalten.
Kommentar hinzufügen