HTML, CSS & JavaScript → Codes hier kopieren:
Bitte verwendet zum Kopieren und Bearbeiten ausschließlich einen Texteditor wie den Windows-Editor (Notepad) oder Notepad++, damit die UTF‑8 Kodierung erhalten bleibt.
Bitte testet den Einbau dieser Mega‑Menüleiste zunächst in einem neuen Projekt, bevor ihr sie gegebenenfalls in euer eigentliches Projekt übernehmt. Für meine Mega‑Menüleiste habe ich einen einfachen Textblock aus der Rubrik „Article“ des Standard‑Themas „Mobirise5“ verwendet. Wichtig: Das Testprojekt darf noch keine Mobirise‑Menüleiste enthalten. Fügt daher diesen neuen Block ganz oben auf der Startseite ein. Die Anzahl der Seiten im Projekt spielt keine Rolle, denn die Mega‑Menüleiste ist global und erscheint auf sämtlichen Seiten.
Öffnet den Code-Editor des neu hinzugefügten Mobirise-Blocks. Löscht im linken Bereich ("HTML Editor") den gesamten Inhalt und fügt unverändert den HTML‑Code aus meiner Referenz ein. Löscht im rechten Bereich ("CSS Editor") ebenfalls den gesamten Inhalt und fügt unverändert die aus meiner Referenz kopierte CSS ein.
Jetzt fehlt nur noch der JavaScript‑Code, der für die Anzeige auf mobilen Geräten benötigt wird. Bitte kopiert diesen ebenfalls aus meiner Referenz und fügt ihn im globalen Bereich „Before </body> code“ der Site‑Einstellungen ein:
Menü > Sites > Projekt‑Kachel > Zahnrad ⚙️ klicken > Site‑Einstellungen > Global HTML Insert > „Before </body> code“
Damit Mobirise den fertig erstellten Beispiel-Block mit der Mega-Menüleiste als globalen Block erkennt, müsst ihr ihn einmalig neu ins Projekt einfügen: Speichert den Block in den Block-Werkzeugen als „User Block“. Löscht anschließend den gerade erstellten Mega‑Menü‑Block auf der Arbeitsseite und fügt den soeben gespeicherten „User Block“ (aus den den Blocks am + Zeichen) ganz oben auf der Startseite wieder ein. Befinden sich im Projekt bereits mehreren Seiten, fragt die Software, ob der Block „global“ eingefügt werden soll (also auch auf allen Unterseiten). Bestätigt diese Abfrage mit „OK“. Ab diesem Zeitpunkt werden alle künftigen Änderungen am Block automatisch auf allen Seiten übernommen.
Jede Spalte der Mega-Menüleiste entspricht einer eigenen Kategorie. Ich habe die letzte Kategorie im Screenshot unten rot markiert. Jede Spalte wird durch einen solchen <div> Container dargestellt. Wenn ihr weitere Spalten benötigt, kopiert einfach den rot markierten Bereich und fügt ihn unterhalb dieses <div> Containers erneut ein. Ändert den Kategorie-Namen sowie die Links zu den Bildern und zu den URLs - diese müsst ihr ohnehin alle an eure Zwecke anpassen, denn die bereits vorhandenen Bilder und URLs dienen ja nur als Beispiel. So lässt sich die Breite der Menüleiste erweitern. Die Breite darf jedoch nicht breiter als der Mobirise-Block werden.
Natürlich könnt ihr Spalten ebenso gut ohne Bilder oder mit mehreren Bildern verwenden. Die Bilder liegen jeweils in einzelnen <div> Containern, die ihr kopieren oder löschen könnt.
Quellcode im Code Editor
