Andre Steffens: Navigation mehrere Ebenen

Hallo Zusammen,

ich habe das in SelfHTML beschriebene Beispiel "Dynamische CSS-Navigation für moderne Browser" auf meiner Seite verwendet.

http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

Dummerweise funktioniert dieses Script aber nur bei einer Ebene.

Hat jemand bereits eine Lösung die rekursiv mit beliebig vielen Ebenen arbeitet?

<ul id='Navi'>
  <li>1
  <ul>
    <li>1.1</li>
    <li>1.2</li>
    <li>1.3
    <ul>
      <li>1.3.1</li>
      ...
    </ul>
  <ul>
</ul>

Gruß und Danke
Andre

  1. hi,

    http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

    Dummerweise funktioniert dieses Script aber nur bei einer Ebene.

    Wenn man mehr "Ebenen" haben will, müsste es zunächst natürlich entsprechend erweitert werden, bgzl. der :hover-Effekte und ggf. auch bzgl. des Javascripts für den IE - hast du das versucht?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Wenn man mehr "Ebenen" haben will, müsste es zunächst natürlich entsprechend erweitert werden, bgzl. der :hover-Effekte und ggf. auch bzgl. des Javascripts für den IE - hast du das versucht?

      CSS mäßig gibt es kein Problem. Im Firefox sowie dem Opera funktioniert es auch einwandfrei. Nur beim IE gibt's Probleme. Das "ausblenden" funktioniert nicht!

      siehe http://www.steffens-consulting.net: Im Menü mit der Maus auf "Leistungen" und dann auf "Brainwork" oder "Erneuerbare Energien".

      Gruß und Danke
      Andre

  2. Hi,

    http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

    Dummerweise funktioniert dieses Script aber nur bei einer Ebene.

    abgesehen davon, dass das kein Script ist und es sich um zwei Navigationsebenen handelt ;-)

    Hat jemand bereits eine Lösung die rekursiv mit beliebig vielen Ebenen arbeitet?

    sind beliebig viele Ebenen überhaut nicht praktikabel und bei der horizontalen Navigation mit vertikaler zweiter Ebene selbst eine dritte nur schwer sinnvoll anzuordnen.
    Wie soll denn die Anordnung sein?

    freundliche Grüße
    Ingo

    1. abgesehen davon, dass das kein Script ist ...

      siehe weiter unten (JavaScript für IE 5 und 6)!

      ... sind beliebig viele Ebenen überhaut nicht praktikabel ...

      wenn Du meinst ;-)

      ... Wie soll denn die Anordnung sein?

      siehe http://www.steffens-consulting.net: In der Menüleiste (oben) mit der Maus über "Leistungen" und dann auf "Brainwork" oder "Erneuerbare Energien".

      Gruß
      Andre

      1. Hi,

        ... Wie soll denn die Anordnung sein?

        siehe http://www.steffens-consulting.net: In der Menüleiste (oben) mit der Maus über "Leistungen" und dann auf "Brainwork" oder "Erneuerbare Energien".

        ok, das sind drei Ebenen - von denen ich die dritte übrigens mit meinem Firefox kaum erreichen kann; ich schätze, dass da eine winzige Lücke zwischen ist.

        Für den IE hast Du da mein kleines Script (wieso eigentlich mitten in einer Tabelle) in der älteren Fassung eingetragen. Ich würde von der aktuellen Version ausgehen und in
        if (sucheUL(LI.firstChild)) {}
        eine weitere Schleife für die dritte Ebene einbauen.

        freundliche Grüße
        Ingo

        1. ok, das sind drei Ebenen - von denen ich die dritte übrigens mit meinem Firefox kaum erreichen kann; ich schätze, dass da eine winzige Lücke zwischen ist.

          eine kleine lücke ist drin, macht optisch sinn und bei meinem firefox keine probleme - schau ich mir aber nochmal an - danke für die info!

          Für den IE hast Du da mein kleines Script (wieso eigentlich mitten in einer Tabelle) in der älteren Fassung eingetragen. Ich würde von der aktuellen Version ausgehen und in

          arbeite mit einem Template-System (PHP-Basis) und füge das Javascript daher erst in der Tabelle ein ;-)

          if (sucheUL(LI.firstChild)) {}
          eine weitere Schleife für die dritte Ebene einbauen.

          probier ich mal aus. Gibt's eine rekursive Version?

          Gruß und Danke
          Andre

          1. Hi,

            eine kleine lücke ist drin, macht optisch sinn und bei meinem firefox keine probleme

            bei mir schon. Du mußt halt die Lücke nur optisch gestalten und dafür sorgen, dass sich die Elemente nahtlos aneinander setzen. margin erzeugt Abstand zum Element, padding nur innerhalb des Elements - und das kann genauso aussehen.

            if (sucheUL(LI.firstChild)) {}
            eine weitere Schleife für die dritte Ebene einbauen.

            probier ich mal aus. Gibt's eine rekursive Version?

            von mir noch nicht. Aber du müßtest die Funktion sucheUL() dazu nur mit der inneren Referenz aufrufen.

            freundliche Grüße
            Ingo

          2. Hallo.

            ok, das sind drei Ebenen - von denen ich die dritte übrigens mit meinem Firefox kaum erreichen kann; ich schätze, dass da eine winzige Lücke zwischen ist.

            eine kleine lücke ist drin, macht optisch sinn und bei meinem firefox keine probleme - schau ich mir aber nochmal an - danke für die info!

            Zur Ergänzung: In Opera werden die Lücken auch sehr zielsicher gefunden.
            MfG, at

            1. Zur Ergänzung: In Opera werden die Lücken auch sehr zielsicher gefunden.

              Danke für die Info. Habe die Layouts etwas geändert (padding statt margin). Konnte bei mir aber in beiden Fällen nichts feststellen. Opera sowie Firefox funktionierten bei mir einwandfrei!

              Wäre super, wenn Du/Ihr das bei Euch nochmal testen und mir eine Info geben könntet. DANKE!

              Herzlichst, Euer
              Andre

              1. Hallo.

                Danke für die Info. Habe die Layouts etwas geändert (padding statt margin). Konnte bei mir aber in beiden Fällen nichts feststellen. Opera sowie Firefox funktionierten bei mir einwandfrei!

                Hier leider weiterhin nicht. Eine Lösung würde ich in der Verwendung von border statt margin oder padding vermuten.
                MfG, at

        2. Für den IE hast Du da mein kleines Script (wieso eigentlich mitten in einer Tabelle) in der älteren Fassung eingetragen. Ich würde von der aktuellen Version ausgehen und in
          if (sucheUL(LI.firstChild)) {}
          eine weitere Schleife für die dritte Ebene einbauen.

          Kannst Du mir bei dieser Schleife einwenig weiterhelfen? Irgendwie fällt mir im Moment nicht ein, wie diese aussehen müsste... DANKE!

          Herzlichst
          Andre Steffens