Wordpress Divi Extra Mega Menu?

1 Antwort

Am einfachsten ist es, sich auf Änderungen in CSS zu beschränken.

Sie können beispielsweise zusammen mit der Stilklasse „mega-menu“ dem gewünschten Menüelement eine eigene Stilklasse hinzufügen. Das ist zum Beispiel „mega-menu my-mega-menu“ statt nur „mega-menu“.

https://www.elegantthemes.com/documentation/divi/mega-menus/

Danach können Sie das Verhalten dieses Mega-Menüs mit Hilfe zusätzlicher CSS-Anweisungen neu definieren. Zum Beispiel so:

#et-navigation .mega-menu.my-mega-menu > ul {
	flex-direction: column;
	min-height: 100vh;
	min-height: calc( 100vh - 80px );
}
#et-navigation .mega-menu.my-mega-menu > ul > li.menu-item-has-children {
	position: static;
}
#et-navigation .mega-menu.my-mega-menu > ul > li > ul {
	position: absolute;
	top: 15px; /* = padding of <ul> */ 
	bottom: 15px;
	right: 15px;
	left: 25%; /* = width of the first column */
 	display: none;
	overflow-y: auto;
  width: auto;
}
#et-navigation .mega-menu.my-mega-menu > ul > li:hover > ul {
	display: block;
}

Woher ich das weiß:Beruf – Ich erstelle Wordpress-Themes, Plugins und Online-calculator
 - (Computer, Technik, Technologie)

Wie großartig ist das denn??? In etwa so habe ich es mir vorgestellt =)
Sag mal... eine blöde Frage: Weißt du zufällig, wie ich das Menü auf dem Handy so einrichte, dass es wie auf www.idealo.de funktioniert? Also dass wenn ich auf das Hamburger Menü klicke, erst die Oberkategorien sichtbar werden und mit klick auf eine Kategorie sich dann die Unterkategorien öffnen?

0
@julianbn

Es scheint, dass ich meine Version bereits angeboten habe, um ein solches Problem zu lösen:

https://www.gutefrage.net/frage/wordpress-divi#answer-351103929

Und bei der aktuellen Antwort habe ich vergessen, dass das gesamte CSS in eine Medienabfrage eingeschlossen werden muss:

@media only screen and (min-width: 1024px) {
	#et-navigation .mega-menu.my-mega-menu > ul {
		flex-direction: column;
		min-height: 100vh;
		min-height: calc( 100vh - 80px );
	}
	#et-navigation .mega-menu.my-mega-menu > ul > li.menu-item-has-children {
		position: static;
	}
	#et-navigation .mega-menu.my-mega-menu > ul > li > ul {
		position: absolute;
		top: 15px; /* = padding of <ul> */ 
		bottom: 15px;
		right: 15px;
		left: 25%; /* = width of the first column */
		display: none;
		overflow-y: auto;
	 width: auto;
	}
	#et-navigation .mega-menu.my-mega-menu > ul > li:hover > ul {
		display: block;
	}
} 
1
@glebkema

Vielleicht kannst du dir ja mal die mobile Version von Idealo.com ansehen, so ähnlich würde ich das auch gerne auf dem Handy (also auf Mobilgeräten) lösen.
Vielleicht hast du da einen Tipp für mich. 1000 Dank für deine Unterstützung!

0
@julianbn

Leider habe ich keine fertige oder schnelle Lösung für ein solches Menü.

Sie können die Tools des Entwicklers im Browser verwenden, um zu sehen, wie HTML, CSS und JavaScript für verschiedene Menüs angeordnet sind, welche Themen und Plugins verschiedene Websites verwenden.

Es ist auch gut, typische Lösungen zu sammeln und zu erfahren, mit welchen Plugins welche Ergebnisse erzielt werden können. Typische Lösungen und bewährte Skripte werden häufig auf der Website https://stackoverflow.com/ erwähnt.

Versuchen Sie außerdem, selbst herauszufinden, wie Sie ein solches Menü erstellen können. Dann wird klarer, was auf der Website überarbeitet werden muss. Dazu müssen Sie häufig nicht nur das CSS und die JavaScript ändern, sondern auch Ihren PHP-Code zum Thema hinzufügen.

1

Was möchtest Du wissen?