guardian: Menüstruktur wie im Windows Explorer

Guten Tag gemeinde :)

Ich bin relativer neuling wenns um CSS und HTML geht. Ich meine, ich kann zwar schon recht viel, aber eben nicht ansatzweise 50% ;)

Dann komm ich mal zur Sache:

Ich habe vor, auf meine Firmenseite eine Ordnernavigation zu machen.
Ich meine das schon mal gesehen zu haben, kann mich aber nicht erinnern wo.

Das heißt, es soll so funktional sein wie eben im Windows explorer.
So wie das hier:

es soll auf-klappbar und wieder zu-klappbar werden:
Explorer bild

Wenn ich bei google nach "HTML CSS Menü wie im Windows Explorer" etc suche, bekomme ich nur Müll geliefert.

Hat jemand eine Ahnung wo ich eine Anleitung oder ein Tut finden kann?

Oder kann mir jemand direkt helfen?

Wär echt super von euch!

  1. Hallo,

    als aller erstes mal die Frage: "50% von was?"
    50% vom kompletten w3c Standard? Das wäre doch recht viel. Wäre nett wenn einige Internetfutzis auch soviel drauf hätten wie du!

    Mit dem Begriff "dropdown" kommst du glaub ich weiter.
    Was du vor allem suchst ist Javascript und nicht css.
    Wenn es Browserabhängi laufen kann, dann ist das hier auf jeden Fall einen Blick wert:
    http://www.w3schools.com/html5/tag_details.asp

    Gruß
    Börsentief berechnender
    T-Rex

  2. [latex]Mae  govannen![/latex]

    Wenn ich bei google nach "HTML CSS Menü wie im Windows Explorer" etc suche, bekomme ich nur Müll geliefert.

    Versuch es mit „tree menu“. Allerdings hast du dann das Problem zu lösen, daß Personen ohne Javascript die Navigation vernünftig bedienen können. Heißt: Endwerder bekommen die immer das komplette ausgeklappte Menü zu sehen oder aber du hast im HTML nur den jeweils entsprechenden Zweig (und Links zu höheren Ebenen). Dann kannst du zum Beispiel  für Nutzer mit JS das komplette Menü nachladen (per XMLHttpRequest) und das Teilmenü ersetzen.

    Stur lächeln und winken, Männer!
    Kai

    --
    Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
    in Richtung "Mess up the Web".(suit)
    SelfHTML-Forum-Stylesheet
  3. Lieber guardian,

    meinst Du sowas? Schau mal in den Quelltext, da findest Du alle Zutaten.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Lieber guardian,

      meinst Du sowas? Schau mal in den Quelltext, da findest Du alle Zutaten.

      Liebe Grüße,

      Felix Riesterer.

      @ Felix
      Ja genau sowas hab ich gesucht!
      Dankesehr!

      In CSS ist sowas nicht realisierbar, oder?
      Was denkt ihr was sinnvoller ist, javascript oder ein iframe, der bei einem klick auf die Struktur neu lädt?

      @T-Rex, nana ich kann die basics von CSS und einiges drüber raus. Ich weiß dass es massig gibt, aber ich verstehe die logik und kenn mich eigentlich schon relativ gut damit aus.
      Zu deinem Link: Nein darf leider nicht abhängig laufen :)

      @Kai, danke, ich werds mir mal zu gemüte führen!

      @ Dave, ich werds mir mal durchlesen, danke!

      ging ja echt flott! Super forum!

      1. Hi,

        In CSS ist sowas nicht realisierbar, oder?

        Kommt auf deine Kompatibilitätsansprüche an. Ungefähr so könnte man es nur mit CSS machen. (im Chrome getestet)
        Allerdings kannst du bei einer CSS-Lösung keine Äste des Baums dynamisch nachladen.

        Was denkt ihr was sinnvoller ist, javascript oder ein iframe, der bei einem klick auf die Struktur neu lädt?

        Javascript.

        ~dave

      2. Lieber guardian,

        In CSS ist sowas nicht realisierbar, oder?

        Meine Lösung nutzt hauptsächlich CSS. JavaScript wird nur für das Auf- und Zuklappen benutzt. Probiere die Seite doch einmal mit deaktiviertem JavaScript aus!

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Lieber guardian,

          In CSS ist sowas nicht realisierbar, oder?

          Meine Lösung nutzt hauptsächlich CSS. JavaScript wird nur für das Auf- und Zuklappen benutzt. Probiere die Seite doch einmal mit deaktiviertem JavaScript aus!

          Liebe Grüße,

          Felix Riesterer.

          guten Morgen Felix,

          ah, ok!

          Ein Problem habe ich jedoch noch, wenn ich den quelltext der .js und der html seite kopiere und lokal ablege und auch die ordnerstruktur übernehme, dann zeigt er mir die Struktur genauso an, wie wenn kein JS aktiviert ist.

          Eine ahnung woran das liegen könnte?

          Die Seite liegt lokal auf meinem Rechener

          Danke schonmal für eine Antwort :)

          1. Sorry, mein Fehler, ich habe die CSS Datei übersehen!

            Danke sehr, es sieht wirklich gut aus!

            Kann man noch abfragen, ob Javascript aktiviert ist, und im Falle eines nicht aktiv seins die listensymbole entfernen?

            1. Hi,

              Kann man noch abfragen, ob Javascript aktiviert ist, und im Falle eines nicht aktiv seins die listensymbole entfernen?

              Ja.

              Indem du dem html-Element eine Klasse "no-js" gibst. Dann bindest du noch ein Javascript ein dass die Klasse "no-js" durch "js" ersetzt.

              Jetzt kannst du im CSS Elemente in Abhängigkeit von aktiviertem Javascript stylen.

              ~dave

              1. dankesehr! hätte ich auch selbst drauf kommen können!
                Funzt einwandfrei!