JPL: Problem mit Menü (bzgl. "position: fixed")

Aloha,

nach vielen Jahren das dahindümpeln, bin ich gerade dabei meine Homepage zu überarbeiten. Obwohl ich lange nicht mehr HTML/CSS/PHP programmiert habe, komm ich ganz gut vorran und es sieht alles aus wie es soll. Das ein oder andere kann man am Code sicher optimieren, aber da will ich mal fünfe gerade sein lassen :)

Momentan gibt es 2 Probleme, bei denen ich einfach nicht weiterkomme und mich schon sehr viele Nächte Recherche und vergeblichen programmierens gekostet hat...
:)

Also meine Seite ist prinzipiell aus 3 Spalten aufgebaut:

<div id="mittelspalte">...
<div id="rechtespalte">...
<div id="linkespalte">...

In der "rechten Spalte" befindet sich der jeweilige Inhalt, die "Mittelspalte" ist nur ein schmales Designelement, in der "linken Spalte" befindet sich das Navigationsmenü.

Das Problem macht mir nun eben diese Menüspalte. Da ich teilweise sehr lange Inhalte habe, habe ich die linke Spalte folgendermassen definiert:

#linkespalte {
            position: fixed;
            height: 100%;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
            width: 260px;
            background: #000000;
            border: 0px solid #00ff00;
            z-index:2;
            }

Funktioniert alles auch hervorragend... es sei denn, ein Teil des Menüs liegt außerhalb des Browserfensters, entweder, weil man das Browserfenster verkleinert hat, oder wenn sich gewisse Untermenüs komplett ausgeklappt haben und die Gesamthöhe des Menüs größer ist, also die Browserhöhe.

(Anmerkung: das Menü wird mit PHP dynamisch erstellt und je nachdem wie tief man in die Seitenstruktur eindringt, werden immer mehr Untermenüs "eingeschoben".)

Eigentlich wäre das ja auch kein Problem, da durch den langen Seiteninhalt der Browser eh einen Scrollbalken generiert. Doch es scrollt ja nur der Inhalt, das Menü bleibt stehen, auch wenn der untere Teil des Menüs außerhalb des Browserfensters liegt.

Meine Frage ist jetzt:

Gibt es für dieses Problem eine Lösung?
Oder muß ich tunlichst vermeiden, dass das Menü höher wird als heutige typische Bildschirmhöhen, damit es immer komplett angezeigt wird?
:)

Dankeschön!

