Ich suche ein Megamenu für Contao 5 und habe das von Carsten Götzinger instaliert, steh aber auf dem Schlauch was ich da machen muss. Hat jemand eien Tipp?
Ich suche ein Megamenu für Contao 5 und habe das von Carsten Götzinger instaliert, steh aber auf dem Schlauch was ich da machen muss. Hat jemand eien Tipp?
Wahrscheinlich wird es ein Modul sein, welches du im Layout einbindest - Eventuell gibt es hier auch einen Backend-Menü-Eintrag wie "Artikel" laut der Beschreibung.
Es gibt sonst keine Dokumentation dazu.
Wäre super, wenn du nach erfolgreicher Einrichtung auch deine Vorgehensweise hier im Forum hinterlässt, damit andere Hilfesuchende auch davon profitieren können.
Ja, also man legt ein Navigationsmodul an mit dem Template. Dann braucht man einen oder dann mehrere Artikel, die man einen Menüpunkt zuweisen kann. Das macht man bei den Seiten. Dieser Artiekl erscheint dann anstelle der Unterpunkte. Allerdings ist keien CSS vorhanen, so dass man alles selber stylen muss, d.h. erstmal tut sich garnix. Gibt es noch ein anderes Megamenü für Contao 5?
Rocksolid hat ein Megamenu https://rocksolidthemes.com/de/conta.../dokumentation. Ist aber nicht kostenfrei.
Ansonsten sehe ich in der Erweiterungsverwaltung bei der Suche kein anderes.
Was CSS selbst schreiben betrifft. Das sollte doch nicht unbedingt ein Hindernis sein. Anpassungen von vorhandenem CSS können nach meiner Erfahrung aufwendiger sein als komplett eigenes CSS.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Ich konnte kein anderes Megamenü für Contao 5 finden.
Ja, das CSS muss man scheinbar komplett selbst schreiben. Auch dass sich das Menü per Hover/Klick überhaupt öffnet, muss selbst geschrieben werden.
https://extensions.contao.org/?q=meg...a-menu#require
Das ist das von Rocksolid (s.o.) und das ist auch für Contao 5
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
* https://github.com/cgoIT/contao-megamenu-bundle für C5
* https://github.com/DERHAEUPTLING/contao-mega-menu/ für C 4 - müsste man mal nach Upgrade fragen oder PR machen
* https://pdir.de/news/contao-mega-men...kostenlos.html füralle0.1 Theme - kann man ggf. abkupfern
Geändert von zonky (06.06.2024 um 14:01 Uhr)
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
Der erste Link ist m.E. die hier diskutierte Erweiterung
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
MetaModels-Workshop: ... wo sich die nächste Gelegenheit bietet... oder Extern oder Online
Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
Der TE braucht eine kostenfreie und zu 100% fertig-gestylte und funktionierende Lösung für seine Website, daher würde keines der oben genannten in das Raster fallen:
Option 1 wäre nicht gestyled,
Option 2 scheint veraltet und müsste beauftragt werden,
Option 3 ist nur für das 0.1 Theme
Hi,
ich habe mal versucht von meiner Seite, auf der ich das einsetze, die relevanten Teile aus dem CSS rauszusuchen. Bin aber gerade unterwegs und mir nicht 100%ig sicher, ob das alles war. Aber vielleicht reicht es als Einstieg. Du musst nur schauen. Vermutlich wird die ID #main-navigation bei dir so nicht passen. Farben vermutlich auch nicht, aber das sollte kein Problem sein, das entsprechend anzupassen.
Code:#main-navigation > ul > li:hover > ul, #main-navigation > ul > li:hover > div.mega-dropdown { max-height: 9999px; opacity: 1; padding: 0.875em 1em; pointer-events: auto; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease; -webkit-transition-delay: 0s; transition: all 0.2s ease 0s; z-index: 1; } #main-navigation > ul > li:hover > div.mega-dropdown { position: absolute; right: -20px; color: white; } .mega-dropdown { backface-visibility: hidden; background: rgba(0, 0, 0, 0.9); display: block; font-size: 0.875em; right: 0; max-height: 0; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; transition: max-height 0s ease 0.3s, padding 0s ease 0.3s, opacity 0.3s ease 0s; width: 100%; text-transform: none; } .mega-dropdown h1, .mega-dropdown h2, .mega-dropdown h3, .mega-dropdown h4, .mega-dropdown h5, .mega-dropdown h6, .mega-dropdown h7 { text-transform: none; color: #ffbe1f; font-size: 1em; } .mega-dropdown .image_container { background: none; border: none; } .mega-dropdown a:hover { color: #ffbe1f !important; }
Gerade bin ich dabei das mit dem Vorbild zu probieren: https://codepen.io/mohnaji94/pen/evbWGW .
Das erste Problem, welches ich habe ist, dass der Megamenü DIV im LI dessen Weite hat.
Geändert von ab2211 (17.06.2024 um 10:58 Uhr)
Erst einmal vielen Dank an oetzi!
Ein Update. In meinem Code ist noch ein inside DIV, dadurch muss der CS Code angepasst werden, z.B. #main-navigation > div > ul > li.
Daneben habe ich noch zusätzlich die block Klasse <nav class="mod_megamenu block" id="main-navigation">, dadurch funktioniert das ganze nicht.
Da einfach .mod_megamenu.block {overflow: visible;} zuweisen.
Allerdings zieht bei mir nicht die Weite von 100%. :-(
Geändert von ab2211 (24.06.2024 um 18:05 Uhr)
Ohne Link zur Seite kann man da kaum etwas dazu sagen.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Ui, ja ist klar. Hier ist die Baustelle: contao.global-office.de .
Position: relative = neuer Stacking Context
Am Besten mal nachschauen, welcher Parent hier das position: relative setzt.
Falls es notwendig ist, dann empfehle ich hier ein bisschen die CSS-Basics anzuschauen:
https://www.youtube.com/watch?v=xBPgSc_62rw
Es kommt drauf an wie das Megamenü aussehen und wo es sitzen soll. Soll es über die gesamte Breite des Bildschirms gehen, dann weg mit dem position: relative.
Position relative benutzt man eher für kleine Dropdown-Menüs, die sich direkt unter dem jeweiligen Menüpunkt befinden sollen und somit eine beschränkte Breite haben, da sich die Breite des Menüs an der Breite des Menüpunktes orientiert.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Aktive Benutzer in diesem Thema: 2 (Registrierte Benutzer: 0, Gäste: 2)
Lesezeichen