Aufklappbare, verschachtelte Menüs mit gepunkteter Hierarchiehilfe …
…das ist jetzt Thema 😀
Die Sache ist ziemlich simpel. Ich brauchte letztens ein aufklappbares Menü mit ebenfalls aufklappbaren Unterpunkten, möglichst unkomplizierter Aufbau, möglichst wenig Code. Irgendwann wird das Menü mit vielen aufgeklappten Untermenüs doch sehr übersichtlich, also habe ich „Hierarchielinien“ hinzugefügt. Keiner Ahnung ob es dafür auch einen normalen Namen gibt.
Verpackt in HTML/CSS und einfach animiert mit einem jQuery Zweizeiler, fertig.
CodeHTML:
<ul id="nav"> <li class="expand">Über das IQB <ul> <li>Gründung</li> <li>Ziele</li> <li>Partner/Links</li> </ul> </li> <li>Personal</li> <li class="expand">Bildungsstandards <ul> <li>Aufgabenbeispiele</li> <li>EMSE</li> <li class="expand">Downloadserver <ul> <li>Audiofiles</li> <li>Videofiles</li> </ul> </li> </ul> </li> <li>VERA/Lernstandsvergleich</li> <li class="expand">Arbeitsbereiche <ul> <li>Testentwicklung</li> <li>Kompetenzerwerb</li> <li class="expand">Implementation <ul> <li>Was wird</li> <li>denn eigentlich</li> <li class="expand">so alles <ul> <li>test</li> <li>test2</li> </ul> </li> <li>implementiert??</li> </ul> </li> <li>Bildungsmonitoring</li> <li>Datenzentrum (FDZ)</li> </ul> </li> </ul>
CSS:
body, html{
height: 100%;
width: 100%;
font-family: "Trebuchet MS";
margin: 0; padding: 0;
}
a {
text-decoration:none;
color: black;
}
ul, li {
list-style: none;
}
#nav li {
padding: 2px 2px 2px 15px;
cursor: default;
}
#nav ul {
display: none;
background: url(img/dots.png) repeat-y scroll 10px 0 transparent;
}
#nav li.expand {
background: url(img/arrow-down.gif) no-repeat scroll 0px 12px transparent;
}
.expanded {
background: url(img/arrow-up.gif) no-repeat scroll 0px 12px transparent !important;
}
Das tatsächliche Design des Menüs muss jeder selbst basteln.
jQuery:
$(document).ready(function() {
$(".expand").click(function(e) {
$(this).toggleClass("expanded");
$(this).children("ul:first").slideToggle("300");
e.stopPropagation();
});
}); //$(document).ready
Demo:Download:
Hallo,
sehr interessanter Artikel, vielen Dank! Leider führt der Demo Link ins Leere:
Auch bei den Download-Dateien stimmt so einiges nicht: Der Pfad zur jQuery-Datei ist falsch, ebenso der Dateiname. Und die CSS-Datei fehlt.
Schade!
Ist an sich ein guter Ansatz, aber so leider nur schwer nachzuvollziehen …
Danke David für die Hinweise, ich habe den Demo Link korrigiert und das Download-Paket neu gepackt.
Entschuldige den Mist den ich da fabriziert hatte.
Ich habe zu danken! Ja, so gefällt mir das. Respekt, das ist eine sehr gute Lösung!
Hallo,
das ist sehr gut gemacht. Vielen Dank. Einen Wermutstropfen habe ich dennoch. Es funktioniert nicht wie gewünscht im IE 7 (oder besser gesagt, wenn ich mit dem IE 8 den IE 7 Modus aktiviere). Der Client meint, dass mit $(this).next().slideToggle(„300“); das nächste Listenelement in #nav angesprochen ist und „verschluckt“ den nächsten Menüpunkt.
Danke für den Tipp. Der Internet Explorer kommt an sich mit UL-LI-UL Listen nicht klar. Für ihn ist das so falsch, dass er den DOM Aufbau anders regelt und deswegen next(); nicht auf das nächste Element (UL) zielt. Ziemlich bescheuert aber an sich ist diese Listenverschachtelung ja auch nicht valide.
Lösung:
Der Aufbau des HTML wird leicht verändert.
Statt
lautet der Aufbau jetzt:
<li class="expand">Überschrift <ul> <li>Unterpunkte...</li> </ul> </li>Der schließende /li Tag wird also hinter das Untermenü-UL gesetzt, UL ist jetzt ein Kinderelement von LI.
Der JS Code ändert sich damit in:
$(this).children("ul:first").slideToggle("300"); e.stopPropagation();ul:first nimmt das ersten UL und öffnet/schließt es. e.stopPropagation(); muss sein, weil ein Klick auf ein Element immer vom untersten zum obersten Element weiterwandert und nacheinander ausgeführt wird. In mehrfach verschachtelten Listen (mehr als 1 Ebene) läuft da sonst was schief.
Ich hab den Post geupdatet mitsamt Demo und Download.
Nochmal vielen Dank für den Hinweis!
Hallo zusammen,
erstmal vielen Dank für dem Artikel.
Ich hätte da mal eine Frage:
Ist es möglich den Code so anzupassen, dass ein geöffnetes Untermenü autoamtisch zugeklappt wird, wenn ein anderes Untermenü geöffnet wird.
Danke für eine Antwort.
Gruß
Daniel
hallo, ich weiß der artikel ist schon etwas älter, allerdings habe ich doch noch eine frage dazu. gibt es eine möglichkeit das die links aufgeklappt bleiben wenn man auf sie klickt?
Hallo Daniel,
ja, das ist mit ein paar kleinen Anpassungen möglich.
Ich habe das mal schnell zusammengebastelt und hochgeladen:
DEMO
Folgende Änderungen:
– Klickbare Menüpunkte wurden ordnungsgemäß in a-Tags gepackt und sind damit echte Links (hab ich in der Demo nur für die ersten Menüpunkte gemacht)
– Eine neue Funktion verhindert das Event-Bubbling des Click Events nach dem Klick eines dieser Links:
$("#nav").on('click', 'li.expanded a', function(e) { e.stopPropagation(); });– Außerdem verwende ich das sicherere .on() anstatt .click():
$("#nav").on('click', 'li.expand', function(e) {Hinweis: Für .on() muss mindestens jQuery 1.7 genutzt werden. In dieser Demo hab ich das aktuellste jQuery 1.10 eingebunden.
Links werden jetzt beim Klick also getriggert, danach wird mit stopPropagation() direkt das Klick Event verworfen.
Thats it.
wow. ich hätte nicht gedacht das ich so schnell eine antwort erhalte. ich habe das ganze gerade noch einmal bei html.de gepostet mit link auf deine seite 😉 vielen dank für die schnelle hilfe, ich werde es direkt ausprobieren.
Na dann poste mal noch eine eigene Antwort auf deine Frage, mit Link zur neuen, überarbeiteten Demo.
Danke.
läuft. antwort ist drin und noch mal danke.
Hallo,
gibt es eine Möglichkeit dass die Tabelle am Anfang IMMER zugeklappt ist?
Sprich standardmäßig zu und nur bei einem klick öffnen sich die entsprechenden Elemente.
Gruß,
Kimbl
Ich verstehe die Frage leider nicht ganz. Welche Tabelle soll zugeklappt sein?
Es ist doch standardmäßig so, dass alle Elemente bis auf die Root Ebene zugeklappt sind und nur beim Klick auf den schwarzen Pfeil das eine Element geöffnet wird. Siehe Demo.
Hallo,
Hat sich erledigt:)
durch andere CSS Einstellungen wurden die Elemente bei mir am Anfang immer aufgeklappt angezeigt.
Hallo,
ich bin ziemlich neu auf dem Gebiet..
sieht so super simple aus und würds gern einbauen. Ist das auch ohne Probleme in einer horizontalen Navigationbar anwendbar?
Grüße
Sophia
Hallo Sophia,
leider nein, dieses Beispiel ist nicht ohne größere Änderungen in eine horizontale Navigation zu überführen. Aber es gibt hunderte Tutorials, die ebenso einfach diesen Fall beschreiben:
hier, hier, hier
Vor allem aber scheint das jQuery Plugin Superfish ein sehr gutes und einfaches Tool sein, schnellstens Menüs jeder Art zu erstellen, vielleicht schaust du dir das mal an.