overlay-Menü wie auf Contao.org

**µaTh** · 22.12.2016, 15:28

Hallo zusammen,

ich möchte gerne für meine Navigation die Idee von contao.org aufgreifen: das overlay-Menü.

Ist der Bildschirm zu klein für meine aktuelle Navigation, dann soll statt der Navigation nur ein Navigationsmenü-Icon erscheinen. Klickt der User darauf, dann öffnet sich die eigentliche Navigation in einem bildschirmfüllenden Overlay-Menü.

Welche Technik muss ich dafür anwenden? (Menü-Icon einblenden ist kein Problem. Und wie geht es dann weiter?)

Liebe Grüße
µaTh

**Andreas** · 22.12.2016, 21:21

Entweder direkt [dk_mmenu] nehmen, oder per JS beim Klick auf das Icon dem Menü eine andere CSS-Klasse zuweisen. Dann anhand der CSS-Klasse den Overlay-Zustand formatieren.

**mlweb** · 22.12.2016, 22:39

Mit dem "bildschirmfüllenden Overlay-Menü wie bei contao.org" scheint mir eher ein Megamenue gemeint zu sein, [dk-mmenu] kann das doch nicht oder?
Von Rocksolid kenne ich eine Erweiterung Megamenue, ist aber nicht kostenfrei.

**planepix** · 22.12.2016, 22:46

Schau dir vielleicht auch noch die Erweiterung von Kamil an:
https://codefog.pl/extension/mobile-...ab-description

**Andreas** · 23.12.2016, 12:55

Zitat von mlweb

Mit dem "bildschirmfüllenden Overlay-Menü wie bei contao.org" scheint mir eher ein Megamenue gemeint zu sein, [dk-mmenu] kann das doch nicht oder?

Ja, ich hatte das nur als Beispiel erwähnt, weil sie es ja anscheinend nur für responsiv als Overlay haben möchte. Man könnte das evtl. anpassen, würde ich aber wahrscheinlich auch nicht machen. Eine Option einen Artikel ins Menü zu integrieren ist wohl schon mit on Board.

Die Erweiterung von Kamil sieht auch gut aus, ist ein guter Entwickler. Hat er das JS eigentlich selbst geschrieben, oder baut er da auch auf mmenu? Bei dk_mmenu kommt der Entwickler wohl leider nicht dazu mal den JS-Core aus http://mmenu.frebsite.nl/ zu aktualisieren.

So ein Overlay wie bei contao.org kann man allerdings wirklich am besten mit ein paar Zeilen JS machen, welches eine Klasse austauscht. Innerhalb des Wrappers in welchem sich die Navigation befindet können ja auch noch andere Elemente hinzugefügt werden, welche dann in dem Overlay erscheinen. Dann hast du dein "Megamenü".

**µaTh** · 23.12.2016, 17:30

vielen Dank für die ganzen Anregungen, Tipps und Links.

Eben bin ich noch auf dieses Codebeispiel gestoßen:
http://www.w3schools.com/howto/howto...en_overlay.asp

Ich sondiere jetzt welche der vielen Ideen/Lösungen bei mir passt.

**Durchschuss** · 02.01.2017, 14:40

Dazu habe ich auch noch eine Frage. Da ich von der contao.org durchaus angetan bin und bestimmte Ansätze in einem aktuellen Projekt ähnlich umsetzen möchte, habe ich mir den Quelltext angeschaut und bin auf Klassen gestoßen, die ich aus Bootstrap schon kenne. Heißt das das bei contao.org bootstrap eingebunden ist?

**mlweb** · 02.01.2017, 15:08

Im core von contao ist kein bootstrap eingebunden aber es gibt m.E. eine Erweiterung die genau das leistet.

**Durchschuss** · 02.01.2017, 18:53

Danke für die schnelle Antwort, aber das war leider nicht meine Frage. Meine Frage ist ob die Website www.contao.org ein Bootstrap Plugin benutzt? Da ich im Quelltext col-sm-xx Klassen endeckt habe.

**medienworx** · 12.01.2017, 19:20

Das würde mich auch brennend interessieren wie sie das umgesetzt haben.

**Spooky** · 13.01.2017, 22:59

Das overlay Menü auf Contao ist höchstwahrscheinlich keine Extension. Sondern vermutlich einfach nur eine Custom Section mit regulären Modulen, plus eigenem CSS und JavaScript.

***hofff*** · 14.01.2017, 15:44

Zitat von Durchschuss