Gruß
Jochen

  1. Aloha ;)

    Oder muß ich tunlichst vermeiden, dass das Menü höher wird als heutige typische Bildschirmhöhen, damit es immer komplett angezeigt wird?

    Heute typische Bildschirmhöhen sind ein Problem. Man denke an die Abart des Smartphone-Surfens.

    Besser also: Das Menü nicht größer werden lassen als eine bestimmte, von dir festgelegte Höhe. Alles, was kleiner ist, mit MediaQuery abfangen und z.B. mit absoluter Positionierung eine Art fallback einbauen.

    Grüße,

    RIDER

    --
    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
    ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
    1. Aloha

      Aloha ;)

      Oder muß ich tunlichst vermeiden, dass das Menü höher wird als heutige typische Bildschirmhöhen, damit es immer komplett angezeigt wird?

      Heute typische Bildschirmhöhen sind ein Problem. Man denke an die Abart des Smartphone-Surfens.

      Besser also: Das Menü nicht größer werden lassen als eine bestimmte, von dir festgelegte Höhe. Alles, was kleiner ist, mit MediaQuery abfangen und z.B. mit absoluter Positionierung eine Art fallback einbauen.

      Grüße,

      RIDER

      Danke für die schnelle Antwort.

      Die Frage ist jetzt aber, wie ich da Menü nicht größer werden lassen kann, als z. B. 800 Pixel, wenn durch die vielen auszuklappenden Untermenüs die Gesamthöhe (bei lesbarer Schrift ;) )auf z. B. 1200 Pixel anwächst?

      Ich will ja schon das gesamte Menü anzeigen lassen.

      Eine Alternative wäre ja, daß ich mich von meinem PHP-Menü verabschiede und ein Akkordeonmenü à la

      http://designyourweb.info/so-erstellst-du-ein-vertikales-css3-accordion-menu/914

      einbaue, doch das geht nur über 2 Ebenen und wenn man die dortigen Kommentare liest, klappt es wieder zu, wenn man einem Link aus den ausgeklappten Untermenüs folgt und man weiß nicht, wo man gerade ist.

      Ich geb es ganz offen zu:  HTML geht fließend, grundlegendes CSS für das Design einer Seite auch - aber wenn es um "höhere" CSS-Tricks (wie Pseudoklassen "Target") geht, kenn ich mich nicht wirklich aus...

      MfG,

      --
      JPL
      1. Aloha ;)

        Die Frage ist jetzt aber, wie ich da Menü nicht größer werden lassen kann, als z. B. 800 Pixel, wenn durch die vielen auszuklappenden Untermenüs die Gesamthöhe (bei lesbarer Schrift ;) )auf z. B. 1200 Pixel anwächst?

        Das wird (bis die von Matthias genannte Eigenschaft umgesetzt ist) wohl gar nicht funktionieren. Für die Zwischenzeit kannst du vielleicht mit Scrollbarkeit (overflow:auto) und Größenbegrenzung (max-height:100vh; bzw. weniger, wenn die Navi nicht oben fixiert ist) eine Übergangslösung oder ein Fallback bauen.

        Ich will ja schon das gesamte Menü anzeigen lassen.

        Eine Alternative wäre ja, daß ich mich von meinem PHP-Menü verabschiede und ein Akkordeonmenü à la

        http://designyourweb.info/so-erstellst-du-ein-vertikales-css3-accordion-menu/914

        einbaue, doch das geht nur über 2 Ebenen und wenn man die dortigen Kommentare liest, klappt es wieder zu, wenn man einem Link aus den ausgeklappten Untermenüs folgt und man weiß nicht, wo man gerade ist.

        Ich glaube, dass die ganze ursprüngliche Idee (zumindest momentan, siehe Matthias Antwort) utopisch ist. Wenn das Akkordeonmenü also eine Alternative ist, kannst dir das ja überlegen. Evtl. lässt sich das ja auf deine Bedürfnisse zuschneiden.

        Irgendwie ist die Navigation immer so ein Dauerbrenner-Thema :D Geht die eine, kommt die nächste. Aber naja, geht mir auch nicht so anders.

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
        1. Aloha

          Ich glaube, dass die ganze ursprüngliche Idee (zumindest momentan, siehe Matthias Antwort) utopisch ist. Wenn das Akkordeonmenü also eine Alternative ist, kannst dir das ja überlegen. Evtl. lässt sich das ja auf deine Bedürfnisse zuschneiden.

          das überlege ich schon die ganze Zeit. 2 Probleme scheint das Menü, wie im verlinkten Beispiel, zu haben:
           - es geht keine 3. Ebene
           - Klick auf die Hauptebene öffnet die verborgene Unterebene, aber Klick auf einen Link der Unterebene läd zwar die verlinkte Seite, aber schließt zugleich auch das Untermenü.... was unschön ist.

          Aktuell baue ich das Menü über PHP auf, je nach angeklicktem Menüpunkt, wird dann ein Untermenü eingefügt. Leider geht das nur, wenn hinter dem angeklickten Menüpunkt eine Seite steckt, die geladen wird, wegen den Variablen die übergeben werden müßen.

          Aktuell wäre es mir am liebsten, ich könnte das Hauptmenü und die erste Unterebene über PHP aufbauen (okay, das kann ich, so ist es ja auch schon bisher) - und daß dann nur die dritte Unterebene, die das Menü zu lang werden läßt, irgendwie dynamisch über CSS eingeblendet wird.

          Hm... muß ich drüber grübeln... :)

          MfG,

          --
          JPL
          1. Aloha ;)

            das überlege ich schon die ganze Zeit. 2 Probleme scheint das Menü, wie im verlinkten Beispiel, zu haben:

            • es geht keine 3. Ebene
            • Klick auf die Hauptebene öffnet die verborgene Unterebene, aber Klick auf einen Link der Unterebene läd zwar die verlinkte Seite, aber schließt zugleich auch das Untermenü.... was unschön ist.

            Hm. Ich sitz jetzt ausnahmsweise nicht vor dem Tablet und kann mir die verlinkte Seite dementsprechend genauer ansehen. Ich glaube ja, dass die beiden Probleme, die du ansprichst, dieselbe Ursache besitzen: Die technische Realisierung über :target ...

            Das Problem: Sobald ich etwas anderes anklicke, bekommt das geklickte a den "Fokus" (nicht falsch verstehen, hat nix mit focus zu tun). Das ist einerseits gut (denn ein anderer angeklickter Link klappt damit automatisch alles andere zu), hat aber den massiven Nachteil, dass beim Klick in die zweite Ebene auf einmal die erste nicht mehr mitselektiert werden kann. Außerdem zwingt es dich, einen entsprechenden Anker in der URL zu haben (nur so funktioniert target) - das ist weder schön noch Sinn und Zweck eines Ankers. Außerdem praxisuntauglich, weil jegliches Springen innerhalb deiner Seite per Anker zwangsläufig die Navigation zusammenfaltet.

            Okay. Reden wir darüber wie mans richtig macht. Ich glaube, ich gehe allen hier schon damit auf die Nerven, aber auch das geht per CSS mit dem Checkbox-Hack. (Vielleicht bist du ja der erste von den vielen, die ich in letzter Zeit mit diesem Link bedacht habe, ders tatsächlich mal ausprobiert :D). Und zwar nimmst du in deinem Fall statt den "checkboxen" für jede Navigationsebene eine Gruppe von Radiobuttons (die man übrigens nicht kompliziert aus dem Viewport schieben muss, sondern einfach mit display:none versehen kann). Damit kriegst du dann also folgendes: Sobald du einen Eintrag auswählst, gehen nur dessen Untereinträge auf und alle anderen offenen Meüs daneben (nicht die darüber) schließen sich (denn der checked-Status vom Radio-Button springt ja innerhalb der gruppierten Radiobuttons).

            Du gehst also her und baust dein Menü !komplett! per PHP auf. Und bei den Radiobuttons wählst du den der aktuellen Seite (und die direkt übergeordneten) als default-checked in ihrer Gruppe. Und schon kannst du munter drauflosklicken ;)

            Ich weiß gar nicht, warum keiner bisher meine Hinweise zum Checkbox-Hack ernst genommen hat ;)

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
            1. Aloha

              Okay. Reden wir darüber wie mans richtig macht. Ich glaube, ich gehe allen hier schon damit auf die Nerven, aber auch das geht per CSS mit dem Checkbox-Hack. (Vielleicht bist du ja der erste von den vielen, die ich in letzter Zeit mit diesem Link bedacht habe, ders tatsächlich mal ausprobiert :D). Und zwar nimmst du in deinem Fall statt den "checkboxen" für jede Navigationsebene eine Gruppe von Radiobuttons (die man übrigens nicht kompliziert aus dem Viewport schieben muss, sondern einfach mit display:none versehen kann). Damit kriegst du dann also folgendes: Sobald du einen Eintrag auswählst, gehen nur dessen Untereinträge auf und alle anderen offenen Meüs daneben (nicht die darüber) schließen sich (denn der checked-Status vom Radio-Button springt ja innerhalb der gruppierten Radiobuttons).

              Du gehst also her und baust dein Menü !komplett! per PHP auf. Und bei den Radiobuttons wählst du den der aktuellen Seite (und die direkt übergeordneten) als default-checked in ihrer Gruppe. Und schon kannst du munter drauflosklicken ;)

              Ich weiß gar nicht, warum keiner bisher meine Hinweise zum Checkbox-Hack ernst genommen hat ;)

              Grüße,

              RIDER

              bin deinem CSS-Hacklink gefolgt... ist für mich natürlich alles etwas abstrakt, solche CSS-Tricks, denn so fit bin ich mit CSS ja nicht, dass ich beim anschauen eines Codes sofort verstehe warum er was wo wie macht... aber beim lesen deines Links habe ich das hier entdeckt:
              http://www.thecssninja.com/css/css-tree-menu - ist soweit ich das sehe, eine weitere Nutzung dieses CSS-Hacks?
              Das geht ja sehr in die Richtung die ich suche... natürlich müßte man dieses Menü optisch etwas aufwerten... muß ich mir mal heute abend, nach der Arbeit, etwas genauer anschauen.
              :)

              MfG,

              --
              JPL
              1. bin deinem CSS-Hacklink gefolgt... ist für mich natürlich alles etwas abstrakt, solche CSS-Tricks, denn so fit bin ich mit CSS ja nicht, dass ich beim anschauen eines Codes sofort verstehe warum er was wo wie macht... aber beim lesen deines Links habe ich das hier entdeckt:
                http://www.thecssninja.com/css/css-tree-menu - ist soweit ich das sehe, eine weitere Nutzung dieses CSS-Hacks?
                Das geht ja sehr in die Richtung die ich suche... natürlich müßte man dieses Menü optisch etwas aufwerten... muß ich mir mal heute abend, nach der Arbeit, etwas genauer anschauen.
                :)

                Nachtrag: soweit ich das sehe, klappen aber auch hier die Menüs wieder komplett zusammen, wenn man einem Link folgt?

                MfG,

                --
                JPL
                1. Aloha ;)

                  aber beim lesen deines Links habe ich das hier entdeckt:
                  http://www.thecssninja.com/css/css-tree-menu - ist soweit ich das sehe, eine weitere Nutzung dieses CSS-Hacks?
                  Das geht ja sehr in die Richtung die ich suche... natürlich müßte man dieses Menü optisch etwas aufwerten... muß ich mir mal heute abend, nach der Arbeit, etwas genauer anschauen.

                  Ja, genau ;) Das von dir verlinkte Menü läuft über checkbox-Hack. Da du ein Akkordeon-Menü haben willst, solltest du aber - wie schon geschrieben - statt den checkboxen Radio-Buttons benutzen. Alle Radio-Buttons auf derselben Ebene bekommen denselben name (denn wenn ein Submenü offen ist, sollen die anderen auf dieser Ebene ja schließen). Alles andere (fast, siehe unten) läuft gleich.

                  Nachtrag: soweit ich das sehe, klappen aber auch hier die Menüs wieder komplett zusammen, wenn man einem Link folgt?

                  Genau. Weil die von dir verlinkte navi nicht optimal ist (die ist komplett statisch, ist ja auch nur ein HTML/CSS-basiertes Beispiel).

                  Du baust deine Navi ja komplett von oben bis unten mit PHP auf. Und PHP weiß (oder kann hearausfinden), welche Seite (bzw. Seiten - bei einer Unter-Unter-Seite ist ja auch die Unter-Seite und die Seite aktiv) gerade aktiv ist. Wenn PHP also deine Navi baut, kann es all jenen Checkboxen/Radio-Buttons, die zu einer aktiven Seite gehören, das Attribut checked verpassen. Und schon funktionierts ;)

                  Grüße,

                  RIDER

                  PS: Das, was ich dir mit PHP geschildert habe, _könnte_ man auch per Javascript clientseitig lösen, ich sehe aber keinen Grund dazu - schließlich steht dir PHP zur Verfügung. Und PHP passt für so ein Problem wie die Faust aufs Auge.

                  --
                  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                  ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                  1. Aloha

                    Genau. Weil die von dir verlinkte navi nicht optimal ist (die ist komplett statisch, ist ja auch nur ein HTML/CSS-basiertes Beispiel).

                    Du baust deine Navi ja komplett von oben bis unten mit PHP auf. Und PHP weiß (oder kann hearausfinden), welche Seite (bzw. Seiten - bei einer Unter-Unter-Seite ist ja auch die Unter-Seite und die Seite aktiv) gerade aktiv ist. Wenn PHP also deine Navi baut, kann es all jenen Checkboxen/Radio-Buttons, die zu einer aktiven Seite gehören, das Attribut checked verpassen. Und schon funktionierts ;)

                    so, erstmal Danke, dass du dich meiner hier so angenommen hast :-D

                    Aber ich verstehe noch nicht ganz wie ich vorgehen soll, also mit CSS. Liegt vielleicht auch daran, daß ich CSS etwas schwer "vorstellbar" finde, weil man da mit wenigen Befehlen alles wild herumschieben kann (unbeabsichtigt), da alle Folgeelemente sich an dem einen "falsch" positionierten Element ausrichten...
                    :D

                    PHP ist logisch :)

                    Hier mal ganz kurz, wie aktuell mein PHP-Menü aufgebaut ist (auszugsweise, für 2 Untermenüebenen):

                      
                    echo "                    <li><a class=\"hobbies\" href=\"/jochen-lipps.de/hobbies.php\" title=\"Meine Hobbies\">&nbsp;</a>";  
                    if ($menu!="hobbies") {echo "</li>\n";} else {  
                    echo "\n                        <ul id=\"untermenue1\">  
                                                <li><a href=\"/jochen-lipps.de/hobbies/kochen.php\" title=\"Kochen\">Kochen</a>";  
                    if ($menu2!="kochen") {echo "</li>\n";} else {  
                    echo "\n                                <ul id=\"untermenue2\">  
                                                            <li><a href=\"/jochen-lipps.de/hobbies/kochen/pizza.php\" title=\"Pizza Deluxe\">Pizza Deluxe</a></li>  
                                                            <li><a href=\"/jochen-lipps.de/hobbies/kochen/bohneneintopf.php\" title=\"Bohneneintopf\">Bohneneintopf</a></li>  
                                                            <li><a href=\"/jochen-lipps.de/hobbies/kochen/brot.php\" title=\"Brot\">Brot</a></li>  
                                                            </ul>  
                                                    </li>"; }
                    

                    Auf der jeweiligen Seite werden durch die Variablen $menu und $menu2 festgelegt, an welcher Position des Menüs sich der Besucher befindet...

                      
                    <?php  
                    $menu = "hobbies";  
                    $menu2 = "kochen";  
                      
                    include($_SERVER["DOCUMENT_ROOT"]."/fussteil.php");  
                    ?> 
                    

                    ...bevor dann die "fussteil.php" einkopiert wird, die das Menü enthält.
                    Also im Beispiel befindet sich der Besucher in der Rubrik "Hobbies" und im dort enthaltenen Untermenü "Kochen".

                    Vielleicht kann man das alles eleganter programmieren, aber es funktioniert seit 2008 :-)

                    Soweit ist das alles ja auch genauso wie ich es "will" - problem mit meinem jetzigen System ist halt, daß immer erst eine Seite geladen werden muß, bevor die beiden Menu-Variablen mit der Info fürs Menü gefüllt werden, an welcher Stelle die Untermenües ausgeklappt werden sollen und welcher nicht...

                    ...was mich zu dem Problem führt, dass ich auch für jedes Untermenü erst eine Seite erschaffen muß, bevor das Menü ausgeklappt angezeigt wird.

                    Das würde ich halt gerne umgehen, indem ich im Menü rumklicken kann, ohne dass eine Seite geladen werden muss...
                    :-)

                    MfG,

                    --
                    JPL
                    1. So, hab etwas weiter recherchiert und diese Seite gefunden:

                      http://bernholdtech.blogspot.de/2013/04/very-simple-pure-css-collapsible-list.html

                      Dort wird ein sehr simples Menü aufgebaut.

                      Hm... habe ich das soweit richtig verstanden, daß ich nach diesem Prinzip vorgehen sollte, dahingehend, dass ich mein Menü ohne meine ganzen PHP-Abfragen (ob oder ob ein Menü ausgeklappt werden soll oder nicht) als durchgehende verschachtelte Liste erstellen soll, dabei aber alle Untermenüs per Voreinstellung zugeklappt definiere - und wenn man dann einen Untermenüpunkt auswählt und die Seite geladen wird, durch PHP entsprechend zurückgibt, dass auch der Ast, in dem man sich gerade befindet, ausgeklappt dargestellt werden soll?

                      Dazu könnte man ja irgendwie die beiden $menu-Variablen mißbrauchen, die aktuell eh von jeder Seite zurückgegeben werden.
                      ?

                      1. Aloha ;)

                        Hm... habe ich das soweit richtig verstanden, daß ich nach diesem Prinzip vorgehen sollte, dahingehend, dass ich mein Menü ohne meine ganzen PHP-Abfragen (ob oder ob ein Menü ausgeklappt werden soll oder nicht) als durchgehende verschachtelte Liste erstellen soll, dabei aber alle Untermenüs per Voreinstellung zugeklappt definiere - und wenn man dann einen Untermenüpunkt auswählt und die Seite geladen wird, durch PHP entsprechend zurückgibt, dass auch der Ast, in dem man sich gerade befindet, ausgeklappt dargestellt werden soll?

                        Exakt, genau. Habe mir deinen Link jetzt nicht angesehen, aber was du schreibst ist genau das, was ich sagen wollte. Die gesamte Liste per php auf jeder Seite ausgeben und das Aufklappen per Voreinstellung regeln.

                        Wenn ich mir das in Bezug auf deine Realisierung nochmal anschauen soll, musst du dich gedulden, bis ich zuhause an meinem PC bin. An der Uni ist mein Gehirn leistungsfähig und das Tablet tipp-geeignet aber meine konkreten Entwickler-Skills durch den mobilen Browser eingeschränkt^^

                        Grüße,

                        RIDER

                        --
                        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                        1. Aloha

                          Aloha ;)

                          Hm... habe ich das soweit richtig verstanden, daß ich nach diesem Prinzip vorgehen sollte, dahingehend, dass ich mein Menü ohne meine ganzen PHP-Abfragen (ob oder ob ein Menü ausgeklappt werden soll oder nicht) als durchgehende verschachtelte Liste erstellen soll, dabei aber alle Untermenüs per Voreinstellung zugeklappt definiere - und wenn man dann einen Untermenüpunkt auswählt und die Seite geladen wird, durch PHP entsprechend zurückgibt, dass auch der Ast, in dem man sich gerade befindet, ausgeklappt dargestellt werden soll?

                          Exakt, genau. Habe mir deinen Link jetzt nicht angesehen, aber was du schreibst ist genau das, was ich sagen wollte. Die gesamte Liste per php auf jeder Seite ausgeben und das Aufklappen per Voreinstellung regeln.

                          Wenn ich mir das in Bezug auf deine Realisierung nochmal anschauen soll, musst du dich gedulden, bis ich zuhause an meinem PC bin. An der Uni ist mein Gehirn leistungsfähig und das Tablet tipp-geeignet aber meine konkreten Entwickler-Skills durch den mobilen Browser eingeschränkt^^

                          Habe mir inzwischen auch weitere Gedanken gemacht. Im Grunde wird ja immer dann, wenn in einem <li>... </li> Element mit <ul>...</ul> ein (weiteres) Untermenü eingebaut wird, dieses <ul>...</ul>-Element weggeklappt.

                          Eigentlich muss in jedem dieser Elemente, im Defintionsbereich, eine kleine IF-PHP-Schleife stehen.

                          Für die erste Untermenüebene:

                          if ($menu!="aktiv") {echo "class=\"aufgeklappt\"";} else {echo "class=\"zugeklappt\""}

                          Für die zweite Untermenüebene entsprechend:

                          if ($menu!="aktiv2") {echo "class=\"aufgeklappt\"";} else {echo "class=\"zugeklappt\""}

                          Im CSS werden dann entsprechend die beiden Klassen

                          .aufgeklappt {display: block;}

                          und

                          .zugeklappt {display: none;}

                          definiert.

                          Das nur so als erste Idee... bin ich auf dem richtigen Weg damit?
                          :)

                          MfG,

                          --
                          JPL
                          1. Om nah hoo pez nyeetz, JPL!

                            Könntest du bitte diese überaus störenden Vollzitate unterlassen? Danke.

                            Matthias

                            --
                            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Park und Parkinson.

                          2. Aloha ;)

                            Eigentlich muss in jedem dieser Elemente, im Defintionsbereich, eine kleine IF-PHP-Schleife stehen.

                            Für die erste Untermenüebene:

                            if ($menu!="aktiv") {echo "class=\"aufgeklappt\"";} else {echo "class=\"zugeklappt\""}

                            Für die zweite Untermenüebene entsprechend:

                            if ($menu!="aktiv2") {echo "class=\"aufgeklappt\"";} else {echo "class=\"zugeklappt\""}

                            Im CSS werden dann entsprechend die beiden Klassen

                            .aufgeklappt {display: block;}

                            und

                            .zugeklappt {display: none;}

                            definiert.

                            Das nur so als erste Idee... bin ich auf dem richtigen Weg damit?

                            Ja und Nein. Die if-Abfrage ist richtig, die Geschichte mit den Klassen nicht. Bedenke: ob auf- oder zugeklappt entscheidet keine Klasse, sondern der Status der Radiobuttons.

                            Du hast also die folgende Struktur in php:

                            echo '<ul>';  
                              
                            echo '<li><input type="radio" name="navi_1" id="navi_1_1" class="hackbox"';  
                              
                            if ( $menu == "aktiv") {  
                                echo " checked";  
                            }  
                              
                            echo '><label for="navi_1_1">+/-</label>&nbsp;<a href="...">Linktext</a>';  
                              
                            echo '<ul>'  
                              
                            ...  
                              
                            echo '</ul></li>';  
                              
                            ...  
                              
                            echo '</ul>';  
                            
                            

                            navi_1 weil Untermenü, navi_2 wäre Unter-Untermenü...

                            CSS:

                            .hackbox {display:none;}  
                              
                            ul ul { display:none; }  
                              
                            .hackbox:checked ~ ul { display:block; }  
                            
                            

                            Du erhältst: Alle ul, die in einer ul stehen, sind ausgeblendet. Alle ul, die neben einer angewählten .hackbox stehen, sind eingeblendet. Das Anwählen der .hackbox erfolgt über das Anklicken des Labels, die Radiobuttons selbst sind unsichtbar.

                            In einer verbesserten Version kannst du diese Label statt mit langweiligem +/- mit einem div versehen, das ein Hintergrundbild per CSS bekommt: Je nachdem, ob das Submenü offen oder geschlossen ist, ein Bild mit nem + oder eins mit nem -.

                            Noch eins - mach dir Gedanken über Effizienz. Die Navi aus einzelnen php-Segmenten zusammenbauen zu lassen, die du alle in Handaebeit schreibst, ist nicht sinnvoll. Bilde stattdessen besser deine Navigationsstruktur in einem multidimensionalen Array ab und lass deine Navigation daraus in einem Zusammenspiel aus rekursiven Funktionen und Schleifen erstellen. Wenn du das nicht eh schon machst und den Code hier nur eingestampft hast ;)

                            Grüße,

                            RIDER

                            --
                            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                            1. Aloha

                              Ja und Nein. Die if-Abfrage ist richtig, die Geschichte mit den Klassen nicht. Bedenke: ob auf- oder zugeklappt entscheidet keine Klasse, sondern der Status der Radiobuttons.

                              So, ich dachte zwar ich hätte das mit den Radiobuttons und den Checkboxes noch richtig in Erinnerung... aber dem war nicht so. Hab mich jetzt nochmal in die Themen eingelesen (auf dieser wunderbaren Seite ;) ) und jetzt versteh ich auch wieder, warum du von Anfang an so viel Wert auf RADIO statt CHECK gelegt hast:

                              „Alle Radio-Buttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren. “

                              vs.

                              „Alle Checkboxen, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Elementen kann der Anwender keines, eines oder mehrere ankreuzen.“

                              Checkboxen bleiben alle auf... Radiobuttons gehen zu, wenn ein anderer gewählt wird.
                              :)

                              CSS:

                              .hackbox {display:none;}

                              ul ul { display:none; }

                              .hackbox:checked ~ ul { display:block; }

                                
                              
                              > Du erhältst: Alle ul, die in einer ul stehen, sind ausgeblendet. Alle ul, die neben einer angewählten .hackbox stehen, sind eingeblendet. Das Anwählen der .hackbox erfolgt über das Anklicken des Labels, die Radiobuttons selbst sind unsichtbar.  
                                
                              Hab deine Codeentwürfe eingebaut... funktioniert ohne grafische Optimierungen soweit erstmal ganz hervorragend. Dankeschön!  
                                
                              Frage: das habe ich schon richtig verstanden - solange man nur im Menü rumklicked und keine neue Seite wählt, bleiben Radiobuttons des gleichen Namens ausgewählt. Also wenn ich im "Untermenü 1" das "Unteruntermenü 1" aufklicke und danach das "Untermenü 2" wähle, also das "Untermenü 1" wieder zuklappt... und dann wieder "Untermenü 1" anklicke, dann ist dort bereits das zuvor angeklickte "Unteruntermenü 1" als Vorauswahl geöffnet.  
                                
                              Ich denk mal, das ist technisch nicht vorgesehen, dass man Radiobuttons einer untergeordneten Ebene "unchecken" kann, wenn man eine übergeordnete Ebene anklickt.  
                                
                                
                              
                              > Noch eins - mach dir Gedanken über Effizienz. Die Navi aus einzelnen php-Segmenten zusammenbauen zu lassen, die du alle in Handaebeit schreibst, ist nicht sinnvoll. Bilde stattdessen besser deine Navigationsstruktur in einem multidimensionalen Array ab und lass deine Navigation daraus in einem Zusammenspiel aus rekursiven Funktionen und Schleifen erstellen. Wenn du das nicht eh schon machst und den Code hier nur eingestampft hast ;)  
                                
                              Ja, da sprichst du was an...  
                              :)  
                                
                              Ich sags mal so: als ich die Seite ursprünglich mit PHP, HTML, CSS aufgebaut habe, im Jahre 2008, war ich selber noch an der Uni und hatte sehr viel Zeit mich mit all diesen Programmier- und Scriptsprachen zu beschäftigen. Damals war das Menü selbst auch noch sehr überschaubar, deshalb hat es sich nicht gelohnt für die paar Punkte eine rekursive Funktion zu schreiben.  
                                
                              Nach dem Studium war dann keine Zeit mehr für solche Sachen bzw. wenn man ja ein bestehendes, funktionierendes Menü hat, ist es dann natürlich einfach und bequem, wenn man eine neue Seite einfach mit einer neuen Zeile <li>...</li> einbauen kann...  
                              :)  
                                
                              MfG,  
                              
                              -- 
                              JPL
                              
                              1. Aloha ;)

                                Frage: das habe ich schon richtig verstanden - solange man nur im Menü rumklicked und keine neue Seite wählt, bleiben Radiobuttons des gleichen Namens ausgewählt. Also wenn ich im "Untermenü 1" das "Unteruntermenü 1" aufklicke und danach das "Untermenü 2" wähle, also das "Untermenü 1" wieder zuklappt... und dann wieder "Untermenü 1" anklicke, dann ist dort bereits das zuvor angeklickte "Unteruntermenü 1" als Vorauswahl geöffnet.

                                Das hast du richtig verstanden. Und damit den ersten Schwachpunkt von zwei im System entdeckt ;) Der zweite ist: Sobald ein Submenü geöffnet ist, können nicht wieder alle geschlossen werden (das wäre aber mit der +/- Schaltfläche das Verhalten, das User erwarten).

                                Mir fallen da zwei Kniffe ein, die man anwenden kann - den ersten habe ich aus gutem Grund im Codebeispiel schon mit verarbeitet.

                                1.: (Das haben wir schon) Die Radiobuttons sollten nicht pro (Unter-)Menü eindeutig benannt sein, sondern explizit per Ebene. Das hat folgenden Effekt: Ich wähle zunächst Submenü 1, dann Subsubmenü 1-3. Dann wähle ich Submenü 2. Du hast Recht - obwohl unsichtbar ist Subsubmenü 1-3 noch "offen". Sobald ich aber Subsubmenü 2-3 ausrufe geht damit auch automatisch das unsichtbare 1-3 auf "zu". Das ist noch nicht optimal, aber schonmal besser als das Verhalten, wenn die Radiobuttons einen Name pro Submenü und nicht pro Ebene hätten.

                                Ich denk mal, das ist technisch nicht vorgesehen, dass man Radiobuttons einer untergeordneten Ebene "unchecken" kann, wenn man eine übergeordnete Ebene anklickt.

                                Da hast du vollkommen Recht. Deshalb - weil nativ nicht möglich, bauen wir das in Möglichkeit 2 mit Javascript nach (als Komfortfunktion für alle User mit angeschaltetem Javascript):

                                2.: Javascript Eigenbau. Wir registrieren für jede Checkbox eine onclick Funktion, die die gewünschten Funktionalitäten nachrüstet:

                                \\ Beim Klicken muss all das passieren, was  
                                \\ passieren soll und nativ NICHT passiert  
                                  
                                function hackboxclick(elm) {  
                                  
                                    \\ wenn das eigene Submenü offen ist, dann schließen (+/- Funktionalität)  
                                    if (elm.checked) elm.checked = false;  
                                  
                                    \\ alle offenen Unterebenen zurücksetzen  
                                    var appendix = '_';  
                                    var i = 1;  
                                    var nelm = false;  
                                  
                                    while (nelm = document.getElementById(this.id+appendix+i) {  
                                        \\ rekursiver Aufruf:  
                                        \\ Schließen einer Unterebene tut dasselbe wie hackboxclick für die hackbox  
                                        hackboxclick(nelm);  
                                        i++;  
                                    }  
                                  
                                }  
                                  
                                \\ seit querySelector (bzw. querySelectorAll) in JavaScript standardisiert ist muss man  
                                \\ weder jQuery benutzen, noch umständliche Wege gehen  
                                var elms = document.querySelectorAll('.hackbox');  
                                  
                                for (var i = 0; i < elms.length; i++) {  
                                    elms[i].addEventListener(hackboxclick(this));  
                                }  
                                
                                

                                Der Code ist wie immer nicht getestet ;) Logik stimmt, Syntax- oder Notationsfehler nicht ausgeschlossen ;)

                                Ich sags mal so: als ich die Seite ursprünglich mit PHP, HTML, CSS aufgebaut habe, im Jahre 2008, war ich selber noch an der Uni und hatte sehr viel Zeit mich mit all diesen Programmier- und Scriptsprachen zu beschäftigen. Damals war das Menü selbst auch noch sehr überschaubar, deshalb hat es sich nicht gelohnt für die paar Punkte eine rekursive Funktion zu schreiben.

                                Nach dem Studium war dann keine Zeit mehr für solche Sachen bzw. wenn man ja ein bestehendes, funktionierendes Menü hat, ist es dann natürlich einfach und bequem, wenn man eine neue Seite einfach mit einer neuen Zeile <li>...</li> einbauen kann...

                                Ja, ja, die Altlasten :D die hängen uns allen hinterher :D aber sei froh - du bist wenigstens prinzipiell aufgeschlossen genug was daran zu ändern, es gibt genügend Leute, die an sowas ewig festhalten ;)

                                Grüße,

                                RIDER

                                --
                                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                1. Moin,

                                  \ Beim Klicken muss all das passieren, was

                                  \ passieren soll und nativ NICHT passiert

                                  function hackboxclick(elm) {

                                  \ wenn das eigene Submenü offen ist, dann schließen (+/- Funktionalität)
                                      if (elm.checked) elm.checked = false;
                                  [...]

                                  
                                  >   
                                  > Der Code ist wie immer nicht getestet ;)  
                                    
                                  das dachte ich mir. Sonst würden dir nämlich ein paar Syntaxfehler um die Ohren fliegen.  
                                    
                                  Wie kommst du darauf, den doppelten \_Back\_slash als Kommentar-Begrenzer zu verwenden? Einzeilige Kommentare werden in Sprachen mit C-ähnlicher Syntax seit Ewigkeiten mit // eingeleitet.  
                                    
                                  
                                  > Logik stimmt, Syntax- oder Notationsfehler nicht ausgeschlossen ;)  
                                    
                                  Jaja ... ;-)  
                                    
                                  Ciao,  
                                   Martin  
                                  
                                  -- 
                                  Der Klügere gibt solange nach, bis er der Dumme ist.  
                                  Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                                  
                                  1. Aloha ;)

                                    Wie kommst du darauf, den doppelten _Back_slash als Kommentar-Begrenzer zu verwenden? Einzeilige Kommentare werden in Sprachen mit C-ähnlicher Syntax seit Ewigkeiten mit // eingeleitet.

                                    :D reine Dummheit. Sowas passiert, wenn man selbst keine Zeit mehr zum real coden hat und vollkommen aus der Übung ist :D ich bekenne mich absolut schuldig.

                                    Logik stimmt, Syntax- oder Notationsfehler nicht ausgeschlossen ;)

                                    Jaja ... ;-)

                                    Asche auf mein greises Haupt :D

                                    Zu meiner Verteidigung: meine andauernde Tablet-Nutzung macht aus einfach mal testen nen Riesen-Act. Es ist schon ein Kraftakt überhaupt Code-Beispiele zu entwerfen :D Daheim am PC gienge es schneller, effizienter und richtiger :D Aber dann könnte ich nicht derart schnell antworten :D

                                    Grüße,

                                    RIDER

                                    --
                                    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                    ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                    1. Hi,

                                      Logik stimmt, Syntax- oder Notationsfehler nicht ausgeschlossen ;)
                                      Jaja ... ;-)
                                      Asche auf mein greises Haupt :D

                                      Zu meiner Verteidigung: meine andauernde Tablet-Nutzung macht aus einfach mal testen nen Riesen-Act. Es ist schon ein Kraftakt überhaupt Code-Beispiele zu entwerfen :D Daheim am PC gienge es schneller, effizienter und richtiger :D Aber dann könnte ich nicht derart schnell antworten :D

                                      ja, schon okay. Kann ich nachvollziehen. Ich wollte trotzdem mal auf den Fehler hinweisen, zumal er mir in ein oder zwei anderen Postings von dir mit Code-Beispielen auch schon aufgefallen ist.

                                      Davon abgesehen ...

                                      gienge es schneller

                                      Autschn. Das ginge ohne überzähliges 'e' noch schneller. :-P

                                      Ciao,
                                       Martin

                                      --
                                      In der Theorie stimmen Theorie und Praxis genau überein.
                                      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                                  2. Aloha

                                    Der Code ist wie immer nicht getestet ;)
                                    das dachte ich mir. Sonst würden dir nämlich ein paar Syntaxfehler um die Ohren fliegen.

                                    Logik stimmt, Syntax- oder Notationsfehler nicht ausgeschlossen ;)
                                    Jaja ... ;-)

                                    da es mir scheint, dass du dich mit Javascript gut auskennst (ich nämlich absolut gar nicht) - könntest du den Code vielleicht von den Fehlerchen befreien und hier reinstellen?
                                    Dankeschön!
                                    :-)

                                    MfG,

                                    --
                                    JPL
                                    1. Aloha ;)

                                      Nur als kurze Info an Alle, nicht dass sich hier Menschen unnötig doppelt Arbeit machen: Ich mache daraus jetzt ein lauffähiges Minimalbeispiel (oder auch nicht ganz so minimal?). Ist zwar eigentlich nicht meine Art, aber in diesem Fall vielleicht günstiger, als noch und nöcher Code-Beispiele zusammenzuwürfeln, die so oder so erst aufeinander abgestimmt werden müssten.

                                      Dauert halt n bisschen.

                                      Grüße,

                                      RIDER

                                      --
                                      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                2. Aloha

                                  Der Code ist wie immer nicht getestet ;) Logik stimmt, Syntax- oder Notationsfehler nicht ausgeschlossen ;)

                                  Danke für den prinzipiellen Code, da ich von Javascript 0 % Ahnung habe... muss ich mal gucken, ob dein "Code-Kritiker" ;) dein Konzept von den Fehlerchen befreit und hier reinstellt :)

                                  Ja, ja, die Altlasten :D die hängen uns allen hinterher :D aber sei froh - du bist wenigstens prinzipiell aufgeschlossen genug was daran zu ändern, es gibt genügend Leute, die an sowas ewig festhalten ;)

                                  Habe viel über den rekursive Aufbauprinzip nachgedacht. So charmant es natürlich ist, die Seitenstruktur nach HTML bzw. PHP-Seiten durchsuchen zu lassen, die in einen Array zu stellen und dann mit geschickter Abfrage ("alle Seiten, die im Ordner XYZ enthalten sind, unter dem Menüpunkt XYZ als Untermenü einfügen"), wird das bei meiner Ordnerstruktur und all den verborgenen Unterebenen, die kein "normaler" Besucher sehen soll, sondern nur mir als Admin zugängig sind, sehr schwierig... bzw. dürfte so viele IF ELSE Abfragen nach sich ziehen, dass der Code letztendlich komplizierter werden dürfte als eine händische Lösung.

                                  Außerdem finde ich in so einem Fall, also eines Menüs, es auch sehr charmant auf einen Blick die Struktur zu erkennen... was bei einer rekursiven Routine doch etwas schwer fällt ;)

                                  MfG,

                                  --
                                  JPL
                                3. Aloha

                                  1.: (Das haben wir schon) Die Radiobuttons sollten nicht pro (Unter-)Menü eindeutig benannt sein, sondern explizit per Ebene. Das hat folgenden Effekt: Ich wähle zunächst Submenü 1, dann Subsubmenü 1-3. Dann wähle ich Submenü 2. Du hast Recht - obwohl unsichtbar ist Subsubmenü 1-3 noch "offen". Sobald ich aber Subsubmenü 2-3 ausrufe geht damit auch automatisch das unsichtbare 1-3 auf "zu". Das ist noch nicht optimal, aber schonmal besser als das Verhalten, wenn die Radiobuttons einen Name pro Submenü und nicht pro Ebene hätten.

                                  so, der grundlegende Aufbau (abgesehen vom Javascript-Trick, den ich mangels Javakenntnissen noch nicht umsetzen konnte), klappt das mit dem Menü in der ersten Ebene (die zweite habe ich noch nicht berücksichtigt), also mit der Variablenübergabe, dass das Untermenü ausgeklappt bleibt, wenn man einen entsprechenden Link aus dem Untermenü gewählt hat.
                                  :)

                                  Gehts jetzt also zu den Feinheiten...

                                  Es war für mich jetzt zwar kein Problem, die <li>...</li> der Hauptmenüebene (und damit auch die entsprechenden Untermenüs) individuell einzufärben... aber eben nur permament.

                                  Dieses Akkordeonmenü färbt die ja erst ein, wenn sie durch einen Klick ausgewählt wurden. Dazu wird im Quellcode ja mit TARGETS gearbeitet:

                                  nav ul li#home:target a, nav ul li#home:target > ul li a{  
                                      background-color: #E6DD00;  
                                  }  
                                  nav ul li#ueber-uns:target a, nav ul li#ueber-uns:target > ul li a{  
                                      background-color: #8CB302;  
                                  }  
                                  nav ul li#leistungen:target a, nav ul li#leistungen:target > ul li a{  
                                      background-color: #008C74;  
                                  }  
                                  nav ul li#referenzen:target a, nav ul li#referenzen:target > ul li a{  
                                      background-color: #004C66;  
                                  }  
                                  nav ul li#kontakt:target a, nav ul li#kontakt:target > ul li a{  
                                      background-color: #332B40;  
                                  }  
                                  nav ul li:target > a {  
                                      color: #FAFAFA;  
                                  }
                                  

                                  ...TARGETS, die es in unserer Lösung ja nicht gibt.

                                  Mit

                                  li:hover

                                  kann ich die einzelnen Menüblöcke zwar einfärben, wenn die Maus drüber fährt, aber das ist ja nicht das gleiche.

                                  Kennst du da einen Trick, wie man das auch mit unserem Menü machen kann?

                                  Eine andere Frage ist das elegante Rein- und raussliden der Untermenüs.

                                  Bei diesem Akkordeonmenü steht in der Beschreibung:

                                  CSS3 bietet hierfür Transitions die auf Änderungen verschiedener CSS Attribute angesetzt werden können. Für unser Beispiel soll die Höhe der Untermenüs von 0px zu auto variieren.

                                  Das sind dann konkret so aus:

                                  nav ul li ul{  
                                      max-height: 0px;  
                                      overflow: hidden;  
                                    
                                      -webkit-transition: max-height 0.3s ease-out;  
                                      -moz-transition: max-height 0.3s ease-out;  
                                      -o-transition: max-height 0.3s ease-out;  
                                      -ms-transition: max-height 0.3s ease-out;  
                                      transition: max-height 0.3s ease-out;  
                                  }  
                                  nav ul li:target > ul {  
                                      max-height: 200px;  
                                  }
                                  

                                  Nur bei unserem RADIOBUTTON-Menü arbeiten wir ja nicht mit "heights"...

                                  Aber vielleicht ist das ganze wieder so offensichtlich, dass ich jetzt grad nur nicht draufkomm, weil ich jetzt schon stundenlang den Code betrachte und ausprobiere...
                                  :)

                                  Gruß
                                  Jochen

                                  1. Aloha ;)

                                    Sotele. Ich hab jetzt alle meine Codebeispiele zusammengesetzt, lauffähig gemacht, Logik und Fehler ausgemerzt und hab eine kleine, lauffähige Version zusammengestellt:

                                    Diese findest du in JSFiddle.

                                    Ich hoffe, dass du aus diesem voll funktionstüchtigen Beispiel alles rauslesen kannst, was du sonst noch so benötigst. Und bevor Fragen aufkommen: Nein, ich kann und werde das in Zukunft nicht in jedem Thread so ausführlich machen ;) Das war jetzt ne absolute Ausnahme wegen eigenem akademischen Interesse ;)

                                    Grüße,

                                    RIDER

                                    @Matthias Apsel et al:
                                    Vielleicht lohnt es, den Checkbox-Hack im Rahmen des Wiki zu thematisieren. Schließlich ist der Checkbox-Hack kein Hack an sich, sondern ein CSS-Feature, das solange seinen Dienst tut, wie es die Pseudoklasse :checked gibt. Es ist also anzunehmen, dass das für immer ein Feature bleibt. Da es bis dato keine andere Möglichkeit gibt, per CSS ordentlich auf Klick-Events zu reagieren ist dies auch nach wie vor die einzige Möglichkeit, um nur mit purem CSS Klickevents aufzugreifen.

                                    Aufgrund dieser tatsächlich gegebenen Relevanz finde ich, dass das Ganze im Kapitel CSS/Anwendung und Praxis einen Artikel verdient hat. (Oder woanders?) Ein konkretes Realisierungsbeispiel haben wir ja jetzt auch. Da ich - was das angeht - momentan sehr in der Materie drin bin, kann ich auch gerne die Seite anlegen und neben dem komplexen Beispiel von oben noch einfachere Beispiele einstreuen. Ich hätte aber gerne von fachlicher Seite her zunächst die Freigabe dafür und ein Statement, wo und wie ich das einordnen soll...

                                    --
                                    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                    ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                    1. Aloha

                                      Sotele. Ich hab jetzt alle meine Codebeispiele zusammengesetzt, lauffähig gemacht, Logik und Fehler ausgemerzt und hab eine kleine, lauffähige Version zusammengestellt:

                                      Diese findest du in JSFiddle.

                                      Ich hoffe, dass du aus diesem voll funktionstüchtigen Beispiel alles rauslesen kannst, was du sonst noch so benötigst. Und bevor Fragen aufkommen: Nein, ich kann und werde das in Zukunft nicht in jedem Thread so ausführlich machen ;) Das war jetzt ne absolute Ausnahme wegen eigenem akademischen Interesse ;)

                                      Wow, super, ist toll geworden das Menü. Bin schon dabei den Code zu analysieren bzw. einzubauen und zu gucken was genau was macht.

                                      Bei einigen Sachen... wenn man weiß WIE man sie machen muß... habe ich schon gemerkt, dass ich ein paar Jahre gar nicht mit CSS "gespielt" habe... daß man bei "transition" natürlich "100vh" angeben muß und man mit absoluten Angaben nicht weit kommt... da wäre ich alleine gar nicht mehr draufgekommen...

                                      Aber du beschäftigst dich mit CSS bzw. Programmierung schon beruflich?

                                      @Matthias Apsel et al:
                                      Vielleicht lohnt es, den Checkbox-Hack im Rahmen des Wiki zu thematisieren. Schließlich ist der Checkbox-Hack kein Hack an sich, sondern ein CSS-Feature, das solange seinen Dienst tut, wie es die Pseudoklasse :checked gibt. Es ist also anzunehmen, dass das für immer ein Feature bleibt. Da es bis dato keine andere Möglichkeit gibt, per CSS ordentlich auf Klick-Events zu reagieren ist dies auch nach wie vor die einzige Möglichkeit, um nur mit purem CSS Klickevents aufzugreifen.

                                      Aufgrund dieser tatsächlich gegebenen Relevanz finde ich, dass das Ganze im Kapitel CSS/Anwendung und Praxis einen Artikel verdient hat. (Oder woanders?) Ein konkretes Realisierungsbeispiel haben wir ja jetzt auch. Da ich - was das angeht - momentan sehr in der Materie drin bin, kann ich auch gerne die Seite anlegen und neben dem komplexen Beispiel von oben noch einfachere Beispiele einstreuen. Ich hätte aber gerne von fachlicher Seite her zunächst die Freigabe dafür und ein Statement, wo und wie ich das einordnen soll...

                                      Wäre ich absolut dafür, ist ein Top Menü, noch dazu sehr schlank und übersichtlich programmiert - und als "von Zeit zu Zeit" CSS Nutzer, kommt man nicht auf solch eine elegante Menülösung, vor allem wenn dazu noch ein kleines Javascript-Script notwendig ist :)

                                      MfG,

                                      --
                                      JPL
                                      1. Aloha ;)

                                        Wow, super, ist toll geworden das Menü. Bin schon dabei den Code zu analysieren bzw. einzubauen und zu gucken was genau was macht.

                                        Bei einigen Sachen... wenn man weiß WIE man sie machen muß... habe ich schon gemerkt, dass ich ein paar Jahre gar nicht mit CSS "gespielt" habe... daß man bei "transition" natürlich "100vh" angeben muß und man mit absoluten Angaben nicht weit kommt... da wäre ich alleine gar nicht mehr draufgekommen...

                                        Ja, stimmt. Ging mir aber vor etwa nem halben Jahr genauso. Ich war bis dato etwas abstinent und wurde dann von den Möglichkeiten von CSS3 erschlagen :D

                                        Aber du beschäftigst dich mit CSS bzw. Programmierung schon beruflich?

                                        Ne, bin nur interessierter Laie. Ich hab mich vor einiger Zeit entschieden, mein Hobby nicht zum Beruf zu machen und stattdessen doch Lehrer zu werden. Seither studier ich Mathe und Pysik und bereue die Entscheidung immer wieder - nicht, weil ich nicht Lehrer werden will, sondern weil mir das Informatikstudium doch bestimmt so viel einfacher fallen würde :D :D

                                        Wäre ich absolut dafür, ist ein Top Menü, noch dazu sehr schlank und übersichtlich programmiert - und als "von Zeit zu Zeit" CSS Nutzer, kommt man nicht auf solch eine elegante Menülösung, vor allem wenn dazu noch ein kleines Javascript-Script notwendig ist :)

                                        Denke auch, dass es einen gewissen Lehrwert bietet ;)

                                        Grüße,

                                        RIDER

                                        --
                                        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                        1. Aloha

                                          Ja, stimmt. Ging mir aber vor etwa nem halben Jahr genauso. Ich war bis dato etwas abstinent und wurde dann von den Möglichkeiten von CSS3 erschlagen :D

                                          ...genau so geht es mir gerade.
                                          Ich habe dein Menü optisch jetzt so gestaltet, wie ich auf meiner Seite haben will.

                                            
                                          <ul>  
                                              <li id=\"karriere\">Karriere  
                                                    <ul class=\"untermenue1\">  
                                                         <li class=\"untermenue1eintrag\">Studium</li>  
                                                         <li class=\"untermenue1eintrag\">Promotion  
                                                               <ul class=\"untermenue2\">  
                                                                  <li class=\"untermenue2eintrag\">Promotionsvortrag</li>  
                                                                  <li class=\"untermenue2eintrag\">Doktorprüfung</li>  
                                                               </ul>  
                                                         </li>  
                                                    </ul>  
                                              </li>  
                                          </ul>  
                                          
                                          

                                          Hierbei hat die oberste Ebene eine dunkle Farbe, die folgende Ebene eine hellere, die innerste Ebene die hellste Hintergrundfarbe. Da jeder Listeneintrag normal ja etwas eingerückt wird, habe ich im CSS das "padding" der ULs ausgeschaltet, damit jeder Menüpunkt, egal in welcher Ebene er sich befindet, über die gesamte Menüspaltenbreite geht. Damit es optisch besser aussieht, gibt es zwischen jedem farbigen Eintrag einen schwarzen Rahmen.

                                          Jeder Menütext ist von einem <SPAN> umgeben, dass je nach Ebene entsprechend eingerückt wird, habe ich jetzt nicht reinkopiert, ist ja trivial ;).

                                          Ich habe deshalb für jedes <LI>-Element ebenenweise eine Klasse definiert, wobei das "oberste" Li eine ID bekommen hat.

                                          Mein CSS sieht so aus:

                                          nav ul ul {  
                                          max-height:0vh;  
                                          overflow:hidden;  
                                          transition:max-height 1s;  
                                          }  
                                            
                                          #karriere {  
                                              margin: 0px 0px 0px 0px;  
                                              padding: 0px 0px 0px 0px;  
                                              background: #444444;  
                                              }  
                                            
                                              .untermenue1 {  
                                              background: #999999;  
                                              }  
                                            
                                                  .untermenue1eintrag {  
                                                  margin: 0px 0px 0px 0px;  
                                                  padding: 0px 0px 0px 0px;  
                                                  }  
                                            
                                              .untermenue2 {  
                                              background: #cccccc;  
                                              margin: 0px 0px 0px 0px;  
                                              }  
                                            
                                                  .untermenue2eintrag {  
                                                  margin: 0px 0px 0px 0px;  
                                                  padding: 0px 0px 0px 0px;  
                                                  }
                                          

                                          So sieht es dann auf der Seite aus:

                                          Schnappschuss

                                          Was ich jetzt schon den ganzen Tag versuche und inzwischen am verzweifeln bin: mit
                                          ":hover" die Hintergrundfarbe jeweils nur der Zeile, über der die Maus fährt, umzufärben.

                                              .untermenue2eintrag:hover {  
                                              background: #aaff44;  
                                              }  
                                          
                                          

                                          Solange ich einen :hover nur in der untersten Untermenüebene definiere, klappt das innerhalb dieser Ebene auch hervorragend:

                                          Schnappschuss2

                                          Sobald ich aber einen :hover auch in der darüberliegenden Ebene definiere:

                                             .untermenue1eintrag:hover {  
                                              background: #ffff44;  
                                              }
                                          

                                          dann wird der entsprechende Eintrag natürlich verfärbt wenn die Maus darüber färbt (wie es sein soll) - aber er wird eben auch verfärbt, wenn die Maus über einen dazu gehörigen Untermenüeintrag fährt. Soweit ja auch verständlich, denn des Untermenü befindet sich ja innerhalb des <LI>-Elements, das umgefärbt werden soll.

                                          Nur - wie bekomme das weg?
                                          Es soll ja wirklich nur die Menüzeile umgefärbt werden, über der der Mauszeiger ist?

                                          Folgendes Bild zeigt, wie umgefärbt wird, wenn die Maus über dem untersten Eintrag "Doktorprüfung" ist - es wird auch der übergeordnete Eintrag "Promotion" umgefärbt:

                                          Schnappschuss3

                                          Ich werde echt wahnsinnig :D - ich versuche schon den ganzen Morgen mit eingefügten <span>-Elementen das Umfärben vom gesamten <LI>-Eintrag zu umgehen... aber das Resultat ist immer das gleiche...

                                          Fällt dir dazu ein Trick ein?
                                          :)

                                          MfG,

                                          --
                                          JPL
                                          1. Aloha ;)

                                            Zunächst: In deinem HTML-Quelltext fehlen noch alle wichtigen Elemente (Radio-Buttons, labels, a-Elemente). In meiner Antwort nehme ich an allen Punkten jetzt einfach mal an, du hättest alle diese Elemente schon verbaut.

                                            Was ich jetzt schon den ganzen Tag versuche und inzwischen am verzweifeln bin: mit
                                            ":hover" die Hintergrundfarbe jeweils nur der Zeile, über der die Maus fährt, umzufärben.

                                            .untermenue2eintrag:hover {

                                            background: #aaff44;
                                                }

                                              
                                            
                                            > Nur - wie bekomme das weg?  
                                            > Es soll ja wirklich nur die Menüzeile umgefärbt werden, über der der Mauszeiger ist?  
                                              
                                            Eigentlich ganz einfach ;) Überleg dir, was gehovert / formatiert werden soll.  
                                              
                                            Für die gesamte Formatierung, die deinen Menüpunkt nachher ausmachen soll (also auch für das hovern) ist nicht das li zuständig - sondern das a. Deshalb ist auch in meinem Beispiel nirgends ein li mitformatiert, die Formatierung läuft immer über das a (das label mal ausgenommen). Du musst also soetwas notieren:  
                                              
                                            `.untermenue2eintrag:hover>a { ... } `{:.language-css}  
                                              
                                            Oder, wenn das label mit angepasst werden soll:  
                                              
                                            `.untermenue2eintrag:hover>a, .untermenue2eintrag:hover>label { ... } `{:.language-css}  
                                              
                                            Oder, wenn du wie in meinem Beispiel die label leer lässt und stattdessen per CSS was zum draufklicken hinzufügst  
                                              
                                            `.untermenue2eintrag:hover>a, .untermenue2eintrag:hover>label::before { ... } `{:.language-css}  
                                              
                                            Achte vor allem darauf, dass du ">" einsetzt, sonst werden die Navigationsebenen darunter weiterhin mit eingefärbt.  
                                              
                                            
                                            > Ich werde echt wahnsinnig :D - ich versuche schon den ganzen Morgen mit eingefügten <span>-Elementen das Umfärben vom gesamten <LI>-Eintrag zu umgehen... aber das Resultat ist immer das gleiche...  
                                              
                                            Warum <span> - du hast doch schon <a> oder <label>? ^^  
                                              
                                            [ Selbst wenn du ein aufklappbares Menü baust, welches keine Links enthalten soll, sondern sich einfach nur auf Klick öffnen soll - dann solltest du der Semantik zuliebe trotzdem statt <span> <label> verwenden (und folgerichtig ersetzt das dann die +/- Schaltfläche). Aber das war off-topic, ich glaube nicht, dass du das willst ;) ]  
                                              
                                            Dass das mit den <span> nicht ging, lag wahrscheinlich daran, dass du die Regeln ohne ">" notiert hattest, wie oben schon vermerkt. (">" ist der direktes-Kindelement-Selektor)  
                                              
                                            Grüße,  
                                              
                                            RIDER  
                                              
                                            
                                            -- 
                                            Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
                                              
                                            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  
                                            
                                            
                                            1. Aloha ;)

                                              Für die gesamte Formatierung, die deinen Menüpunkt nachher ausmachen soll (also auch für das hovern) ist nicht das li zuständig - sondern das a.

                                              Nachtrag: Die a sollten dafür natürlich mit "display:inline-block" formattiert sein und per "width:100%" das umschließende li-Element vollständig ausfüllen. (Denke aber an die label und verringere dann die Breite der a um die Breite der label - so wie in meinem Beispiel. Auch die label sollten inline-block sein)

                                              Grüße,

                                              RIDER

                                              --
                                              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                              ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                            2. Aloha

                                              Zunächst: In deinem HTML-Quelltext fehlen noch alle wichtigen Elemente (Radio-Buttons, labels, a-Elemente). In meiner Antwort nehme ich an allen Punkten jetzt einfach mal an, du hättest alle diese Elemente schon verbaut.

                                              Das ist richtig, habe alles gelöscht, was erstmal nichts mit der Einfärbung des Hintergrunds zu tun hat... dachte ich zumindest :)

                                              Ehrlich, wenn man zu lange vor einem Problem hockt, den Code anstarrt, auf daß er seine Geheimnisse endlich enthüllt, das wissen, was man machen muss, damit er wiederrum macht, was man von ihm will...

                                              Ein paar Stunden Abstand ist manchmal echt gut... und dann noch hilfreiche, ähm, Hilfe von dir...

                                              Eigentlich ganz einfach ;) Überleg dir, was gehovert / formatiert werden soll.

                                              Nun... mir war beim Anblick meiner Seite im Browser klar, was gefärbt werden soll, aber beim Anblick des Codes nicht, was ich dafür eigentlich zum färben vorsehen soll...

                                              Für die gesamte Formatierung, die deinen Menüpunkt nachher ausmachen soll (also auch für das hovern) ist nicht das li zuständig - sondern das a. Deshalb ist auch in meinem Beispiel nirgends ein li mitformatiert, die Formatierung läuft immer über das a (das label mal ausgenommen). Du musst also soetwas notieren:

                                              Darauf bin ich sogar auch gekommen, gegen Ende meines starrens, kurz bevor ich die Nachricht hier gechrieben habe und erstmal den Computer ausgemacht habe... deshalb auch mein Versuch <span> einzufügen und mit diesen dann die Farbe reinzubringen... natürlich hätte ich auch auf die Idee kommen können, die <label> selbst zu formatieren... ;-)

                                              .untermenue2eintrag:hover>a { ... }

                                              Oder, wenn das label mit angepasst werden soll:

                                              .untermenue2eintrag:hover>a, .untermenue2eintrag:hover>label { ... }

                                              Mein Denkfehler war, bzw. Problem, dass es ja durchaus auch Listeneinträge gibt, die selbst kein <a...></a> enthalten, deshalb habe die <a>-Elemente von beginn an nicht berücksichtigt.
                                              Erst habe ich es auch mit den <label>-Elementen versucht, aber die umfassen ja unformatiert nur den reinen Inhalt und sind nicht so breit die gesamte Zeile, deshalb hat sich hier auch nie die gesamte Zeile verfärbt... der Gedanke, das <label>-Element auf die gesamte Zeilenbreite zu formatieren, kam ich ja nicht... Tunnelblick ;)

                                              Warum <span> - du hast doch schon <a> oder <label>? ^^

                                              Jaaa... siehe oben... auf die Idee kam ich heute morgen nicht... dass da auch formatierbare Elemente sind... :D

                                              Aber nachdem ich mit deinen Tipps nun die <label>s generell auf 100 % gesetzt habe:

                                              nav label {  
                                              width: 100%;  
                                              display:inline-block;  
                                              }
                                              

                                              lassen die sich jetzt auch einfärben, wenn die Maus darüber ist (und eben auch nur dann):

                                               #karriere > label:hover {                  /* Die erste Menüebene */  
                                                  background: #ff0000;  
                                                  }
                                              
                                                 .untermenue1eintrag > label:hover {      /* Die zweite Menüebene */  
                                                  background: #ffff44;  
                                                  }
                                              
                                                 .untermenue2eintrag > label:hover {      /* Die dritte Menüebene */  
                                                  background: #aaff44;  
                                                  }
                                              

                                              funktioniert jetzt alles so wie es mir vorschwebt.
                                              :)

                                              Dankeschön!

                                              So, dann mach ich mich jetzt mal ans Werk mit der Fertigstellung meiner Variante deines Menüs.
                                              :)

                                              MfG,

                                              --
                                              JPL
                                              1. Aloha ;)

                                                Dankeschön!

                                                Bitteschön ;)

                                                So, dann mach ich mich jetzt mal ans Werk mit der Fertigstellung meiner Variante deines Menüs.
                                                :)

                                                Bin gespannt auf das Ergebnis ;)

                                                Grüße,

                                                RIDER

                                                --
                                                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                                ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                                1. Aloha

                                                  Bin gespannt auf das Ergebnis ;)

                                                  Ich auch ;)

                                                  Aber hab wieder ein kleines Problem... natürlich.

                                                  Ich habe ja drei Menüebenen.
                                                  Jeden Eintrag habe ich mit einem <Label> umgeben, der je nach Ebene mit einer Klasse .e1, .e2 oder .e3 versehen ist.

                                                  <ul>  
                                                  <li id=\"karriere1\"><input type=\"radio\" name=\"navi_1\" id=\"navi_1_1\" class=\"hackbox\""; if ($menu == "studium") {echo " checked=\"checked\"";} echo "><label class=\"e1\" for=\"navi_1_1\">Karriere</label>"; echo "  
                                                    <ul class=\"karriere2\">  
                                                      <li><label class=\"e2\"><a href=\"...\">Studium</a></label></li>  
                                                      <li><input type=\"radio\" name=\"navi_2\" id=\"navi_2_1\" class=\"hackbox\""; if ( $menu == "promotion") {echo " checked=\"checked\"";} echo "><label class=\"e2\" for=\"navi_2_1\">Promotion</label>"; echo "  
                                                        <ul class=\"karriere3\">  
                                                        <li><label class=\"e3\"><a href=\"...\">Promotionsvortrag</a></label></li>  
                                                        <li><label class=\"e3\"><a href=\"...\">Doktorprüfung</a></label></li>  
                                                        </ul>  
                                                      </li>  
                                                    </ul>  
                                                  </li>  
                                                  </ul>
                                                  

                                                  Damit werden die <label>-Inhalte der ersten Ebene um 10 Pixel, der zweiten Ebene um 20 Pixel und die der dritten Ebene um 30 Pixel eingerückt. Was auch gut funktioniert:

                                                    
                                                  .e1 {  
                                                  padding: 0px 0px 0px 10px;  
                                                  }  
                                                    
                                                  .e2 {  
                                                  padding: 0px 0px 0px 20px;  
                                                  }  
                                                    
                                                  .e3 {  
                                                  padding: 0px 0px 0px 30px;  
                                                  }  
                                                  
                                                  

                                                  So sind die Listenelemente selbst formatiert:

                                                    
                                                  nav ul li {  
                                                      color: #000000;  
                                                      margin: 0px 0px 0px 0px;  
                                                      padding: 0px 0px 0px 0px;  
                                                      font-size: 16px;  
                                                      font-weight: normal;  
                                                      line-height: 20px;  
                                                      text-align: left;  
                                                  }  
                                                    
                                                  nav ul li ul li {  
                                                      color: #000000;  
                                                      margin: 0px 0px 0px 0px;  
                                                      padding: 0px 0px 0px 0px;  
                                                      font-size: 14px;  
                                                      font-weight: normal;  
                                                      line-height: 18px;  
                                                      text-align: left;  
                                                   }  
                                                    
                                                  nav ul li ul li ul li {  
                                                      color: #000000;  
                                                      margin: 0px 0px 0px 0px;  
                                                      padding: 0px 0px 0px 0px;  
                                                      font-size: 12px;  
                                                      font-weight: normal;  
                                                      line-height: 16px;  
                                                      text-align: left;  
                                                   }  
                                                  
                                                  

                                                  Die hover-Effekte sind dann so eingebunden:

                                                   #karriere1 {  
                                                            background: #444444;  
                                                            }  
                                                    
                                                            #karriere1 > label:hover {  
                                                                 background: #ff0000;  
                                                                 }  
                                                    
                                                                 .karriere2 {  
                                                                      background: #999999;  
                                                                      }  
                                                    
                                                                      .karriere2 li > label:hover {  
                                                                           background: #ffff44;  
                                                                           }  
                                                    
                                                                 .karriere3 {  
                                                                      background: #cccccc;  
                                                                      }  
                                                    
                                                                      .karriere3 li > label:hover {  
                                                                           background: #aaff44;  
                                                                           }
                                                  

                                                  Das Phänomen, daß ich jetzt habe: beim HOVER über die Listeneinträge der zweiten oder dritten Ebene, endet der HOVER-Effekt genau am Ende der Menüspalte, wie es ja auch sein soll:

                                                  Schnappschuss Ebene 3

                                                  Fährt man aber über die erste Ebene (also Hauptmenü), wird die rechte Grenze der Labels um genau diese 10 Pixel, mit der der Innenabstand nach rechts verschoben ist, verlängert:

                                                  Schnappschuss Ebene 1

                                                  Das verstehe ich nicht, da ich alle Elemente gleich definiert und eingebunden habe (meiner Meinung nach ;) ) und das Einrücken der <label>s der zweiten und dritten Ebene um 20 bzw. 30 Pixel funktioniert, ohne dass die Einträge beim HOVER um diese Pixel nach rechts hinaus verlängert sind, während es bei der ersten Ebene nicht funktioniert.

                                                  Du erkennst sicher auf den ersten Blick was das Problem ist?
                                                  :)

                                                  MfG,

                                                  --
                                                  JPL
                                                  1. Aloha ;)

                                                    Du erkennst sicher auf den ersten Blick was das Problem ist?

                                                    Nö ;)

                                                    Aber ich wage mal einen educated guess: Das Problem tritt eventuell in allen Navigationsebenen auf, ist aber nur in der ersten sichtbar, da bei den anderen ein overflow:hidden vorliegt.

                                                    Oder noch ein educated guess: Das label-Element steht schon in jedem Status über das li hinaus, das wird aber erst beim hovern sichtbar. Das liegt daran, dass nach den von dir geposteten CSS-Regeln das label-Element zunächst einen transparenten Hintergrund hat (eingefärbt ist nur das li) und erst beim hovern Farbe bekommt.

                                                    In beiden Fällen solltest du dir vielleicht das box-model nochmal vergegenwärtigen. Für mich verhält sich die width nämlich alles andere als intuitiv. Intuitiv würde ich erwarten, dass außen zuerst margin kommt, dann border, dann die von width vorgeschriebene Breite und dann das padding. Das ist aber nicht so. Width kommt erst ganz innen. Wenn du also ein padding festlegst, dann musst du von der beabsichtigten Elementbreite das padding abziehen, um die width zu erhalten. Oder anders ausgedrückt: in diesem Fall (ohne Border, ohne Berücksichtigung umliegender Elemente) verhält sich padding genauso wie margin!

                                                    Wenn ich mehr als educated guesses machen soll, dann reichen die Codefragmente nicht aus ;) dann müsstest du mir das Beispiel live verlinken. Es ist ja auch nie ausgeschlossen, dass es Interferenzen gibt, die in den selektierten Codefragmenten nicht zum Ausdruck kommen. Schließlich ist Wochenende, da bin ich daheim und hab Browser mit Entwicklerwerkzeugen zur Hand :D

                                                    Vielleicht noch ein Wort zur Semantik: Das <label><a>...</a></label> ist nicht semantisch sinnvoll. Wozu eine Beschriftung wenn es garnix zu beschriften gibt? Mir ist schon klar, dass du das zu Gunsten der stilistischen Gleichbehandlung von "Text zum Aufklappen" und "Linktext" gemacht hast. Da wäre es aber besser, das Markup nicht zu verbiegen (also einfach nur <a> an diesen Stellen) und die stilistische Gleichbehandlung stattdessen im CSS umzusetzen - entweder, indem du immer label und a ansprichst, oder - vllt. noch besser - indem du allen label und a eine gemeinsame Klasse "navielm" oder so zuweist und diese dann gemeinsam formatierst.

                                                    Grüße,

                                                    RIDER

                                                    --
                                                    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                                    ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                                    1. Aloha

                                                      Aloha ;)

                                                      Haben wir wirklich zufällig die gleiche Begrüßung gewählt, oder hängst du an mein Aloha nur ein ;) an?
                                                      :-)

                                                      Du erkennst sicher auf den ersten Blick was das Problem ist?

                                                      Nö ;)

                                                      Zumindest etwas beruhigend bzgl. den Zweifeln an den eigenen "Fähigkeiten" :-)

                                                      Aber ich wage mal einen educated guess: Das Problem tritt eventuell in allen Navigationsebenen auf, ist aber nur in der ersten sichtbar, da bei den anderen ein overflow:hidden vorliegt.

                                                      Naja, die zweite und dritte Menüebene ist ja genau so definiert, hab den Code ja geschrieben. Da wird aber - obwohl sie um 20 bzw. 30, und nicht nur 10, Pixel "gepaddet" werden - nichts über den Rand hinaus verschoben.

                                                      Oder noch ein educated guess: Das label-Element steht schon in jedem Status über das li hinaus, das wird aber erst beim hovern sichtbar. Das liegt daran, dass nach den von dir geposteten CSS-Regeln das label-Element zunächst einen transparenten Hintergrund hat (eingefärbt ist nur das li) und erst beim hovern Farbe bekommt.

                                                      Siehe oben.

                                                      In beiden Fällen solltest du dir vielleicht das box-model nochmal vergegenwärtigen. Für mich verhält sich die width nämlich alles andere als intuitiv. Intuitiv würde ich erwarten, dass außen zuerst margin kommt, dann border, dann die von width vorgeschriebene Breite und dann das padding. Das ist aber nicht so. Width kommt erst ganz innen. Wenn du also ein padding festlegst, dann musst du von der beabsichtigten Elementbreite das padding abziehen, um die width zu erhalten. Oder anders ausgedrückt: in diesem Fall (ohne Border, ohne Berücksichtigung umliegender Elemente) verhält sich padding genauso wie margin!

                                                      Ja, ich blick das auch nicht, dieses vielfach verschachtelte System... Versuch und Irrtum sag ich nur :D

                                                      Aber wie gesagt: Den Code hab ich hier ja reinkopiert, die .e-Klassen selbst sind völlig identisch zueinander, abgesehen von den Padding-Werten.

                                                      So werden die .e-Klassen im Menü eingebaut:

                                                      <li  id=\"hobbies1\"><input type=\"radio\" name=\"navi_1\" id=\"navi_1_2\" class=\"hackbox\""; if ($menu == "hobbies") {echo " checked=\"checked\"";} echo "><label class=\"e1\" for=\"navi_1_2\">Hobbies</label>"; echo "  
                                                                              <ul class=\"hobbies2\">  
                                                                                      <li><input type=\"radio\" name=\"navi_2\" id=\"navi_2_2\" class=\"hackbox\""; if ($menu == "kochen") {echo " checked=\"checked\"";} echo "><label class=\"e2\" for=\"navi_2_2\">Kochen</label>"; echo "  
                                                                                              <ul class=\"hobbies3\">...
                                                      

                                                      Sehe ich prinzipiell auch keinen Unterschied.
                                                      Nur daß die Klasse .e1 von einem <LI>-Element umgeben wird, das eine ID hat...

                                                       #hobbies1 {  
                                                                background: #ff7707;  
                                                                }  
                                                        
                                                               #hobbies1 label:hover {  
                                                                     background: #000000;  
                                                                     color: #ff7707;  
                                                                     }
                                                      

                                                      ...während die .e2-Klasse zuzsätzlich noch in in einer <ul><li>-Schachtel steckt, wobei dem <ul> eine Klasse zugewiesen ist.

                                                       .hobbies2 {  
                                                                background: #ff963f;  
                                                                          }  
                                                        
                                                                #hobbies1 ul li label:hover {  
                                                                     background: #000000;  
                                                                     color: #ff963f;  
                                                                     }  
                                                        
                                                                #hobbies1 ul li label>a:hover {  
                                                                     background: #000000;  
                                                                     color: #ff963f;  
                                                                     }  
                                                      

                                                      Letztendlich ist es nicht mehr wirklich wichtig, da ich die Hauptmenüeinträge nicht mehr mit Text mache, sondern eine Grafik einbinde:

                                                      <input type="radio" name="navi_1" id="navi_1_1" class="hackbox"><label class="e1" for="navi_1_1"><div class="karriere">&nbsp;</div></label>

                                                      Das DIV ist notwendig, weil die Grafik als transparentes PNG einbinde, des entsprechend nach rechts eingerückt ist:

                                                         .karriere {  
                                                                background:url(../menue/karriere-normal.png) no-repeat;  
                                                                background-position: 20px 1px;  
                                                                }  
                                                        
                                                                .karriere:hover {  
                                                                background:url(../menue/karriere-hover.png) no-repeat;  
                                                                background-position: 20px 1px;  
                                                                } 
                                                      

                                                      Ob das jetzt elegant ist? Es funktioniert auf jeden Fall genau so wie es soll :)

                                                      Vielleicht noch ein Wort zur Semantik: Das <label><a>...</a></label> ist nicht semantisch sinnvoll. Wozu eine Beschriftung wenn es garnix zu beschriften gibt? Mir ist schon klar, dass du das zu Gunsten der stilistischen Gleichbehandlung von "Text zum Aufklappen" und "Linktext" gemacht hast. Da wäre es aber besser, das Markup nicht zu verbiegen (also einfach nur <a> an diesen Stellen) und die stilistische Gleichbehandlung stattdessen im CSS umzusetzen - entweder, indem du immer label und a ansprichst, oder - vllt. noch besser - indem du allen label und a eine gemeinsame Klasse "navielm" oder so zuweist und diese dann gemeinsam formatierst.

                                                      Das hast vollkommen recht - ich bin zwar absoluter Anhänger für systematisches Vorgehen - aber noch mehr Anhänger eines schlanken Codes, der nur da notwendigste Enthält. Du kannst davon ausgehen, dass wenn du diese Zeilen liest, nur noch entweder ein <label> ODER ein <a> in den Menüzeilen zu finden sein wird...
                                                      :-)

                                                      MfG,

                                                      --
                                                      JPL
                                                      1. Aloha ;)

                                                        Haben wir wirklich zufällig die gleiche Begrüßung gewählt, oder hängst du an mein Aloha nur ein ;) an?

                                                        Haben wir ;) ist mir vorher schon aufgefallen. Bei mir ist wahrscheinlich LeFloid schuld, und bei dir? :D

                                                        Aber wie gesagt: Den Code hab ich hier ja reinkopiert, die .e-Klassen selbst sind völlig identisch zueinander, abgesehen von den Padding-Werten.

                                                        Kann mir nicht so recht vorstellen, dass das wirklich ales-alles an Code ist, der da angewandt wird. Die width muss irgendwo festgelegt sein, das display:inline-box für die labels, ... Vielleicht kannst du nur nicht ganz absehen, welcher Code da wo interferiert ;)

                                                        Aber abgesehen davon: es ist Zeit für ein Live-Beispiel. Den Code immer und immer wieder zu posten umd durchzusehen bringt uns an dieser Stelle nicht weiter. Ich brauch was, um es mit Entwicklerwerkzeugen zu untersuchen ;)

                                                        Grüße,

                                                        RIDER

                                                        --
                                                        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                                        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                                        1. Aloha

                                                          Haben wir ;) ist mir vorher schon aufgefallen. Bei mir ist wahrscheinlich LeFloid schuld, und bei dir? :D

                                                          weiß ich gar nicht mehr, benutze ich seit Ewigkeiten :D

                                                          Aber wie gesagt: Den Code hab ich hier ja reinkopiert, die .e-Klassen selbst sind völlig identisch zueinander, abgesehen von den Padding-Werten.

                                                          Kann mir nicht so recht vorstellen, dass das wirklich ales-alles an Code ist, der da angewandt wird. Die width muss irgendwo festgelegt sein, das display:inline-box für die labels, ... Vielleicht kannst du nur nicht ganz absehen, welcher Code da wo interferiert ;)

                                                          Tja, jetzt räum ich grad die Haupt-CSS auf... und entdecke gaaanz weit unten eine <ul> und <li> Definition... die sogar Auswirkungen auf die Menüzeile hatte...

                                                          gelöscht
                                                          gehofft
                                                          enttäuscht

                                                          ...daran lags nicht :)

                                                          Aber abgesehen davon: es ist Zeit für ein Live-Beispiel. Den Code immer und immer wieder zu posten umd durchzusehen bringt uns an dieser Stelle nicht weiter. Ich brauch was, um es mit Entwicklerwerkzeugen zu untersuchen ;)

                                                          Das Menü steht und funktioniert und sieht toll aus... aber ich schlage mich hier gerade noch mit der neuen Version von Xampp rum... stellt keine Sonderzeichen da... sobald das geht... lad ich die Seiten hoch... muß davor noch ein paar Kleinigkeiten an der Seite selbst korrigieren...

                                                          Aber dein Menü... wie gesagt, funktionert hervorragend.
                                                          Nächsten Samstag, spätestens.
                                                          :)

                                                          MfG,

                                                          --
                                                          JPL
                                                        2. Aloha,

                                                          also falls du hier noch lies - dein Menü (mit meiner optischen Gestaltung) ist online :)
                                                          Funktioniert fantastisch!
                                                          Daaaaaaaaaaaaaaaaaaanke für alles. Vor allem das Javascript... hätte ich NIE hinbekommen.
                                                          :)

                                                          Gruß
                                                          Jochen

                                                          1. Om nah hoo pez nyeetz, JPL!

                                                            also falls du hier noch lies - dein Menü (mit meiner optischen Gestaltung) ist online :)
                                                            Funktioniert fantastisch!

                                                            Es ändern sich nicht alle Textfarben beim hovern.

                                                            Matthias

                                                            --
                                                            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mars und Marseille.

                                                            1. Aloha

                                                              Om nah hoo pez nyeetz, JPL!

                                                              also falls du hier noch lies - dein Menü (mit meiner optischen Gestaltung) ist online :)
                                                              Funktioniert fantastisch!

                                                              Es ändern sich nicht alle Textfarben beim hovern.

                                                              Matthias

                                                              was mich momentan mehr nervt ist, dass auf dem IE die Menüs nicht aufklappen... auf dem Firefox geht alles so wie es soll...
                                                              :(

                                                              MfG,

                                                              --
                                                              JPL
                                                          2. Aloha ;)

                                                            also falls du hier noch lies - dein Menü (mit meiner optischen Gestaltung) ist online :)
                                                            Funktioniert fantastisch!
                                                            Daaaaaaaaaaaaaaaaaaanke für alles. Vor allem das Javascript... hätte ich NIE hinbekommen.
                                                            :)

                                                            Ja, ich lese hier noch (ICH lese ÜBERALL har-har). Gern geschehen ;)

                                                            Zu deinem label-IE-hover Problem können wir ja dann den anderen Thread nutzen xD

                                                            Grüße,

                                                            RIDER

                                                            --
                                                            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                                            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                    2. Om nah hoo pez nyeetz, Camping_RIDER!

                                      Aufgrund dieser tatsächlich gegebenen Relevanz finde ich, dass das Ganze im Kapitel CSS/Anwendung und Praxis einen Artikel verdient hat. (Oder woanders?) Ein konkretes Realisierungsbeispiel haben wir ja jetzt auch. Da ich - was das angeht - momentan sehr in der Materie drin bin, kann ich auch gerne die Seite anlegen und neben dem komplexen Beispiel von oben noch einfachere Beispiele einstreuen. Ich hätte aber gerne von fachlicher Seite her zunächst die Freigabe dafür und ein Statement, wo und wie ich das einordnen soll...

                                      Freigabe erteilt ;-)

                                      temporärer Aufenthaltsraum: http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER/Des_Camping_RIDERS_Spielwiese/Checkbox-Hack

                                      Matthias

                                      --
                                      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen xi und Xiberg.

                          3. So, hab jetzt mal mein Menü komplett über <ul> und <li> aufgebaut, ohne die Abfragen, ob ein Untermenü aufgeklappt werden soll.
                            Abgesehen davon, daß durch mein "POSITION: FIXED" Problem jetzt erstmal 90 % der Einträge unerreichbar außerhalb der Seite sind, ist das Listenmenü jetzt sauber.

                            Ich habe mit http://bernholdtech.blogspot.de/2013/04/very-simple-pure-css-collapsible-list.html rumgespielt und prinzipiell klappt es schonmal, das auf- und zuklappen der ersten Unterebene (an die zweite bin ich noch nicht ran).

                            Aber mir ist jetzt schon aufgefallen, daß mir diese technische Layout-Lösung in dieser Form nicht zusagt, denn hat man ein Untermenü geöffnet, bleibt es offen, auch wenn man einen zweiten Untermenüeintrag öffnet... und schwupp-di-wuppi hat man wieder ein elendlanges Menü, dass ich ja eigentlich vermeiden will.

                            Was mich wieder zurück zum Akkordeonmenüder Seite http://designyourweb.info/so-erstellst-du-ein-vertikales-css3-accordion-menu/914 bringt, denn da klappt ja immer ein Untermenü zu, wenn man ein anderes öffnet.

                            Kann man es auch mit dem Checkbox-System einrichten, dass ein Menü zuklappt, wenn man das andere öffnet?

                            MfG,

                            --
                            JPL
                            1. Aloha ;)

                              Aber mir ist jetzt schon aufgefallen, daß mir diese technische Layout-Lösung in dieser Form nicht zusagt, denn hat man ein Untermenü geöffnet, bleibt es offen, auch wenn man einen zweiten Untermenüeintrag öffnet... und schwupp-di-wuppi hat man wieder ein elendlanges Menü, dass ich ja eigentlich vermeiden will.

                              Nu ja. Das liegt daran, dass du nicht tust, was ich dir sage ;) Das liegt nicht am Ansatz.

                              Was mich wieder zurück zum Akkordeonmenüder Seite http://designyourweb.info/so-erstellst-du-ein-vertikales-css3-accordion-menu/914 bringt, denn da klappt ja immer ein Untermenü zu, wenn man ein anderes öffnet.

                              Kann man es auch mit dem Checkbox-System einrichten, dass ein Menü zuklappt, wenn man das andere öffnet?

                              Lies mein Posting. Und ich sagte ja von Anfang an: Nimm Radio-Buttons statt Checkboxen. Ich buchstabiere: R-A-D-I-O-B-U-T-T-O-N-S ;)

                              Grüße,

                              RIDER

                              --
                              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                              ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                              1. Aloha

                                Nu ja. Das liegt daran, dass du nicht tust, was ich dir sage ;) Das liegt nicht am Ansatz.

                                naja, diese meine "Selbstantwort" hat sich mit deiner anderen überschnitten, also obwohl du zeitlich vor mir geantwortet hast, war ich da noch am erstellen dieser Nachricht, also hab ich deinen Beitrag noch gar nicht lesen können :)

                                --
                                JPL
  2. Om nah hoo pez nyeetz, JPL!

    Gibt es für dieses Problem eine Lösung?

    Du suchst Navigation nur bei Bedarf fixieren, künftig position: sticky;, derzeit ist die Browserunterstützung noch nicht optimal.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen äh und ähnlich.

    1. Aloha

      Om nah hoo pez nyeetz, JPL!

      Gibt es für dieses Problem eine Lösung?

      Du suchst Navigation nur bei Bedarf fixieren, künftig position: sticky;, derzeit ist die Browserunterstützung noch nicht optimal.

      Matthias

      Danke für die Links, werde ich mal genaustens durchackern, auf den ersten Blick scheint es das Problem ja irgendwie zu lösen :)

      MfG,

      --
      JPL