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

[Camping_RIDER]

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