Menü soll bei Mouseover / Hover aufklappen

[Marion]

Liebe Community

Ich steh grad auf dem Schlauch. Ich habe ein vertikales Menü mit einer horizontalen Untermenüebene. Wenn man einen Menüpunkt anwählt, wird das Untermenü ausgeklappt. Jetzt möchte ich, dass das Untermenü auch schon bei einem Mouseover / Hover aufklappt. Mach ich das mit einem Template-Override? Mit einer css-Deklaration? Ich verwende als Frontend-Modul die Main Navigation.

Der Link: http://www.rontimm-qigong.ch/startseite.html
Das Menü mit Untermenüpunkten ist "Kurse".

Danke für eure Hilfe!

Marion

[Thoni]

Das Untermenü muss immer ausgegeben werden.

.mod_navigation ul.level_2 {display:none;}
.mod_navigation li.active ul.level_2, .mod_navigation li:hover ul.level_2 {display:block;}

ungetestet

[Marion]

Funktioniert leider nicht, ich hab auch ein bisschen herumgespielt mit den li's und ul's und a's. Aber der Style mit dem Hover wird gar nicht geladen. Wenn ich den Style "#header .mod_navigation a:hover" nenne, wird er aufgerufen. Aber "display:block" genügt nicht, um das Untermenü aufzuklappen. Wie sag ich das auf CSSisch?

[Thoni]

Das meinte ich mit 'Das Untermenü muss immer ausgegeben werden.'

Im Quelltext gibt es die zweite Menüebene nicht - das musst du erst freigeben.
Was nicht da ist, kann nicht angezeigt werden.

Welche Contao-Version ist es?
Sind die Navi-Templates noch original?

[Bas]

Gibt haufenweise Tutorials - z.B. http://designyourweb.info/so-gehts-e...-erstellen/346

[Marion]

Das meinte ich mit 'Das Untermenü muss immer ausgegeben werden.
Im Quelltext gibt es die zweite Menüebene nicht - das musst du erst freigeben.
Was nicht da ist, kann nicht angezeigt werden.'

Meinst du damit, dass ich beim Modul den Stoplevel auf 0 setzen soll? Hab ich auch ausprobiert, aber dann ignoriert er das "display:none" von deinem ersten Style und zeigt das Untermenü immer an.

Welche Contao-Version ist es?

Version 3.3.7.

Sind die Navi-Templates noch original?

Ja, ich überschreibe keine Originaltemplates, sonst hätte ich einen Override gemacht, hab ich aber nicht. Formatiert hab ich dann übers default.css. Aber dass das aktive Menü aufklappt, kommt meiner Meinung nach vom Originaltemplate her, das habe ich nicht gecsst.

[Thoni]

Wie ich sehe, arbeitest du gerade dran. Das display:none funktioniert aktuell.

[Marion]

Wie ich sehe, arbeitest du gerade dran. Das display:none funktioniert aktuell.

Ja, ich hab nochmals herumprobiert. Display:none funktioniert schon, aber dann kriege ich auch bei aktivem Menü die Unterpunkte nicht mehr. Ich habe es jetzt wieder rausgenommen.
Logisch gesehen müsste die Formatierung lauten: Wenn hover über Eintrag, dann zugehöriges Untermenü aufklappen. Wenn ich mit css formatiere, spreche ich ja immer den Style direkt an, z.B. level_2 soll so formatiert werden. Aber das "wenn übergeordneter Style" dann "formatier ungergeordneten Style" kriege ich, wenn ich in css denke, nicht formuliert. Ääääh... ist ein bisschen schwierig auszudrücken was ich meine...

[tab]

Du formatierst immer die selektierten Elemente.
Wenn du also z.B. den Selektor so wählst:

.mod_navigation li:hover .level_2

dann betreffen die Styles das Untermenü ul.level_2 in dem Listenelement, über dem gerade die Maus steht.

[Marion]

So, jetzt habe auch ich es endlich kapiert!

Deine Zeilen im ersten Post waren ja wirklich goldrichtig, ausser dass meiner Ansicht nach auch vor active ein Doppelpunkt stehen müsste (oder ist das egal?)

Ich hatte erst nicht daran gedacht, im Modul den Stopplevel auf 0 zu setzen, und als ich es dann gemacht habe, hatte ich wohl die Styles beim Herumpröbeln schon verändert. Aber jetzt habe ich genau gemacht was du gesagt hast und es funktioniert! Danke für die Geduld.

[Marion]

Ich muss mich korrigieren: Der Punkt stimmt auch, mit dem Doppelpunkt geht es nicht. Warum beim einen einen Punkt und beim anderen einen Doppelpunkt? Ist hover im Gegensatz zu active keine Klasse?

[tab]

hover ist eine "Pseudoklasse" . active gibt es zwar auch als Pseudoklasse, wird aber von Contao als echte Klasse dem aktiven Menüpunkt zugewiesen und steht somit auch im Seitenquelltext drin. Mit dem :hover hat Contao dagegen nichts zu tun.

[Thoni]

Sorry - ich war unterwegs.

Jetzt funktioniert es - toll.

[Marion]

Vielen Dank für eure Erklärungen! Das Hintergrundwissen hilft mir, zu verstehen. Leider hab ich aber immer noch nicht den vollen Durchblick. Ich habe bemerkt, dass bei einem aktiven Untermenüpunkt das Menü wieder zuklappt. Ich komm nicht drauf, wie der Selektor lauten muss. ".mod_navigation li.active ul.level_2 li.active" ist es nicht und was ich sonst noch ausprobiert habe auch nicht...

[Thoni]

.mod_navigation li.active ul.level_2, .mod_navigation li:hover ul.level_2 {display:block;} um .mod_navigation li.trail ul.level_2 ergänzen:


.mod_navigation li.trail ul.level_2, .mod_navigation li.active ul.level_2, .mod_navigation li:hover ul.level_2 {display:block;}

[Marion]

Funktioniert! ein dickes

DANKESCHÖN!!!