kollekti: Navibar - Baumstruktu

Hallo

Ich habe ein kleines Problem.
Ich möchte auf meiner HP eine Navigationsbar als Baumstruktur. Diese soll auf der Linken Seite in einem Frame eingebettet sein. Oder ist das in einem Frame nicht sinnvoll? Zumindest sollte sie folgendermassen funktionieren.
Ich habe folgende Punkte:

  • Link1
  • Link2
  • Link3

*/ Action klick auf Link2 */

  • Link1
  • Link2
      - unterLink2.1
      - unterlink2.2
      - ...
  • Link3

*/ Action klick auf Link1 */

  • Link1
      - unterLink2.1
      - unterlink2.2
      - ...
  • Link2
  • Link3

usw.

Also wenn man auf einen "Hauptlink" klickt, soll dort Unterpunkte kommen. Wenn man nun auf einen anderen "Hauptlink" klickt, sollen die Unterpunkte von dem ersten Klick wieder eingerollt werden, und die Unterpunkte des 2. Klicks aufgehen.
Eigentlich ja keine große Sache. Oder? Ich möchte das möglichst "leicht" Programmieren, also nicht in Java oder so. PHP oder ähnliches möglichst auch nicht.
Wie stelle ich das nun also am besten an, und in welcher Sprache?
Das Menü soll auch nicht großartig animiert sein. Einfach ein Mousover Effekt mit CSS oder so.

Für Hilfe oder Tipps bin ich sehr dankbar.

