Rocksolid Megamenü als Dropdown

[FinalTestMan]

Hallo zusammen,

ich konnte leider im Forum nichts passendes finden, falls es doch etwas gibt, gerne verlinken oder verschieben.
Ich möchte gerade eine Webseite von einem anderen Theme zu Rocksolids Tao Theme mit Megamenü in der aktuelle Contao 5 LTS umziehen.

Soweit hat alles gut geklappt, muss mich natürlich noch etwas umgewöhnen und einarbeiten. Da die Seite recht umfangreich ist, möchte ich das Menü in ein Dropdown umstellen, sodass die nächste Ebene erst beim hover geöffnet wird, beim mobilen Menü ist es ja schon so.

Ich habe auch ein Beispielvideo, wie es aussehen soll. Ich denke, dass ich es von der mobilen Ansicht ja einfach "rüber kopieren" könnte, bekomme es aber nicht so richtig hin. Müsste doch mit CSS Code funktionieren, oder? Kann mir da jemand behilflich sein?


Viele Grüße
Santo

[mlweb]

Ich verstehe Dein Problem nicht ganz. Du musst doch das Megamenü nicht einsetzen oder geht es Dir gar nicht ums Megamenü?
Das TAO-Theme bringt auch ein ganz normales Dropdownmenü mit. Wenn Du die 2.Ebene dann anders gestylt haben möchtest bzw. wenn diese erst erscheinen soll, wenn der Menüpunkt geklickt bzw. gehovert wird dann musst Du mit CSS und ggf. js selbst ran.
Wenn Du dazu Hilfe brauchst, solltest Du einen Link zur Seite hinterlassen und uns genau sagen an welcher Stelle Dein Problem genau ist.

[zoglo]

Immer einen Link zur Seite posten. Das Video ist was du brauchst, nicht aber der Ausgangspunkt.

Wenn es ums CSS geht, dann brauchts nur ein hover auf dem ul, welches dann dem innen liegenden li ein display: block o.ä. setzt.
Barrierefrei ist die Lösung nicht, dafür kannst du dann sicher zusätzlich mit :focus-visible arbeiten, dann hat es auch schonmal die Tastaturbedienbarkeit.

Und wenn es dir dann auch nochmal um die Aria-Attribute geht... dann brauchts vielleicht auch noch JavaScript für den Status, damit es Screenreader vorlesen können.

Im Internet gibt es übrigens viele Beispiele, hier z.B. auch eins von W3C, der Name den du suchst ist: "Flyout"
https://www.w3.org/WAI/tutorials/menus/flyout/

[mlweb]

Im Prinzip ist diese Frage auch schon mal im Forum bei Rocksolid aufgetaucht. https://help.rocksolidthemes.com/dis...n-mens-mit-tao
Ist zwar schon etwas älter, trifft aber noch genauso zu.
Anpassungen per CSS sind für die Funktionalität ausreichend, aber von der Bedienung ist eine weitere Ebene im Dropdown mindestens suboptimal und für Barrierefreiheit solltest Du wie von @zoglo schon geschrieben auch noch sorgen.

[mlweb]

Wenn Du Contao 5.6 einsetzt (oder zusätzlich die Erweiterung https://extensions.contao.org/?q=zog...-accessibility in Contao 5.3) könntest Du m.E. die Navigation auch durch die barrierefreie Navigation ersetzen, die jetzt in Contao integriert ist https://www.youtube.com/watch?v=8xoH4WRIO6Y ca. ab Minute 7:25