[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 :mrgreen:
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:

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. ;)

[fkerber]

Hi!

Danke.
Noch kurz das Ergebnis unseres folgenden ICQ-Gespräches, da ich nicht so den Plan von JavaScript habe :stupid:
Man kann das onLoad-Ereignis auch nutzen, wenn man es nicht im Body-Tag notieren kann, indem man

Code:

window.onload = funcName;

nutzt.


@Phoenix:
Klar, für ein Menü ist das ok - nutze ich auch selbst so.
Aber hier geht es ja nicht um ein Menü - sondern eine Download-Übersicht.


Grüße, Frederic

[Alien426]

Schau dir auch mal CSS-basierte Navigationsleisten bei SelfHTML an. Da hast du dann auch noch Erklärungen dazu wie es funktioniert.

[nat]

Zitat:

Zitat von fkerber

Das Problem des dynamischen Bauens ist ja, dass jedes mal eine neue Seite geladen werden muss.

ich kenne den aufbau deiner seite ja nicht, aber vll ist es ja hilfreich die baumstruktur in einen iframe zu verfrachten
und eben diesen nur neu laden zu lassen. restliche seite wird dann nicht neu geladen!

[Luckie]

Sind iframes nicht böse?

[himitsu]

Zitat:

Zitat von Luckie

Sind iframes nicht böse?

DP-Chat
Shoutbox
Themen-Rückblick
...

[nat]

Zitat:

Zitat von Luckie

Sind iframes nicht böse?

verwechsle iframes nicht mit frames (und das daraus resultierende layout).
iframes können manchmal ein sehr nützliches hilfsmittel sein.

[Florian Hämmerle]

Code:

<html>
<head>
<style>
   ul#root {display: block;}
   ul.folder {display:none;}
   ul#root li:hover ul.folder {display: block;}
</style>
</head>
<body>
   <ul id="root">
      [*]Computer
      [*]Papierkorb
      [*]Externe FP
         <ul class="folder">
            [*]Datei 1
            [*]Datei 2
         [/list]      
   [/list]</body>
</html>

Test das mal... :D

[Matze]

Zitat:

Zitat von Florian Hämmerle

Test das mal... :D

Das geht aber nur beim Hovern und wie das geht, wissen wir. ;)

[Florian Hämmerle]

Javascript haben eigentlich alle aktiviert. Oder für welche Zielgruppe brauchst du dieses Ausklappmenü eigentlich?

mfg Florian

[Namenloser]

Zitat:

Zitat von Florian Hämmerle

Javascript haben eigentlich alle aktiviert.

Quelle? Ich wette, dass mindestens 90% der Nutzer JavaScript aktiviert haben, schon allein deshalb, weil es bei allen bekannten Browsern die Voreinstellung ist. Es sei denn natürlich, sie sitzen hinter irgendeinem Firmenproxy, der Javascript herausfiltert.
Au mann, ich hätte schwören können, dass da deaktiviert stand. Sorry... sollte mir echt angewöhnen, genauer zu lesen.

Es ist aber sehr gut möglich, die Funktionalität des Treeviews auch ohne Javascript zu erhalten. Generell sollte Javascript sowieso immer nur die Benutzung erleichtern, aber nicht erst ermöglichen.

[Meflin]

Zitat:

Zitat von NamenLozer

Generell sollte Javascript sowieso immer nur die Benutzung erleichtern, aber nicht erst ermöglichen.

Diese Aussage mag vielleicht auf 0815-Webseiten noch zutreffen. Auf Webapplications aber mit Sicherheit nicht mehr.

[fkerber]

Hallo,

Zitat:

Zitat von Florian Hämmerle

Javascript haben eigentlich alle aktiviert. Oder für welche Zielgruppe brauchst du dieses Ausklappmenü eigentlich?

mfg Florian

Zielgruppe sind rund 1300 Schüler + 150 Lehrkräfte einer weiterführenden Schule. Und wie gesagt ist diese Funktion so essentiell, dass sie wirklich in allen Fällen funktionieren muss - d.h. wenn nur ein Schüler dabei ist, der JavaScript nicht aktiviert hat, ist die Sache rum ;)

Daher werde ich es wie angesprochen machen:
Menü standardmäßig ausgeklappt - falls JavaScript vorhanden, wird es eingeklappt und kann dann stückchenweise ausgeklappt werden.


Grüße, Frederic