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

[JPL]

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