Neue Navigation, Nachtrag

Das neue Menü ist jetzt einen Tag am Laufen gewesen, nur hat sich bei der Benutzung herausgestellt, dass das mit reinem CSS doch nicht besonders praktisch ist. Stellen wir uns diesen Baum vor:

Test 1 [+]
  Test 1.1
  Test 1.2
  Test 1.3
  Test 1.4
Test 2
Test 3

Würde ich nun mit der Maus über den „Test 1“-Link fahren, klappt der Baum wie gewünscht aus. Ich könnte auch Unter-Items (1.*) anwählen und hätte keine Probleme. Würde ich aber unter „1.4“ fahren, so würde die Klasse „:hover“ des „Test 1“-Knotens nicht mehr aktiv sein und der Baum zusammenklappen; leider klappen damit 4 Items auf einmal ein und meine Maus wäre sofort außerhalb des Baumes.

Wenn ich nur zwei Level habe, so ist das kein Problem; bei dreien aber könnte ich bestimmte Menüpunkte nicht mehr erreichen. Außerdem kann der Internet Explorer 6 damit nichts anfangen.

Ich habe mich daher entschieden, DHTML zu verwenden. Ein unter FireFox und Internet Explorer laufendes JavaScript sieht dann so aus:

Neues JavaScript zum Navigieren
function addPlussesToTree() {
  var navTree = document.getElementById("sidebar");
  if (!navTree) { alert("N1"); return; }
  var myLiTags = navTree.getElementsByTagName("li");
  if (!myLiTags) { alert("N1"); return; }
  for (i=0; i<myLiTags.length; i++) {
    //Notwendig wegen IE Auto-Uppercase-TagsNames
    var test = myLiTags[i].innerHTML.toLowerCase();
    if (test.indexOf("<ul")>-1) {
      var imgEl = document.createElement("img");
      imgEl.src = '<?php bloginfo("stylesheet_directory"); ?>/images/icon_plus.gif';
      imgEl.border = "0";
      imgEl.onmouseover = openTree;
      imgEl.style.cursor = "pointer";
      myLiTags[i].insertBefore(imgEl, myLiTags[i].getElementsByTagName("ul")[0]);
    }
  }
}

function openTree() {
  if (this.src.indexOf("plus")>0) {
    this.parentNode.getElementsByTagName("ul")[0].style.display = "block";
    this.src='<?php bloginfo('stylesheet_directory'); ?>/images/icon_minus.gif';
  } else {
    this.parentNode.getElementsByTagName("ul")[0].style.display = "none";
    this.src='<?php bloginfo('stylesheet_directory'); ?>/images/icon_plus.gif';
  }
}		

addPlussesToTree();

Natürlich kann man aus dem Ereignis onmouseover in Zeile 10 auch ein onclick-Ereignis machen, dann klappt der Baum erst beim Klicken auf. Eine Anmerkung zur Parameterübergabe der Funktion openTree(): Weise ich per JavaScript einem Element eine Funktion für ein Ereignis zu, so steht innerhalb der Funktion die Pseudo-Klasse this immer als das aufrufende Element zur Verfügung; ich brauche also nicht, wie von HTML her gewohnt, element.ereignis = „funktion(this)“ zu schreiben.

Sicherstellen, dass er aufgeklappt bleibt, wenn die Seite z.B. in einem Unterpunkt neu geladen wird, der User also auf den Unterpunkt geklickt hat, kann man es aber wieder mit CSS:

CSS, um den Baum nach Klick auf Kind-Knoten offen zu halten
/* CATS Allgemein */
.cat-item a { display:inline; }
.cat-item ul { list-style:none; }
.cat-item ul li { list-style:none; }

/* CSS::Aufklappen Ebene 1 */
.cat-item ul { display:none; }

/* CSS::Aufklappen Ebene 2 */
.cat-item ul li img { display:inline; }

/* CSS::Aufklappen Ebene 3 */
.cat-item ul li ul { display:none; }

/* CSS::Erhalten Ebene 1 */
.current-cat-item ul { display:block; }
.current-cat-item img { display:none; }

/* CSS::Erhalten Ebene 2 */
.current-cat-ancestor ul { display:block; }
.current-cat-ancestor img { display:none; }

/* CSS::Erhalten Ebene 3 */
.current-cat-ancestor ul li.current-cat-ancestor ul { display:block; }
.current-cat-ancestor ul li.current-cat-ancestor img { display:none; }

Ich habe die display-Property der img-Tags noch so gesetzt, dass ein Baum, der gerade durch Klick auf ein Kind-Element offen bleiben soll, auch nicht mehr geschlossen werden kann; sonst wäre ja der Bezugspunkt unsichtbar.

Ein Wort noch zu deaktiviertem JavaScript: Sollte kein JS verfügbar sein, so erhält der Benutzer keinen Hinweis auf Kindsknoten. Sie werden zwar nach dem Neu-Laden wegen CSS aufgeklappt dargestellt, aber eben nicht in Echtzeit.

Eventuell wäre es deswegen sinnvoll, in einem nächsten WordPress-Release eine CSS-Klasse „page-item-haschildren“ zu den „page-items“ und „cat-items“ mit auszugeben.