Menü 2te Ebene anpassen

[SchmidtSon]

Hallo zusammen ich möchte gerne in dem Onlineshop

http://carbonwerk-germany.pritumble-test.de/

Die 2te Menüebene nur per Hovereffekt (Desktop) oder per touchbefehl (Mobil) ausklappen lassen.

 

Wie kann ich das realisieren, denn ich finde im Netz nur die Befehle die 2te Menüebene gänzlich zu verstecken.

Danke vielmals.

[rictools]

Was verstehst du unter der "2. Menuebene"? Es gibt das Hauptmenu mit "Home", "KFZ-Teile" etc., wenn man z. B. mit der Maus über "KFZ-Teile" geht erscheint das Untermenu mit "BMW" etc. Wenn du die nächste Ebene meinst, also z. B. "1er" etc., dann müßte das mit CSS-Anweisungen möglich sein, einfacher aber sicher mit einem Kaufmodul.

Edited November 4, 2021 by rictools (see edit history)

[SchmidtSon]

hey moin ric,

ja ich meine genau das:

Aufbau

BMW(sichtbar) > 1er (sichtbar) > E81/E87 (nur per hover sichtbar)

will den shop nicht nur mit Modulen voll schmeissen.

 

LG

[rictools]

Nun gut, das ist dann die 4. Menuebene ...

Es müßte per CSS möglich sein, die 4. Ebene zunächst auszublenden (dazu hast du ja offenbar schon Infos gefunden) und dann bei Hover wieder einzublenden.

[SchmidtSon]

Ok also mit CSS das umzusetzen, das weiss ich wohl habe aber etwas sorge da ich PHP nicht so firm bin und weiss nicht ob ich dem ganzen ohne Probleme Klassen zuweisen kann.

oder die bestehende Klasse dafür verwenden kann.

Also du hast nicht zufällig bereits sowas realisiert und quellcode für mich 😉

[rictools]

Wenn du das Ausblenden hinbekommst sollte das Einblenden beim Hover-Zustand eigentlich nicht die größte Hürde sein.

Mit PHP hat CSS nichts zu tun, es ist eine Ergänzung zu HTML.

[SchmidtSon]

ok dann werde ich es mal rein mit css versuchen, danke Dir 😉 gebe dir feedback ob es geklappt hat.

 

[BlackCrow]

Vielleicht hilft dir dieser Beitrag weiter?

https://www.prestashop.com/forums/topic/939817-drop-down-subcategories-in-top-menu/

[BlackCrow]

Vielleicht hilft dir dieser Beitrag weiter?

 

[SchmidtSon]

hey danke aber das funktioniert nicht wirklich

es muss doch eine Möglichkeit geben, das umzusetzen?

 

Keine eine Idee?

Habe alles bereits abgesucht aber finde dazu nicht wirklich was ausser sachen die eben nicht funktionieren....

LG
Patrick

[JBW]

Das Menü hat für jede Ebene die EIgenschaft "data-depht" - über diese kannst du frei dein CSS definieren, also z.B. für die dritte Ebene als Selektor:

#header .top-menu a[data-depth="3"] 

Da kannst du dann die dritte Ebene standardmäßig verstecken und bei hover einblenden

[SchmidtSon]

Aber ist das denn mit css so einfach realisierbar?

muss ich dazu nicht Javascript verwenden?

LG und Danke
 

[SchmidtSon]

habe es so versucht aber das funzt nicht wirklich 😄

#header .top-menu a[data-depth="3"] {
	padding: 0 0 0 10px;
	text-decoration: none;
     display: none;
}
#header .top-menu a:hover[data-depth="3"] {
	padding: 0 0 0 10px;
	text-decoration: none;
     display: block;
}

 

[JBW]

Der Hover muss für die Ebene drüber definiert werden, auf Ebene 3 kannst du nicht hovern da die ja nicht sichtbar ist

Beispiele für CSS Menüs findest du z.b. hier
https://www.w3schools.com/css/css_dropdowns.asp