mfg
Kollekti

  1. hy

    schau dir doch ma das konzept auf
    http://www.htl-wels.ac.at/aktuelle_homepage/main_frameset.htm
    an.
    dort ist es rein mit html gelöst.
    ziemlich einfach aber gut.

    mfg

    1. Hallo

      Erstmal vielen Dank für die schnelle Hilfe.

      Vorallem hat mir die Seite von Barney gefallen. Dies schaut echt relativ leicht aus, und verlangt (so schaut es auf die schnelle aus) keine grossen erwartungen von dem Web-Browser des Users und auch nicht vom Server.

      @Gernot Back.
      Diese Arte Baumstruktur finde ich auch etwas zu umständlich zu bedienen. Da muss man wirklich schon sehr genau klicken und auch wissen, dass es bei einem + auf geht. Aber ansonsten sehr übersichtlich

      Also vielen Dank für die hilfe...will das gleich mal ausprobieren.

      mfg
      kollekti

      1. Hallo

        Erstmal vielen Dank für die schnelle Hilfe.

        Vorallem hat mir die Seite von Barney gefallen. Dies schaut echt relativ leicht aus, und verlangt (so schaut es auf die schnelle aus) keine grossen erwartungen von dem Web-Browser des Users und auch nicht vom Server.

        @Gernot Back.
        Diese Arte Baumstruktur finde ich auch etwas zu umständlich zu bedienen. Da muss man wirklich schon sehr genau klicken und auch wissen, dass es bei einem + auf geht. Aber ansonsten sehr übersichtlich

        Also vielen Dank für die hilfe...will das gleich mal ausprobieren.

        Ein Nachteil hat diese ganze Geschichte. Wenn ich nun nachträglich einen Menüpunkt eintragen möchte, ist das ganze sehr sehr mühselig. Da muss ich ja die kompletten Navigationsseiten verändern. Gibt es dazu evtl noch eine leichtere lösung?

        mfg
        kollekti

        1. Ein Nachteil hat diese ganze Geschichte. Wenn ich nun nachträglich einen Menüpunkt eintragen möchte, ist das ganze sehr sehr mühselig. Da muss ich ja die kompletten Navigationsseiten verändern. Gibt es dazu evtl noch eine leichtere lösung?

          mfg
          kollekti

  2. Hi,

    sowas kannst du nur mit JavaScript realisieren.
    (Ausser, wie beim Beispiel von Barney mit vielen verschiedenen Navigationsseiten -> viel Arbeit beim ändern)

    Du vesteckst die Untermenüs in div-Containern und machst die unsichtbar.
    Beim Klick machst du den Container dann sichtbar.

    1. Hallo Manuel,

      sowas kannst du nur mit JavaScript realisieren.

      bestimmt nicht nur.

      (Ausser, wie beim Beispiel von Barney mit vielen verschiedenen Navigationsseiten -> viel Arbeit beim ändern)

      Nein ich vermute bei der von Barney geposteten "reinen" HTML-Version ist auch eine serverseitige Scriptsprache am Werk.

      Du vesteckst die Untermenüs in div-Containern und machst die unsichtbar.
      Beim Klick machst du den Container dann sichtbar.

      Was sollen nur immer diese unsinnigen Div-Container?

      Diese Lösung:

      http://www.sprachlernspiele.de/selftests/klappmenue/tree.html

      kommt vollkommen ohne DIV-Elemnte aus. Ich arbeite aber noch dran.

      Als ich den Link letzte Woche hier schon einmal gepostet hatte, kam leider nur ein Feedback. (Dank an Wahsaga nochmal)

      Deshalb meine Bitte auch an die anderen: Testet doch bitte mal mit euren diversen Browsern und Systemen und berichtet mir, ob es Probleme gibt. Der IE am Mac ist eines, das weiß ich schon; der klappt immer nur den ersten Untermenüpunkt auf. Vielleicht hat da ja ein Mac-User einen Tipp für mich, wie ich das beheben kann. Es soll nämlich ein TuT-Artikel daraus werden mit idiotensicher Anleitung zum Einbau auf die eigene HP.

      Sehen die gepunkteten Linien regelmäßig aus, "klappt" alles?

      Für Feedback wäre ich dankbar.

      Gruß Gernot

      1. Hi,

        Diese Lösung:

        http://www.sprachlernspiele.de/selftests/klappmenue/tree.html

        Du verlangst hier arg viel von den Usern: ein gutes Auge, eine zielsichere Hand un ein verwacklungsfreies klicken - und das auch noch ohne Unterstützung durch einen Hover-Effekt.
        Außerdem muß der User wissen, daß Untermenüs über das [+] aufgeklappt werden können - das kannst Du noch nicht einmal bei Windows-Usern voraussetzen, denn die klickem meist doppelt auf den Verzeichnisnamen.

        Davon abgesehen ist mir eine solche Lösung viel zu mühselig - allein die ganzen Punkte wieder manuell schließen zu müssen...:-(

        freundliche Grüße
        Ingo

        1. Hallo Ingo,

          Du verlangst hier arg viel von den Usern: ein gutes Auge, eine zielsichere Hand un ein verwacklungsfreies klicken - und das auch noch ohne Unterstützung durch einen Hover-Effekt.

          Nun, zumindest der Hover-Effekt ließe sich ja wohl auch noch einbauen. (farbig aufleuchtende Plus- und Minus-Zeichen). Danke für die Anregung!

          Ich weiß natürlich auch, dass dir die Schriftgröße in px nicht passt. Aber das lässt sich leider nicht vermeiden, da ich hier pixelmaße angeben muss, weil ich die gepunkteten Verbindungsliniern nun mal regelmäßig haben will. Wer eine durchgezugene Linie nimmt, mag aber auch auf relative Schriftgrößen umstellen. Das werde ich alles beschreiben, keine Sorge Ingo!

          Außerdem muß der User wissen, daß Untermenüs über das [+] aufgeklappt werden können - das kannst Du noch nicht einmal bei Windows-Usern voraussetzen, denn die klickem meist doppelt auf den Verzeichnisnamen.

          Mit dem Hovereffekt lässt sich das dann bestimmt erschließen.

          Davon abgesehen ist mir eine solche Lösung viel zu mühselig - allein die ganzen Punkte wieder manuell schließen zu müssen...:-(

          Einen zusätzlichen Button zum kompletten Auf- bzw. Zuklappen des Baums anzubieten, dürfte dann eigentlich auch eine leichte Übung sein. Auch hier Dank für die Anregung.

          Aber was ich eigentlich wissen möchte: Hast du denn irgendwelche Darstellungsfehler bemerkt? (unregelmäßig gepunktete Linien, nicht oder nur teilweise aufklappende Äste?)

          Gruß Gernot

          1. Hi,

            Nun, zumindest der Hover-Effekt ließe sich ja wohl auch noch einbauen. (farbig aufleuchtende Plus- und Minus-Zeichen). Danke für die Anregung!

            die man dann immer noch überfahren muß (um etwas zu bemerken) und zum Klicken treffen muß.

            Außerdem muß der User wissen, daß Untermenüs über das [+] aufgeklappt werden können - das kannst Du noch nicht einmal bei Windows-Usern voraussetzen, denn die klickem meist doppelt auf den Verzeichnisnamen.

            Mit dem Hovereffekt lässt sich das dann bestimmt erschließen.

            s.o.

            Aber was ich eigentlich wissen möchte: Hast du denn irgendwelche Darstellungsfehler bemerkt? (unregelmäßig gepunktete Linien, nicht oder nur teilweise aufklappende Äste?)

            nö. Hatte ich aber auch nur kurz im Firefox probiert.

            freundliche Grüße
            Ingo

            1. Hallo Ingo,

              Nun, zumindest der Hover-Effekt ließe sich ja wohl auch noch einbauen. (farbig aufleuchtende Plus- und Minus-Zeichen). Danke für die Anregung!
              die man dann immer noch überfahren muß (um etwas zu bemerken) und zum Klicken treffen muß.

              Nicht ganz: Es reicht, wenn du auf den gesamten Bereich unterhalb des Minuszeichens (Linie) triffts, um den Ast zuzuklappen. Ich habe das bisher als Bug betrachtet, aber vielleicht mache ich ein Feature daraus, indem ich auch die Linie Hovern lasse.

              Mit dem Hovereffekt lässt sich das dann bestimmt erschließen.
              s.o.

              Wenn was blinkt, dann misst der User dem auch intuitiv eine Bedeutung zu, davon gehe ich aus. Den zu treffenden Bereich kann man sich mit anderen (auch relativen Maßen) ja ach größer stellen, ggf. indem man später statt gepunkteter Linien, die Pixelmaße erfordern, damit sie regelmäßig erscheinen, durchgezogene Linien verwendet, wo dies nicht erforderlich sein wird.

              Hast du denn irgendwelche Darstellungsfehler bemerkt?

              nö. Hatte ich aber auch nur kurz im Firefox probiert.

              das ist ja schon mal gut zu wissen. Welches Betriebssystem hast du denn dazu?

              Weiteres Feedback und Anregungen, auch von anderen, insbesondere auch dann, wenn etwas an dem Baummenü nicht funktioniert oder merkwürdig wirkt, ist sehr willkommen. Ich will ja besser werden ...

              Gruß Gernot

              1. Hi,

                die man dann immer noch überfahren muß (um etwas zu bemerken) und zum Klicken treffen muß.

                Nicht ganz: Es reicht, wenn du auf den gesamten Bereich unterhalb des Minuszeichens (Linie) triffts, um den Ast zuzuklappen. Ich habe das bisher als Bug betrachtet, aber vielleicht mache ich ein Feature daraus, indem ich auch die Linie Hovern lasse.

                Würde ich nicht so lassen bzw. als Bug einstufen. Außerdem hilft das nicht beim Ausklappen (und wenn man das erstmal gecheckt hat, dürfte das [-] auch verstanden  sein.

                Wenn was blinkt, dann misst der User dem auch intuitiv eine Bedeutung zu, davon gehe ich aus.

                Nur wie hoch ist die Wahrscheinlichkeit, daß der User über dieses winzige + geht?

                Du gehst von "Programmierer"-Wissen aus. Letztens habe ich meiner Freunddin über die Schulter gesehen, als sie ein klassisches, bei mouseover nach rechts ausklappendes Submenü nutzen wollte. Ging nicht, weil sich der gewünsche Menüpunkt weiter unten befand und ein "normaler" Windows-User nicht unbedingt realisiert, daß man in so einem Aufklappmenü diagonal meist nicht weiter kommt.

                das ist ja schon mal gut zu wissen. Welches Betriebssystem hast du denn dazu?

                XP noch mit SP1.

                freundliche Grüße
                Ingo

      2. Hi,
        was mir als erstes aufgefallen ist das "nur" beim untersten punkt als auch das [+] mit weis unterlegt ist. ist das absicht?

        MfG

        1. Hallo Daniel,

          was mir als erstes aufgefallen ist das "nur" beim untersten punkt als auch das [+] mit weis unterlegt ist. ist das absicht?

          Ja, das muss so sein, weil der jeweils letzte LI-Unterpunkt die dem UL-Element an der an der linken Seite zugeordnete Strichel-Linie abdecken soll, denn da folgt ja dann kein weiterer Punkt.

          Das Plus bzw. Minus muss man aber sehen, falls das bei dir nicht der Fall sein sollte, wäre ich für einen Screenshot unter Angabe des/der Browser und des Betriebssystems dankbar.

          Gruß Gernot

          1. Hi,

            Das Plus bzw. Minus muss man aber sehen, falls das bei dir nicht der Fall sein sollte, wäre ich für einen Screenshot unter Angabe des/der Browser und des Betriebssystems dankbar.

            die seh ich, hab FF und WinXP(pro). also ich finde das unschön das beim
            untersten punkt auch das [+] bzw. das [-] weis unterlegt sind, vorallem
            wenn man es auklappt sieht es nichtmehr so schön aus. mag sein das ich
            mit dieser meinung alleine stehe. ich möchte dich und deine arbeit auch
            nicht kritisieren schließlich ist es ja eine Top-Sache wo du da gemacht
            hast und es gefällt mir auch sehr gut. nur ich empfinde es optisch
            leicht störend.

            MfG

            1. Hallo Daniel,

              ich habe was ganz Grundlegendes übersehen, und du hast mir jetzt wirklich mit deinem Hinweis weitergeholfen:

              Ich hatte dem Body-Element keine Farbe zugewiesen. Ich bin fälchlicherweise davon ausgegangen, dass sich alle User da sowieso Weiß einstellen. Ist es denn jetzt besser, nachdem ich die Hintergrundfarbe im Body-Element per CSS festgelegt habe?

              http://www.sprachlernspiele.de/selftests/klappmenue/tree.html

              Drück sicherheitshalber mal SHIFT + AKTUALISIEREN/RELOAD, damit nicht altes Gerümpel aus dem Cache kommt!

              Gruß Gernot

              1. Hi,

                ich habe was ganz Grundlegendes übersehen, und du hast mir jetzt wirklich mit deinem Hinweis weitergeholfen:

                tu ich immer wieder gerne

                Ich hatte dem Body-Element keine Farbe zugewiesen. Ich bin
                fälchlicherweise davon ausgegangen, dass sich alle User da sowieso
                Weiß einstellen. Ist es denn jetzt besser, nachdem ich die
                Hintergrundfarbe im Body-Element per CSS festgelegt habe?

                oh ja, bei mir ist nähmlich der stnd. hintergrund grau.

                Drück sicherheitshalber mal SHIFT + AKTUALISIEREN/RELOAD, damit nicht altes Gerümpel aus dem Cache kommt!

                naja, F5 hat bei mir gereicht. sieht so schonmal schöner aus. echt nettes "ding" was du da erstellt hast ein fettes lob. RESPEKT

                MfG

  3. Hi,

    Ich habe folgende Punkte:

    • Link1

    • Link2

    • Link3
      */ Action klick auf Link2 */

    • Link1

    • Link2
        - unterLink2.1
        - unterlink2.2
        - ...

    • Link3

    */ Action klick auf Link1 */

    • Link1
        - unterLink2.1
        - unterlink2.2
        - ...
    • Link2
    • Link3

    usw.

    dann würd ich das mit php machen, oder jeweils für jede möglichkeit mit untermenü eine seperate html seite erstellen und dann:

    <a href="unter_menue1.html">Link1</a>
    <a href="unter_menue2.html">Link2</a>

    und auf unter_menue1.html
    <a href="unter_menue1.html">Link1</a>
    <a href="anzeige1_1.html" target="content_frame_name">Link1.1</a>
    <a href="anzeige1_2.html" target="content_frame_name">Link1.2</a>
    <a href="unter_menue2.html">Link2</a>

    verstanden? gut.

    also nicht in Java oder so. PHP oder ähnliches möglichst auch nicht.
    Wie stelle ich das nun also am besten an, und in welcher Sprache?

    in PHP oder JS.

    Das Menü soll auch nicht großartig animiert sein. Einfach ein Mousover Effekt mit CSS oder so.

    Mousover-Effekt != klick
    bei einem "Mousover-Effekt" empfiehlt sich a:hover im css und dann mit visible weiterarbeiten.

    Für Hilfe oder Tipps bin ich sehr dankbar.

    Hoffe ich konte dir helfen, oder zumindest einen tipp geben. für rückfragen bin ich offen.

    MfG

  4. Hi,

    Ich möchte auf meiner HP eine Navigationsbar als Baumstruktur. Diese soll auf der Linken Seite in einem Frame eingebettet sein. Oder ist das in einem Frame nicht sinnvoll?

    Frames machen selten Sinn. Hierzu sind sie nicht nötig.

    Also wenn man auf einen "Hauptlink" klickt, soll dort Unterpunkte kommen.

    Schön. Also keines der leider oft gesehenen "Aufklapp"-Menüs, sondern so eines: http://de.selfhtml.org/css/layouts/anzeige/nav_ebenen.htm. Hierzu brauchst Du nur HTML und CSS.

    freundliche Grüße
    Ingo

  5. Hallo

    Erstmal vielen Dank für die schnelle Hilfe.

    Vorallem hat mir die Seite von Barney gefallen. Dies schaut echt relativ leicht aus, und verlangt (so schaut es auf die schnelle aus) keine grossen erwartungen von dem Web-Browser des Users und auch nicht vom Server.

    @Gernot Back.
    Diese Arte Baumstruktur finde ich auch etwas zu umständlich zu bedienen. Da muss man wirklich schon sehr genau klicken und auch wissen, dass es bei einem + auf geht. Aber ansonsten sehr übersichtlich

    Also vielen Dank für die hilfe...will das gleich mal ausprobieren.

    mfg
    kollekti