[CSS] Ausklappbare Ordnerstruktur - durch Anklicken

[fkerber]

Hallo,

Google hat mir schon nahezu jede Illusion geraubt, dass mein Vorhaben umsetzbar ist, aber bevor ich es ganz sein lasse, dachte ich, frage ich mal noch hier.

Also das Wunschziel wäre eine Ordnerstruktur ähnlich der des Explorers, allerdings mit den Dateien in der Struktur - mal ein Beispiel (voll ausgeklappt)

Code:

Ordner 1
  Unterordner 1
    Datei 1
    Datei 2
    Datei 3
  Unterordber 2
    Datei a
    Datei b
Ordner 2
  Unterordner 1
    Datei x
    Datei y

Sind jetzt hinreichend viele Dateien vorhanden, wird das ganze ziemlich länglich und unübersichtlich.
Daher wäre es ideal, wenn man Ordner auf- und zuklappen könnte.
Allerdings gibt es die Beschränkung, dass kein JavaScript zum Einsatz kommen darf, da die Seite von potenziell vielen Menschen ohne aktiviertem JavaScript genutzt werden wird. (Bitte hier auch keine Diskussion darüber, ob das sinnvoll ist oder oder oder - es ist hier leider als gegeben hinzunehmen).
Jegliche Lösung, die ich aber mit Klicken gefunden habe, hat Javascript genutzt - reine CSS-Lösungen waren immer Hover-Mechanismen, was hier leider auch nicht das gewünschte Ergebnis bringt.

Bei jedem Klick auf einen Menüpunkt die komplette Seite neuzuladen, finde ich auch nicht so prickelnd...


Wie gesagt, ich gehe davon aus, dass es nicht geht, aber ein kleiner Funken Hoffnung bleibt, dass es doch rein mit CSS (bzw. auch php falls das helfen würde) umsetzbar ist...


Grüße, Frederic

[Namenloser]

Ich weiß nicht, ob das für dich zu "Hover-Mechanismen" zählt, aber hast du es mal mit der Pseudoklasse :active oder :focus probiert? Diese gilt für gerade angeklickte bzw. fokussierte Elemente. Allerdings bezweifle ich ehrlich gesagt, dass sich dein Vorhaben mit reinem CSS wirklich 100% zufriedenstellend umsetzen lässt.

[fkerber]

Hi!

Also mit Hover meinte ich, dass ich die Unterordner/Dateien nur sehe, wenn ich mit der Maus über dem Ordner bin oder in dem dann gerade ausgeklappten...

Ich schaue mir die Pseudoklassen mal an - danke.
Edit: Ah, so heißen die dinger
Aber ich sehe jetzt nicht direkt, wie mir das helfen kann?


Grüße, Frederic

[Namenloser]

Hab grad mal etwas herumprobiert - Das Problem ist, dass es bei CSS keinen Parent-Selektor gibt. Damit kannste die Sache mit reinem CSS eigentlich knicken. Im Internet konnte ich nur Workarounds mit JavaScript finden...

[jfheins]

Vergiss es
Mit CSS kannst du nicht auf klicks reagieren (mit :visited geht das nur genau einmal) aber genau das bräuchtest du ja.

Zeig' den Baum ausgeklappt an und schreib ein Javascript, was ihn am Anfang direkt ganz zusammenklappt und das auf und zuklappen ermöglicht. Damit hast du Komfprt für die Javascript-benutzer und trotzdem Benutzbarkeit für die, die Javascript deaktiviert haben.

[Mithrandir]

Die Sidebar dynamisch mit PHP aufzubauen ist keine Alternative?

[fkerber]

Hi!

Das Problem des dynamischen Bauens ist ja, dass jedes mal eine neue Seite geladen werden muss.
Es handelt sich hier um eine Auflistung von Downloads (vereinfacht gesagt) in verschiedenen Ebenen. Im Schnitt können da gut 10 oder 15 Unterordner sein mit je 20 oder 30 Dateien drin. Wenn da jemand einfach mal durchschauen will und muss dann 15x die Seite neu laden mit allem drum und dran, dann bereitet das wahrscheinlich auch wenig vergnügen (zumindest je nach Internetanbindung), oder liege ich da falsch?


@jfheins:
Darauf wird es wahrscheinlich hinauslaufen - dann muss ich nur noch rausfinden, wie ich es schaffe, dass am Anfang der Baum per JavaScript zugeklappt wird - da das ganze in einer Template-Enginge läuft, kann ich kein onLoad im Body verwenden - hat da zufällig jemand eine Idee so aus dem Stehgreif?


Grüße, Frederic

[Matze]

Blende halt die Div-Container (oder UL-Container) mit den Ordnern aus:

Code:

document.getElementById('zusammengeklappter_Baum').style.display = 'none';

[Phoenix]

Das Einblenden ist die gängigste Methode. Schau mal hier: http://www.cssmenumaker.com/

Ansonsten geht natürlich auch die Javascript-Variante. Hierfür müsste es bei jQuery UI auch irgendwelche Plugins geben.

[Matze]

Zitat von Phoenix:

Das Einblenden ist die gängigste Methode. Schau mal hier: http://www.cssmenumaker.com/

Die Menüs funktionieren meines Wissens aber nur beim Hovern, nicht beim "OnClick".

Und für das bisschen JS finde ich jQuery etwas übertrieben. Aber das muss natürlich jeder selbst wissen.