Mobirise Tutorials

Tutorial

Mega-Menü adaptiert von Mobirise-Menüleiste. Dieses Projekt wurde mit der Hilfe von der KI ChatGPT erstellt. Dieser Test ist nur mit den jetzt angelegten vier Spalten möglich, da man diese Spalten nicht dynamisch anpassen kann. Das Dropdown muss auch in der Navi möglichst weit links erstellt werden, damit es nicht am rechten Rand überläuft. Daher halte ich es für besser ein ganz eigenes Mega-Menü zu entwickeln wie zum Beispiel dieses Mega-Menü.

Der Einbau ist eigentlich recht einfach.

Erstelle eine ganz normale, beliebige Menüleiste von Mobirise. Ich habe das jetzt hier bisher nur mit der Menüleiste aus dem Standard-Thema "Mobirise5" gemacht und kann daher nichts zu anderen Themen oder gar "Mobirise4" sagen. Wahrscheinlich müssen bei anderen Mobirise‑Themen, deren Menüleisten‑CSS vom Mobirise5‑Thema abweicht, Anpassungen vorgenommen werden. Ihr könnt das entweder selbst mit ChatGPT versuchen oder mir das genaue Thema in meinem Forum nennen - wenn ich Zeit habe, übernehme ich die Änderung.

Erstelle ein Dropdown-Menü mit ein oder zwei Untermenüs und benenne es so, dass Du es im "Code Editor" wieder finden wirst.

Suche dann im HTML-Code  vom "Code Editor" nach:

<li class="nav-item dropdown">

→ Ersetze dieses komplette <li> Tag </li> Tag deines originalen Dropdown mit meinem HTML-Code unten. Wichtig: Die Bilder müssen eine absolute URL zum Server haben. Das heißt die Bilder sollten sich schon zuvor auf dem Server befinden. Passe also die URL entsprechend zu Deinem Server an und natürlich auch alle Links. Die Hintergrundfarbe sowie auch die Linkfarben lassen sich in den jeweiligen Block-Werkzeugen ändern. Die Farbe der Kategorien-Texte müsst ihr im Code anpassen. Hier wurde "text-white" verwendet, was eine Bootstrap-Class ist:

<h6 class="mb-2 text-white">Test 1</h6>

Natürlich können beliebig viele Links in jeder Spalte hinzugefügt/gelöscht werden, indem ihr einfach weitere <li> Tags einfügt oder eben löscht. Mit dem "+" Zeichen in den Linkwerkzeugen könntet ihr zwar theoretisch Links hinzufügen, allerdings nicht als <li> Tag. Fügt solche Links deshalb ausschließlich im "Code-Editor" hinzu. Das Rautezeichen # ersetzt ihr dann mit der URL von eurem Link und passt den Text "Link1" dann an:

<li><a class="py-0" href="#" data-app-placeholder="Type Text">Link1</a></li>

→ Kopiere nun noch die zusätzliche CSS (unten) an die vorhandene CSS von Mobirise (rechts) im Fenster "CSS Editor" unten dran. Meine Pseudo id="myMegaContentMarker" dient nur als Kommentar dazu, den hinzugefügten Code zu markieren, falls er später wieder entfernt werden soll. Die darüber befindliche CSS von Mobirise bleibt unangetastet.