Css3 Accordion Menü - Menü um weiteres Untermenü erweitern

[koma05]

hallo.
habe ein bestehendes css3 menü welches um eine Stufe ausgebaut werden soll.

zur zeit ist es so:

Main
    Sub
    Sub
Main
    Sub
    Sub

so soll es werden:

Main1
    Sub1
         NeuA
         NeuB
    Sub2
         NeuC
         NeuD
Main2
    Sub3
         NeuE
         NeuF
    Sub4
         NeuG

beim klick auf ein main1-element öffnet sich die unterelemente sub1 und sub2. die jeweiligen untermenüs neuA,neuB sollen erst beim klick auf z.b. sub1 oder sub2 ersichtlich werden.

den gesamten code findet du hier: zum online-code-tool (wenn code geändert, dann auf "update" klicken)


danke für hilfe

edit: hab zwar css3 geschrieben, wegen den effekten, aber grundsätzlich ist das menü ja normales css. also bitte nicht vorm css3 abschrecken lassen

 

[KaisyTom]

AW: Css3 Accordion Menü - Menü um weiteres Untermenü erweitern

Iss unpraktisch wenn du das editierst und ganz unten hin schreibst, dass es kein css3 ist ^^. Ich hab mich mal etwas mit dem problem auseinander gesetzt:
so wie du das möchstest ist es leider nur mit JS zu realisieren. Wenn du von der ersten in die zweite ebene gehst, dann kannst du direkt sagen :target + ul li a{ height: 30px;} (wobei ich persönlich hier lieber mit dem display-befehl arbeite anstatt den height befehl zu benutzen.) Das Problem letztendlich besteht darin, dass wenn du von der zweiten in die dritte ebene willst, musst du ein, dem target übergeordnetes Element ausblenden --> das geht nicht. Beispiel:

ebene1 --> standard eingeblendet
ebene2 --> standard ausgeblendet
ebene3 --> standard ausgeblendet

klick auf ebene1:
ebene1 --> standard eingeblendet
ebene2 --> standard ausgeblendet --> per target eingeblendet
ebene3 --> standard ausgeblendet

klick auf ebene2:
ebene1 --> standard eingeblendet
ebene2 --> standard ausgeblendet
ebene3 --> standard ausgeblendet --> per target eingeblendet

Da ebene 3 jedoch ebene 2 untergeordnet ist und ebene 2 ausgelendet kann man ebene 3 trozdem nicht sehen. Und übergeordnete elemente kann man nicht ansprechen!

Ich hoffe das war weitestgehend verständlich, weitere fragen postest du am besten hier, ich vergesse immer in mein postfach zu gucken.
Mögliche Lösungen:
1. per Javascript: Ich persönlich kann JS nicht sonderlich gut, kann dir also nicht spontan eine lösung präsentieren, ist aber nicht sehr schwer, stellt sich halt die frage, ob du JS benutzen möchtest.

2. Es ist mit CSS etwas änliches möglich, hierbei arbeitest du allerdings nicht mit Links und dem Target-Pseudoelement, sondern mit dem :hover-pseudoelement, d.h. man klickt nicht auf den link und das untermenü öffnet sich, sondern du fliegst nur mit der maus drüber und es öffnet sich.
Hier eine recht gute erklärung: ist zwar nur mit 2 ebenen, sollte aber recht einfach zu erweitern sein, du kannst auch mal nach "css flyout" googeln. Da mir langsam ein wenig die Finger glühen ^^. Sollte hier im Forum allerdings auch irgendwo stehen.

Noch viel Spaß ich hoffe ich konnte dir helfen ^^

 

[userxyz]

AW: Css3 Accordion Menü - Menü um weiteres Untermenü erweitern

Ich würde das ganz einfach mit Javascript lösen. So kann man vor dem Desktop das Menü über einen "hover" öffnen und auf seinem Smartphone per "touch". Außerdem hat man die möglichkeit nette Effekte einzubauen. Zwar geht das bei den neuen Browsern auch schon über CSS3, aber denkt doch auch an die älteren z.B. den "tollen" IE7 oder IE8.
Also meine erste Wahl für dein Vorhaben ist eine jQuery-Lösung.