Wenn die Menüstruktur zu lang und kompliziert wird, sollte man dringend etwas unternehmen. Ansonsten verlieren alte Nutzer den Überblick und Neue springen sofort wieder ab. Möglichkeiten, die mit der Zeit entstandene Unordnung zu beseitigen, gibt es einige. Man könnte eine weitere Menüstruktur auf der eigenen Seite implementieren, die bisherigen Menüpunkte zusammenfassen oder aber man behilft sich der JavaScript Funktion slideToggle.

Wie der Name vielleicht schon verrät, handelt es sich bei dieser Funktion um das Ein- bzw. Ausklappen des Menübaumes.

Die eigentliche Funktion in JQuery sieht wie folgt aus:

$(document).ready(function() {
   $(Pfad zum click-Element).click(function() {
       $(geklicktes Element).next(nächstes Element).slideToggle(); 
   })
})

Angenommen wir haben das nachfolgende Menü gegeben…

… dann wäre der Pfad zum geklickten Element nun .menu > ul > li > a und das nächste Element, also das was sich ein- bzw. ausklappen soll, ist nun die unsortierte Liste < ul >. Damit haben wir alle relevanten Informationen zusammen. Der fertige JQuery-Code würde wie folgt aussehen:

$(document).ready(function() {
   $('.menu > ul > li > a').click(function() {
       $(this).next('ul').slideToggle(); 
   })
})

Soll das selektierte Menü beim Laden der Seite nicht mit angezeigt werden, müsst ihr in der CSS Datei das jeweilige Element mit display:none; kennzeichnen.

Eine berechtigte Frage, gerade wenn man an die doch recht schnellen Release-Zyklen der einzelnen Browser-Hersteller denkt.

Jemand, der da Licht ins dunkle bringt will, ist Philipp Bosch, Gründer der Webseite http://www.haz.io.

Auf haz.io wird der eigene Browser in den Bereichen HTML5, CSS3 und Javascript geprüft. Der Nutzer erhält dadurch sehr schnell einen Einblick darüber, welche Eigenschaften aus den Technologien unterstützt werden oder eben nicht.

Das Ganze mal veranschaulicht an einem Beispiel des Browsers Chrome mit der Version 14.