Gamewalker: CSS in Javascript

Hallo,

ich habe ein Css-Dropdown-Menu entwickelt und will dieses noch etwas verbessern.

Mit folgendem Code wird das Untermenu aufgerufen:
ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
    display:block;
}

Da in CSS ja nur ein hover möglich ist und kein onclick, muss ich das ganze ja zwangsweise in Javascript realisieren, meine Frage nun, was muss ich im Javascript schreiben damit der CSS-Code 1zu1 übereinstimmt?

Gamy

  1. Hallo Gamewalker,

    Mit folgendem Code wird das Untermenu aufgerufen:
    ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
    {
        display:block;
    }

    Da in CSS ja nur ein hover möglich ist und kein onclick, muss ich das ganze ja zwangsweise in Javascript realisieren, meine Frage nun, was muss ich im Javascript schreiben damit der CSS-Code 1zu1 übereinstimmt?

    Du könntest die Pseudoklasse active verwenden. Das würde dir den ganzen JavaScript-Code ersparen. ;-)

    Grüße

    Marc Reichelt || http://www.marcreichelt.de/

    --
    DPRINTK("Last time you were disconnected, how about now?");
            linux-2.6.6/drivers/net/tokenring/ibmtr.c
    Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
    1. Hallo,

      mit dem active kriege ich es nicht hin.

      http://game.code4everyone.de/v2/version2.html#

      da ist das Menu zu sehen, ich möchte es erreichen, dass wenn man oben auf einen Knopf drückt, das Item was angeklickt wurde schwarz wird mit weißem Font und dann unten das Menu fest ausfährt und bleibt.

      Gamy

      1. Hallo Gamewalker,

        mit dem active kriege ich es nicht hin.

        http://game.code4everyone.de/v2/version2.html#

        da ist das Menu zu sehen, ich möchte es erreichen, dass wenn man oben auf einen Knopf drückt, das Item was angeklickt wurde schwarz wird mit weißem Font und dann unten das Menu fest ausfährt und bleibt.

        Das war aus deiner Fragestellung heraus nicht erkennbar.
        Nun denn - du suchst eine dynamische CSS-Navigation. Und rein zufälligerweise steht auf SELFHTML, wie man so etwas hinbekommt:
        Dynamische CSS-Navigation für moderne Browser

        Da brauchst du kein JavaScript (und kein onclick) - und es ist elegant.

        Grüße

        Marc Reichelt || http://www.marcreichelt.de/

        --
        DPRINTK("Last time you were disconnected, how about now?");
                linux-2.6.6/drivers/net/tokenring/ibmtr.c
        Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
        1. Danke, ist mri nicht übern Weg gelaufen, werde mir das Beispiel mal ansehen

          1. sry, ich nochmal.

            Aus dem Beispiel geht mir leider nicht hervor das es auch möglich ist das dynamische Menu bei einem klick nur zu ändern, in dem Beispiel ist es ja bei einem hover. Ist das damit denn doch irgendwie möglich?

            1. Hallo Gamewalker,

              Aus dem Beispiel geht mir leider nicht hervor das es auch möglich ist das dynamische Menu bei einem klick nur zu ändern, in dem Beispiel ist es ja bei einem hover. Ist das damit denn doch irgendwie möglich?

              Stimmt, du wolltest ja das Menü nur bei einem Klick aufpoppen lassen.
              Dann musst du wohl oder (eher) übel auf JavaScript setzen. Was für mich unverständlich ist, denn 1. kommt die CSS-Lösung ohne JavaScript aus und 2. bedeutet das einen Klick weniger.

              Grüße

              Marc Reichelt || http://www.marcreichelt.de/

              --
              DPRINTK("Last time you were disconnected, how about now?");
                      linux-2.6.6/drivers/net/tokenring/ibmtr.c
              Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
              1. Hallo Marc,

                Aus dem Beispiel geht mir leider nicht hervor das es auch möglich ist das dynamische Menu bei einem klick nur zu ändern, in dem Beispiel ist es ja bei einem hover. Ist das damit denn doch irgendwie möglich?

                Stimmt, du wolltest ja das Menü nur bei einem Klick aufpoppen lassen.
                [...] Was für mich unverständlich ist, ...

                für mich nicht: Ich finde es auch immer sehr lästig, wenn irgendwo (meist unerwartet) etwas aufpoppt, ohne dass ich durch Klicken signalisiert habe, dass ich das wirklich möchte. Selbst Tooltipps empfinde ich manchmal als störend - dann nämlich, wenn große Teile der Fensterfläche tooltipp-sensitiv sind und ich die Maus kaum irgendwo plazieren kann, wo Ruhe ist.

                denn 1. kommt die CSS-Lösung ohne JavaScript aus und 2. bedeutet das einen Klick weniger.

                Deinen Punkt 1. sehe ich auch als zugkräftigen Pluspunkt; dein Punkt 2. ist für mich eher ein Minuspunkt.

                So long,
                 Martin

                --
                Bitte komme jemand mit einem *g* zum Wochenende, damit nicht über mich gelacht wird.
                  (Gunnar Bittersmann)
                1. Mir gehts darum das das Untermenu ganz links immer aufgeht, wenn man also im Hauptmenu ganz rechts ist und dann wieder nach ganz links muss und mal leicht auf abwegen hoch kommt mit der Maus, ist das Menu wieder weg, was meiner Meinung nach leicht passiert, da das Untermenu ziemlich klein ist

                  1. Hi,

                    Mir gehts darum das das Untermenu ganz links immer aufgeht, wenn man also im Hauptmenu ganz rechts ist und dann wieder nach ganz links muss und mal leicht auf abwegen hoch kommt mit der Maus, ist das Menu wieder weg, was meiner Meinung nach leicht passiert, da das Untermenu ziemlich klein ist

                    Dann mach es doch groesser, so dass es mehr Flaeche bietet, auf der ich mit meiner Maus herumfahren kann.

                    Denn auch mit der Klick-Loesung tust du Nutzern, die schlecht sehen oder motorische Einschraenkungen haben, keinen Gefallen, wenn du die anzuvisierende Flaeche winzig haeltst.

                    MfG ChrisB

              2. Hallo Marc,

                Dann musst du wohl oder (eher) übel auf JavaScript setzen. Was für mich unverständlich ist, denn 1. kommt die CSS-Lösung ohne JavaScript aus und 2. bedeutet das einen Klick weniger.

                das Problem bei reinen hover/mouseover-Menüs ist, dass es Systeme ohne Maus gibt, z.B. Apple iPhone/iPod touch. Da bist du mit Mouseover schnell am Ende.

                Gruß, Jürgen

  2. Hallo Gamewalker,

    ich habe ein Css-Dropdown-Menu entwickelt und will dieses noch etwas verbessern.

    Ich nehme an, dass im Menü links drin sind. Warum formatierst du dann nicht über die :active/:focus etc.-Pseudoklasse des Links.

    Jonathan