Danke für die schnelle Antwort, aber das war leider nicht meine Frage. Meine Frage ist ob die Website www.contao.org ein Bootstrap Plugin benutzt? Da ich im Quelltext col-sm-xx Klassen endeckt habe.

contao.org ist auf Bootstrap umgesetzt, aber nur ein Teil wird benutzt. Ich weiß, dass Kim auf jeden Fall das Grid von BS nutzt, deshalb findest du auch die col-Klassen. Ich denke das JS hat Leo selbst geschrieben.

Aber die Funktionalität das Overlay-Menüs von contao.org kannst du sicherlich mit einem Bootstrap-Script auch umsetzen.

Gesendet von iPhone mit Tapatalk Pro

**comanche** · 04.04.2017, 09:30

Zitat von µaTh

ich möchte gerne für meine Navigation die Idee von contao.org aufgreifen: das overlay-Menü.

Und ich möchte diese Frage gerne nochmal aufgreifen. :-)

Gibt es inzwischen eine Erweiterung, die ein Overlay-Menü ermöglicht?
Oder hat jemand ein Overlay-Menü realisiert und möchte uns verraten, wie genau es umgesetzt werden kann?

Grüße,
Andreas

**korlbeu** · 04.04.2017, 09:36

ich hab das mal realisiert
http://www.meilenstein-augenoptik.de/

**mlweb** · 04.04.2017, 10:10

Rocksolid Mega Menu sollte so etwas leisten. Ist aber nicht kostenfrei. Wird auf jeden Fall mit der Lizenz einiger (vielleicht auch aller) Themes mit erworben. Wie die Preisgestaltung/Lizenzvergabe nur für das Mega Menu aussieht weiss ich nicht.

**mlweb** · 04.04.2017, 10:13

@korlbeu Sieht schick aus. Werd ich mir bei Gelegenheit mal genauer anschauen.

**NetMediaWork** · 04.04.2017, 10:15

Zitat von comanche

Und ich möchte diese Frage gerne nochmal aufgreifen. :-)

Gibt es inzwischen eine Erweiterung, die ein Overlay-Menü ermöglicht?
Oder hat jemand ein Overlay-Menü realisiert und möchte uns verraten, wie genau es umgesetzt werden kann?

Grüße,
Andreas

Hallo,

geht in diese Richtung, vielleicht hilft das => https://blog.jst-media.de/fullscreen...enu-in-contao/

**comanche** · 04.04.2017, 10:39

Zitat von korlbeu

ich hab das mal realisiert
http://www.meilenstein-augenoptik.de/

Schick! Möchtest du einem Laien verraten, wie es umgesetzt werden kann?

Grüße,
Andreas

**comanche** · 04.04.2017, 10:40

Zitat von mlweb

Rocksolid Mega Menu sollte so etwas leisten. Ist aber nicht kostenfrei. Wird auf jeden Fall mit der Lizenz einiger (vielleicht auch aller) Themes mit erworben. Wie die Preisgestaltung/Lizenzvergabe nur für das Mega Menu aussieht weiss ich nicht.

Danke, aber das Megamenü ist etwas anderes als ein Overlay-Menü.

Grüße,
Andreas

**korlbeu** · 04.04.2017, 11:06

Ich hab ne kleine Extension geschrieben.

**comanche** · 04.04.2017, 12:18

Zitat von korlbeu

Ich hab ne kleine Extension geschrieben.

Herzlichen Dank!

Werd' mich mal reinarbeiten ...

Grüße,
Andreas

**Andreas** · 04.04.2017, 23:21

Ansonsten kann man jeden Artikel dafür nehmen. Reinpacken was man möchte - Navigation, Suchformular, Adresse .... Den Artikel im Layout einbinden. Einen click Event auf ein Element aufsetzen (Hamburger, Kreuz) welches eine CSS-Klasse in diesem Artikel verändert. Per CSS gestalten.

**Max Kittel** · 12.01.2018, 13:50

Hallo kolbeu,

vielen Dank für Deine Erweiterung. Was muss ich anstellen, damit sie auch unter der atuellen 3.5 Version läuft.

Vielen Dank
Max

**Andreas** · 17.01.2018, 19:14

Es gibt bereits eine Erweiterung, die das macht. Ist oben von planepix bereits erwähnt. [mobile_menu]. Läuft auf 3.5 und 4. Kamil arbeitet schon sehr lange mit und für Contao, somit wird diese Erweiterung wohl auch noch sehr lange gepflegt werden. Kamil ist ein versierter Entwickler. Zusätzliche Wünsche meinerseits hat er auch gerne integriert.