Mega Menü

Beitrag von **Volker** » Sa 11. Okt 2025, 21:47

Hallo zusammen,

Tommy und ich haben ja gleichzeitig am Mega Menü für den direkten Einbau in Mobirise gearbeitet.

Meine Version und die dazugehörigen Codes könnt ihr in Zukunft direkt von meiner Seite kopieren, weil es hier
im Forum zu unübersichtlich wird, wenn ich da immer Code Neuerungen poste.

Meine Version unterscheidet sich von Tommys Version im Aufbau und könnte Probleme mit vorhanden Projekten geben.

Bei meinen Tests ( auch auf meiner Webseite niederastroth.de ) habe ich keine Fehler mehr feststellen können. Tommy hatte riesige Probleme, die ich nicht reproduzieren konnte.

Macht bitte vor Einbau eine Sicherungs Kopie eurer Projekt Datei um auf der sicheren Seite zu sein.

https://www.niederastroth.de/

Beitrag von **Tommy Herrmann** » So 12. Okt 2025, 07:06

Moin Volker,

ich habe mir gerade das neue Video mal angesehen. Wenn das alles so klappt, ist das schon eine tolle Sache.

Folgende Frage und Anregungen habe ich.

> Wieso sitzen die Links so unschön am oberen Rand? Die müssen doch mittig in der Menüleiste sitzen - oder ist das nur in dem Video so.

> Du hast in Deinem Video genau das gemacht, was ich jetzt zum xten Mal versuche zu beschreiben. Du hast ein neues Projekt erstellt und zunächst nur die Startseite im Projekt. Dort passt Du die Menüleiste mit Deinen Skripten an. Erst dann erstellst Du Unterseiten.

Ich hatte Dir erklärt, dass mein Projekt mehrmals zerschossen wurde, weil es schon weitere Unterseiten besessen hat, da dann die neue Menüleiste eben beim Aufruf einer solchen bereits vorhandenen Unterseite zerschossen wurde.

Das ist also ein riesen Unterschied ob schon Unterseiten bestehen (wie bei meinen Tests) oder eben noch nicht (wie bei Deinen Test).

Bitte teste das im Standard-Thema "Mobirise5", denn ich vermute, dass Mobirise mit deinen Variablen die Du setzt die Menüleiste nicht in bereits vorhandene Seiten kopieren kann und es daher zum Absturz kommt.

Ich muss daher davor warnen das mit einem wichtigen Projekt zu testen, das sehr wahrscheinlich bereits Unterseiten hat - vielleicht 50 oder so - die dann im schlimmsten Fall kaputt gehen könnten. Bei mir waren die zerschossenen Seiten allerdings wieder da, nachdem ich die mit dem Mega-Menü versehene Menüleiste komplett gelöscht habe.

Ich habe es dreimal neu getestet und hatte immer das gleiche katastrophale Ergebnis im Standard-Thema "Mobirise5". Sollte es mit einem vorhandenen Projekt, das auch bereits auf allen Seiten eine Mobirise-Menüleiste hat (wie es ja der Normalfall ist), also mit mehreren oder mindestens einer Unterseite bei Dir oder anderen funktionieren, verstehe ich die Welt nicht mehr

Anderenfalls solltest Du meine Warnungen in Zukunft auch so testen wie ich es beschreibe, ansonsten kann ja nicht das gleiche Ergebnis dabei herauskommen, denn dein Video hat mit meinen Tests absolut gar nichts zu tun und zeigt eine vollkommen andere Vorgehensweise.

Beitrag von **Volker** » So 12. Okt 2025, 08:22

Moin Tommy,

ich hatte Dich ja in einem Post um diese Projekt Datei gebeten um diesen Fehler sehen zu können. Hast Du entweder überlesen oder willst mir die nicht geben

Ich habe wie gesagt bei bestehenden Seiten ( unter anderem bei meiner niederastroth.de) dieses Menü Mehrfach ein und aus gebaut. Ich habe , was ich noch nie in meinem Leben gemacht habe, mit Mobirise publiziert.

Was soll ich noch machen ? Es ging überall ohne Fehler, ohne zerschossene Blöcke usw. Selbst auf meiner sehr großen Seite sound-dj.de hat das geklappt. Da konnte ich, weil M4, allerdings das Mega Menü nicht ausklappen, aber es war auf allen Seiten sichtbar, ohne Blöcke zu löschen oder beschädigen.

Ich habe auch eine Seite mit Standard M5 Theme mit 2 Unterseiten erstellt, auch da lief es.

Zum Style Thema: Das kann und werde ich noch ändern das es nicht so oben klebt. Ich werde auch noch das versetzen des Menüs ermöglichen, Links, Mitte, Rechts.

Ich sage ja auch in meinem Video das man seine Projekt Datei sichern soll. Wenn wirklich was in die Hose geht kann man dieses Menü eben nicht verwenden. Aber auch bei mir ist es wie bei Mobirise selber, Fehler passieren

Beitrag von **Volker** » So 12. Okt 2025, 08:54

Nachtrag:

Unterseiten sind verlinkt : https://www.niederastroth.de/tommy/

Beitrag von **Tommy Herrmann** » So 12. Okt 2025, 09:21

Moin,

sage mal - ich glaube Du inzwischen fast, dass Du mich nicht verstehen willst

Jetzt fügst Du die fertig bearbeitete Menüleiste ein

Das habe ich Dir doch als Workaround selbst so vorgemacht - über die "User Blöcke" - hier steht es noch unter:

Menü-Block global machen

viewtopic.php?p=18551#p18551

Du beschreibst in allen Deinen Videos, dass man die vorhandene Menüleiste auf der Startseite bearbeiten soll - dort die Inhalte löscht und den leeren Code Editor dann mit Deinen Inhalten bestückt.

Das machst Du jetzt wieder nicht

Solange Du es in einem Projekt mit nur einer Startseite machst geht das auch - aber NICHT wenn es schon einen Haufen Unterseiten gibt, die auch bereits eine Mobirise-Menüleiste hatten.

… teste es RICHTIG oder nicht - mir wird das jetzt zu viel - ich kann mich nicht ständig und nochmals und immer wieder wiederholen, nur damit Du im Anschluss wieder etwas anders machst.

Ich habe sogar mehrere Videos von meiner Vorgehensweise extra deswegen erstellt - hast Du die überhaupt angeguckt? Da kann man meine Vorgehensweise doch haarklein sehen. Hier nochmals das letzte Video. Die gesetzten Links werden obendrein, nach dem lokalen Publizieren (kann man im Video sehen), auch noch gelöscht und vieles mehr kann passieren, was ich mit dem Video eigentlich zeigen wollte, das teilweise Blöcke komplett weg waren, außer Footer und Menü - das aber erst nach dem entfernten Publizieren.

Dann habe ich das Video aus Frust abgebrochen, weil noch nicht einmal die echten Links erhalten bleiben, alles was erhalten bleibt sind die Links mit eine Raute #

Beitrag von **Volker** » So 12. Okt 2025, 09:33

Ich brech langsam ab Tommy, es geht bei mir !!

Ich entschuldige mich für den rauen Ton, aber ich kann hier keine Fehler feststellen

Beitrag von **Tommy Herrmann** » So 12. Okt 2025, 09:42

Wieder nicht meine Vorgehensweise.

Meine Vorgehensweise hat zwei Seiten und in der Menüleiste befindet sich bereits ein Dropdown.

Natürlich stehen mit vorhandenem Dropdown andere Dinge in der vorhandenen Projekt-Datei als bei Dir. Warum erstellst Du nicht ein Projekt wie meines.

> Startseite

> Unterseite

> Menüleiste mit Dropdown in dem nur der Link zur Unterseite gesetzt ist.

> Jetzt ändere auf der Startseite die Menüleiste.

> Wenn Du diese Menüleiste auf der Startseite geändert hast öffne die Unterseite.

Ich bin jetzt weg und weiß nicht genau wann ich zurück bin. Es ist ja auch egal, ich habe meine Erkenntnisse hier mitgeteilt und die Erfahrungen was passiert muss dann jeder selbst machen.

P.S.:

ach ja - die Links habe ich im echten Menü gesetzt und nicht in diesem "Immer offen" Pseudo-Teil.

Beitrag von **Volker** » So 12. Okt 2025, 09:54

Was soll ich noch machen ??

Beitrag von **Tommy Herrmann** » So 12. Okt 2025, 10:07

Ja - keine Ahnung. Ich hätte den Fehler auch gerne weg - ich bekomme ihn aber nicht weg.

Hattest Du denn das Projekt auch vor dem Einbau Deines Mega-Menüs lokal publiziert und auch Mobirise beendet? Damit die Datei "project.mobirise" überhaupt mit den Mobirise-Menü-Daten gespeichert wird. Ich bin mir nichts sicher, ob dann (ohne Speichern) auch alles in der Projekt-Datei steht.

Aber lasse es doch jetzt einfach so. Ich werde das ohnehin nicht verwenden und wenn irgendwann vielleicht der Fehler auch bei jemand anderem auftaucht, dann wird der sich schon melden.

Meine Projekt-Datei hat zu viele Inhalte, die ich nicht wirklich weitergeben will wie API-Code zu verschiedenen Anwendungen - das ist mir jetzt zu viel Arbeit das alles zu entfernen.

Beitrag von **Volker** » So 12. Okt 2025, 10:13

Ich werde jetzt auch nochmal erst lokal publizieren und dann nochmal testen.
Ich vermute bei dir ist irgend ein Java Script im Projekt was quer schießt. Bei normalen Blöcken ist das 100% sicher und ohne Fehler.

wenn ich diesen code in einen menüblock in mobirise einfüge funktioniert das bei mir. bei einem freund hat das nicht funktioniert und er hatte problem mit seinen vorhanden blöcken. kann das an javascript in seinen blöcken liegen oder an was noch?

Das Problem könnte mehrere Ursachen haben. Hier sind die wahrscheinlichsten Gründe, warum der Mega-Menü-Code bei deinem Freund nicht funktioniert:

Mögliche Ursachen:
1. Bootstrap-Versionskonflikt
Der Code verwendet Bootstrap 5.1 (data-bs-version="5.1"). Wenn dein Freund in seinen vorhandenen Blöcken eine andere Bootstrap-Version nutzt (z.B. Bootstrap 3 oder 4), gibt es Konflikte:

data-bs-toggle vs. data-toggle
Unterschiedliche CSS-Klassen und Grid-Systeme
JavaScript-Funktionen, die nicht kompatibel sind
2. JavaScript-Konflikte
Ja, JavaScript in seinen bestehenden Blöcken kann definitiv Probleme verursachen:

Andere Dropdown-Plugins überschreiben das Bootstrap-Dropdown
jQuery-Versionen kollidieren
Event-Listener werden mehrfach registriert
Namespace-Konflikte bei globalen Variablen
3. CSS-Spezifität und Überschreibungen
Vorhandene CSS-Regeln könnten deine Styles überschreiben:

Höhere Spezifität in seinen bestehenden Styles
!important-Deklarationen
Andere sticky/fixed Menüs, die die z-index-Hierarchie stören
4. Fehlende Abhängigkeiten
Bootstrap JS ist nicht korrekt eingebunden
jQuery fehlt oder ist in falscher Version
Popper.js (wird von Bootstrap 5 für Dropdowns benötigt) fehlt
5. Lokale Bild-Pfade
Die file://-Pfade in deinem Code funktionieren nur lokal:

html
src="file:///C:/Users/volker/AppData/Local/..."
Das muss bei ihm angepasst werden.

Lösungsvorschläge:
Für deinen Freund zum Testen:

Neues leeres Projekt erstellen und nur den Mega-Menü-Block einfügen
Bootstrap-Version prüfen in seinen bestehenden Blöcken
Browser-Konsole öffnen (F12) und nach JavaScript-Fehlern suchen
CSS-Isolation testen: Dem Menü eine höhere Spezifität geben:
css
.mega-menu-volker.mega-menu-volker {
/* Verdoppelte Klasse erhöht Spezifität */
}
Bildpfade anpassen - relative Pfade oder Online-URLs verwenden
Möchtest du, dass ich dir eine verbesserte, robustere Version des Codes erstelle, die weniger anfällig für Konflikte ist?

Beitrag von **Tommy Herrmann** » So 12. Okt 2025, 11:25

Ich hatte das Projekt gelöscht und nun nochmals mit der bereits fertigen Mega-Menüleiste importiert.

Offensichtlich hat das mein Problem behoben.

https://www.mobirise-tutorials.com/Test ... nu-Volker/

Jetzt bleiben auch die Links erhalten.

Ein JavaScript ist in meinem Code aber noch nicht mit dabei - reine CSS.

Dennoch - eine bestimmte Konstellation hat den Einbau bei mir fast unmöglich gemacht.

Ich werde mal noch meinen HTML und meinen CSS Code posten.

Meine Freigabe hast Du

Beitrag von **Volker** » So 12. Okt 2025, 11:41

Das freut mich jetzt echt Tommy

Langer Weg, aber es geht

Warum das bei Dir in die Hose gegangen ist kann ich wie gesagt nicht sagen und nur vermuten. Vielleicht baut es ja noch jemand mal ein ( auch gerne nur Testweise )

Ich finde jetzt hat man ein Mega Menü das Mobirise bis heute nicht zur Verfügung gestellt hat und kann jede Menge Inhalte, Links usw. auf der Seite zeigen.

Beitrag von **Tommy Herrmann** » So 12. Okt 2025, 11:45

Wieso ist da bei Dir im HTML noch ein JavaScript. Das habe ich noch nicht, ist das später hinzugekommen? Ich benötige es auch nicht.

Vergleiche mal unsere Code. Bei mir kannst Du die mit einem Klick kopieren.

https://www.mobirise-tutorials.com/Test ... orial.html

Wenn Du das Kopier Script haben willst, kann ich es hier posten. Ist aber auch wieder etwas tricky weil Mobirise das <textarea> Tag falsch interpretiert. Den Bug habe ich auch schon gemeldet.

Beitrag von **Volker** » So 12. Okt 2025, 11:48

Das Java Script hab ich da rein gehauen, falls man mal vergisst den schalter zu klicken. damit das Menü nicht auf ist schon bei Start. Sicher ist Sicher

Poste mal Dein Code Block. Den brauch ich

Beitrag von **Tommy Herrmann** » So 12. Okt 2025, 12:13

Der Code steht anstelle des Beispieltextes in einem Textblock der Rubrik "Articel" (eigentlich egal welcher Block).

Du kopierts im oberen <textarea> deinen HTML Code rein (wie er ist) - im unteren in das <script> Tag jeden CSS Code rein, denn Mobirise schmeißt alles mit geschfeiften { Klammern } sonst raus

Dazu benötigts Du dann am Ende des <body> Codes noch diese JavaScript um das zu übersetzen:

JavaScript

Code: Alles auswählen

  <!-- Kopieren von beliebig vielen Codes mit unterschiedlichen ID -->
  <script>
    (() => {
      // Füllt alle Textareas mit data-src aus den "inerten" Quellen
      function hydrateCodeTextareas() {
        document.querySelectorAll('textarea[data-src]').forEach(ta => {
          const srcId = ta.dataset.src;
          const srcEl = document.getElementById(srcId);
          if (!srcEl) return;
          // Bei <script type="text/plain"> funktioniert textContent zuverlässig
          const raw = (srcEl.textContent || srcEl.innerHTML || '').replace(/^\s*\n/, '');
          ta.value = raw;
        });
      }
      
      // Copy-Button: funktioniert für 1 oder viele Buttons
      async function copyFromTarget(btn) {
        const sel = btn.dataset.target;
        const ta = document.querySelector(sel);
        if (!ta) return;
        const original = btn.textContent;
        btn.disabled = true;
        try {
          await navigator.clipboard.writeText(ta.value);
          btn.textContent = 'Kopiert!';
        } catch {
          ta.focus(); ta.select();
          const ok = document.execCommand && document.execCommand('copy');
          btn.textContent = ok ? 'Kopiert!' : 'Fehlgeschlagen';
        } finally {
          setTimeout(() => { btn.textContent = original; btn.disabled = false; }, 1200);
        }
      }
      
      document.addEventListener('DOMContentLoaded', () => {
        hydrateCodeTextareas();
        
        // Event-Delegation: 1 Handler für alle Copy-Buttons
        document.addEventListener('click', (e) => {
          const btn = e.target.closest('.copy-btn');
          if (btn && btn.dataset.target) copyFromTarget(btn);
        });
      });
    })();
  </script>

Block HTML (steht jetzt mein Mega-Code drinnen. Die Sonderzeichen (Maskieren) setzt Mobirise nach dem Publizieren selbst ein - jedes HTML und jedes CSS benötigt eine eigne ID auch am jeweiligen Button:

Code: Alles auswählen

<div class="code-block mb-3">

    <div class="d-flex justify-content-between align-items-center mb-2">
        <button type="button" class="btn btn-primary btn-sm copy-btn" data-target="#code1">
          Kopieren
        </button>
        <small class="text-muted" id="copy-msg-1" aria-live="polite"></small>
    </div>
                    
<textarea id="code1" style="height: 400px; width: 100%;" class="mycode" spellcheck="false" wrap="off" readonly>&lt;section data-bs-version="5.1" class="menu mega-menu-volker" group="Menu" menu-align="center" plugins="DropDown, TouchSwipe" always-top global once="menu" not-draggable&gt;


  &lt;mbr-parameters&gt;
    &lt;header&gt;Show/Hide&lt;/header&gt;
    &lt;input type="checkbox" title="Logo" name="showLogo" checked&gt;
    &lt;input type="checkbox" title="Brand Name" name="showBrand" checked&gt;
    &lt;input type="checkbox" title="Menu Items" name="showItems" checked&gt;

    &lt;header&gt;Mega-Menü&lt;/header&gt;
    &lt;select title="Spaltenzahl" name="megaCols"&gt;
      &lt;option value="1"&gt;1 Spalte&lt;/option&gt;
      &lt;option value="2"&gt;2 Spalten&lt;/option&gt;
      &lt;option value="3"&gt;3 Spalten&lt;/option&gt;
      &lt;option value="4" selected&gt;4 Spalten&lt;/option&gt;
    &lt;/select&gt;
    
    &lt;input type="checkbox" title="Mega-Menü immer offen (Editor)" name="megaAlwaysOpen"&gt;

    &lt;header&gt;Farben &amp; Schrift&lt;/header&gt;
    &lt;input type="checkbox" title="Sticky" name="sticky" checked&gt;
    &lt;input type="color" title="Hintergrundfarbe" name="menuBgColor" value="#000000"&gt;
   
    &lt;input type="color" title="Linkfarbe" name="linkColor" value="#6592e6"&gt;
    &lt;input type="color" title="Mega-Menü Linkfarbe" name="megaMenuLinkColor" value="#8caff0"&gt;
    &lt;input type="color" title="Hamburger Farbe" name="hamburgerColor" value="#ffffff"&gt;
    &lt;input type="range" title="Schriftgröße (rem)" name="linkSize" min="0.8" max="1.6" step="0.05" value="1.15"&gt;
    &lt;input type="color" title="Mega-Menü Hintergrundfarbe" name="megaBgColor" value="#000000"&gt;
    &lt;input type="range" title="Mega-Menü Überschrift Größe (rem)" name="megaHeadingSize" min="0.8" max="2.5" step="0.1" value="1.2"&gt;
    &lt;input type="range" title="Mega-Menü Link Größe (rem)" name="megaLinkSize" min="0.7" max="1.8" step="0.05" value="1.2"&gt;
    &lt;input type="range" title="Mega-Menü Transparenz" name="megaOpacity" min="0" max="1" step="0.05" value="0.9"&gt;
    
  &lt;/mbr-parameters&gt;

  &lt;nav class="navbar navbar-dropdown" mbr-class="{'navbar-fixed-top':sticky,
                     'navbar-expand-lg':!collapsed,
                     'collapsed':collapsed}"&gt;
    &lt;div class="container d-flex align-items-center" mbr-style="{'justify-content': menuAlign, 'background-color': containerBgColor}"&gt;


      &lt;!-- Logo + Brand --&gt;
      &lt;div class="navbar-brand d-flex align-items-center gap-3"&gt;
        &lt;span mbr-if="showLogo"&gt;
          &lt;a href="https://www.mobirise-tutorials.com/" target="_blank"&gt;
            &lt;img src="file:///C:/Users/Thoma/Documents/Mobirise/Menu-Generator-Volker-Testseite/assets/images/logo-mobirise-250x250_1.png" alt="Logo" title="Mobirise-Tutorials.com" data-app-img="image" class="logo-img"&gt;
          &lt;/a&gt;
        &lt;/span&gt;
        &lt;span mbr-if="showBrand" class="navbar-caption" data-app-placeholder="Titel bearbeiten"&gt;&lt;a href="https://www.mobirise-tutorials.com/" target="_blank"&gt;Mobirise-Tutorials&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;

      &lt;!-- Hamburger Button --&gt;
      &lt;button style="
            color: white;
            display: none;
          " type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
          ☰
      &lt;/button&gt;

      &lt;!-- Collapsible Menu Content --&gt;
      &lt;div class="collapse navbar-collapse" id="navbarContent"&gt;
        &lt;!-- Menü-Container mit Gap --&gt;
        &lt;div class="d-flex align-items-center gap-4 flex-column flex-lg-row w-100 w-lg-auto"&gt;
          &lt;!-- Normale Menü-Items --&gt;
          &lt;div mbr-if="showItems" mbr-menu="main" class="d-flex flex-column flex-lg-row align-items-center gap-4 mb-0 flex-wrap" mbr-style="{'font-family': fontFamily, 'font-size': linkSize + 'rem'}"&gt;&lt;a class="nav-link link text-primary myMarginLinks" href="index.html" data-app-placeholder="Type Text"&gt;Startseite&lt;/a&gt; 
             &lt;a class="nav-link link text-primary" href="https://www.mobirise-tutorials.com/Formular/" data-app-placeholder="Type Text" target="_blank"&gt;Kontakt&lt;/a&gt;  &lt;a class="nav-link link text-primary" href="https://www.mobirise-tutorials.com/Forum/" data-app-placeholder="Type Text" target="_blank"&gt;Forum&lt;/a&gt; &lt;a class="nav-link link text-primary" href="https://www.mobirise-tutorials.com/Suchen.php" data-app-placeholder="Type Text" target="_blank"&gt;&lt;span class="mbri-search mbr-iconfont mbr-iconfont-btn"&gt;&lt;/span&gt;Suchen&lt;/a&gt;&lt;/div&gt;

          &lt;!-- Mega-Menü --&gt;
          &lt;div class="nav-item dropdown position-static mega-menu-wrapper"&gt;
            &lt;a class="nav-link link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Mega Menü" mbr-style="{'font-family': fontFamily, 'font-size': linkSize + 'rem', 'color': megaMenuLinkColor}"&gt;Mega Menü&lt;/a&gt;

            &lt;div class="dropdown-menu mega-dropdown-content p-4" mbr-class="{'show': megaAlwaysOpen}" mbr-style="{'background-color': megaBgColor, 'display': megaAlwaysOpen ? 'block' : ''}"&gt;
              &lt;div class="mega-flex" mbr-class="{'cols-1': megaCols==1, 'cols-2': megaCols==2, 'cols-3': megaCols==3, 'cols-4': megaCols==4}"&gt;
                
                &lt;div class="mega-col"&gt;
                  &lt;img src="file:///C:/Users/Thoma/Documents/Mobirise/Menu-Generator-Volker-Testseite/assets/images/bild01.jpg" alt="Bild 1" data-app-img="image" class="img-fluid mb-2"&gt;
                  &lt;h6 class="text-white" data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}"&gt;Projekt-Seiten&lt;/h6&gt;
                  &lt;ul mbr-menu="main" class="list-unstyled"&gt;&lt;li&gt;&lt;a href="index.html" data-app-placeholder="Type Text" class="text-secondary"&gt;Startseite&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="Tutorial.html" data-app-placeholder="Type Text" class="text-secondary"&gt;Mega-Menü Seite -2-&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" data-app-placeholder="Type Text" class="text-secondary"&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
                &lt;/div&gt;

                &lt;div class="mega-col"&gt;
                  &lt;img src="file:///C:/Users/Thoma/Documents/Mobirise/Menu-Generator-Volker-Testseite/assets/images/bild02.jpg" alt="Bild 2" data-app-img="image" class="img-fluid mb-2"&gt;
                  &lt;h6 class="text-white" data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}"&gt;Test 1&lt;/h6&gt;
                  &lt;ul mbr-menu class="list-unstyled"&gt;&lt;li&gt;&lt;a href="#" data-app-placeholder="Type Text" class="text-primary"&gt;Link1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" data-app-placeholder="Type Text" class="text-primary"&gt;Link2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" data-app-placeholder="Type Text" class="text-primary"&gt;Link3&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
                &lt;/div&gt;

                &lt;div class="mega-col"&gt;
                  &lt;img src="file:///C:/Users/Thoma/Documents/Mobirise/Menu-Generator-Volker-Testseite/assets/images/bild03.jpg" alt="Bild 3" data-app-img="image" class="img-fluid mb-2"&gt;
                  &lt;h6 class="text-white" data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}"&gt;Über uns&lt;/h6&gt;
                  &lt;ul mbr-menu class="list-unstyled"&gt;&lt;li&gt;&lt;a href="#" data-app-placeholder="Type Text" class="text-secondary"&gt;Team&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" data-app-placeholder="Type Text" class="text-secondary"&gt;Karriere&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;

                &lt;div class="mega-col"&gt;
                  &lt;img src="file:///C:/Users/Thoma/Documents/Mobirise/Menu-Generator-Volker-Testseite/assets/images/bild04.jpg" alt="Bild 4" data-app-img="image" class="img-fluid mb-2"&gt;
                  &lt;h6 class="text-white" data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}"&gt;Extras&lt;/h6&gt;
                  &lt;ul mbr-menu class="list-unstyled"&gt;&lt;li&gt;&lt;a href="#" data-app-placeholder="Type Text" class&gt;Blog&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" data-app-placeholder="Type Text"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" data-app-placeholder="Type Text"&gt;Downloads&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;

              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
&lt;/section&gt;
</textarea>
</div>
                
                <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-5"><br><br>CSS:</p>
                
<!-- CSS-Quelle inert parken -->
<script type="text/plain" id="css-src-1">
.mega-menu-volker {
  background: @menuBgColor;
  width: 100%;
  z-index: 999;
  position: sticky;
  top: 0;
}
.navbar {
  background: @menuBgColor;
}
.navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}
.navbar-nav .nav-link {
  color: @linkColor;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  transition: color .2s;
}
.navbar-nav .nav-link:hover {
  color: @primaryColor;
}
.mega-dropdown-content .mega-flex.cols-1 {
  max-width: 400px;
  margin: 0 auto;
}
.mega-dropdown-content .mega-flex.cols-2 {
  max-width: 800px;
  margin: 0 auto;
  background: transparent;
}
.mega-dropdown-content .mega-flex.cols-3 {
  max-width: 1100px;
  margin: 0 auto;
  background: transparent;
}
.mega-dropdown-content .mega-flex.cols-4 {
  max-width: 1300px;
  margin: 0 auto;
  background: transparent;
}
.dropdown-menu.show {
  display: block !important;
}
.mega-flex {
  display: grid;
  gap: 1.5rem;
}
.mega-flex.cols-1 {
  grid-template-columns: 1fr;
}
.mega-flex.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.mega-flex.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.mega-flex.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.mega-flex.cols-1 .mega-col:nth-child(n+2) {
  display: none;
}
.mega-flex.cols-2 .mega-col:nth-child(n+3) {
  display: none;
}
.mega-flex.cols-3 .mega-col:nth-child(n+4) {
  display: none;
}
.mega-col img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 6px;
  display: block;
  background: #eee;
}
.mega-col h6 {
  font-weight: 700;
  margin: 10px 0 8px;
}
.mega-col a {
  color: @linkColor;
  text-decoration: none;
  display: block;
  margin-bottom: .3rem;
}
.mega-col a:hover {
  color: @primaryColor;
}
.logo-img {
  max-height: 5rem;
}
.navbar-toggler {
  border: 2px solid @hamburgerColor;
  padding: 0.5rem;
  background: transparent;
  position: relative;
}
.navbar-toggler-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-image: none;
  top: 50%;
  transform: translateY(-50%);
}
.navbar-toggler-icon::before, .navbar-toggler-icon::after, .navbar-toggler-icon {
  background-color: @hamburgerColor;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
}
.navbar-toggler-icon::before, .navbar-toggler-icon::after {
  content: '';
  display: block;
}
.navbar-toggler-icon::before {
  top: 0.25rem;
}
.navbar-toggler-icon::after {
  bottom: 0.25rem;
}
.myMarginLinks {
  margin-left: 80px;
}
@media (max-width: 991px) {
  .navbar-nav {
    flex-direction: column;
  }
  .mega-dropdown-content {
    position: static;
    display: none !important;
    width: 95% !important;
    margin: 0 auto !important;
  }
  .mega-dropdown-content.show {
    display: block !important;
  }
  .mega-flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem;
    grid-template-columns: 1fr !important;
  }
  .navbar-collapse {
    width: 100%;
    margin-top: 1rem;
    padding-bottom: 50px;
  }
  .mega-col img {
    max-width: 100% !important;
  }
  .myMarginLinks {
    margin-left: 0px;
  }
  button[aria-label='Toggle navigation'] {
    display: inline-block !important;
    font-size: 24px;
  }
}
A {
  font-size: 18px;
  font-family: 'Inter Tight', sans-serif;
}
.mega-menu-volker .mega-dropdown-content {
  justify-content: var(--menuAlign, center);
  text-align: var(--menuAlign, center);
  display: flex;
  flex-direction: column;
  align-items: var(--menuAlign, center);
}
.mega-menu-volker .dropdown-menu.mega-dropdown-content {
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s ease, left 0.3s ease;
}
.mega-menu-volker[menu-align="flex-start"] .dropdown-menu.mega-dropdown-content {
  left: 0;
  transform: none;
}
.mega-menu-volker[menu-align="flex-end"] .dropdown-menu.mega-dropdown-content {
  right: 0;
  left: auto;
  transform: none;
}
.mega-menu-volker[always-top] {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  width: 100%;
}
body {
  scroll-behavior: smooth;
  padding-top: 100px !important;
  margin-top: 100px !important;
  scroll-padding-top: 100px;
}
H6 {
  color: #d70081;
}
.mega-dropdown-content when (@megaOpacity < 1) {
  background: rgba(red(@megaBgColor), green(@megaBgColor), blue(@megaBgColor), @megaOpacity) !important;
}
.navbar-caption {
  color: #8caff0!important;
}
</script>

<div class="code-block mb-3">
<div class="d-flex justify-content-between align-items-center mb-2">
    <button type="button" class="btn btn-primary btn-sm copy-btn" data-target="#codecss1">Kopieren</button>
</div>
<!-- data-src zeigt auf die Quelle oben -->
<textarea id="codecss1" class="mycode" data-src="css-src-1" style="height:400px;width:100%;" spellcheck="false" wrap="off" readonly></textarea>
</div>

<!-- Weitere Blöcke? Einfach wiederholen:
<script type="text/plain" id="css-src-2">…</script>
<textarea id="codecss2" data-src="css-src-2" …></textarea>
-->

Beitrag von **Volker** » So 12. Okt 2025, 12:17

Tommy,

wenn ich jetzt Deinen Code 1:1 kopiere bekomme ich eine Fehlermeldung:

Hab das in einem M5 Standard Menü so eingefügt

Beitrag von **Tommy Herrmann** » So 12. Okt 2025, 12:20

ach ja - meine CSS habe ich vergessen - ist ja nicht alles was schlecht ist von der KI

CSS in den gleichen Block:

Code: Alles auswählen

.mycode {
  color: #3384d6;
  font-size: .9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  tab-size: 2;
}
.code-block {
  background: #6ec7f2;
  border: 1px solid #ffffff;
  border-radius: 8px;
  padding: 24px;
}
.mb-3 {
  margin-bottom: 1rem;
}
.mbr-text {
  color: #ffffff;
}

Dieter53 · Beitrag von **Dieter53** » So 12. Okt 2025, 12:32

Ich habe das auch mal eingebaut. Unterseiten bleiben da, Verlinkung funktioniert auch. Ich bekomme aber bei der Vorschau, so wie auch beim lokalen publizieren, folgende Fehlermeldung:

Mega Menue.pdf: (24.35 KiB) 6-mal heruntergeladen

Beitrag von **Volker** » So 12. Okt 2025, 12:33

Dieter53 hat geschrieben: So 12. Okt 2025, 12:32 Ich habe das auch mal eingebaut. Unterseiten bleiben da, Verlinkung funktioniert auch. Ich bekomme aber bei der Vorschau, so wie auch beim lokalen publizieren, folgende Fehlermeldung:Mega Menue.pdf

Du musst Deine Bilder einsetzten. Sonst geht es ja nicht

Überall auch in allen Spalten

Beitrag von **Volker** » So 12. Okt 2025, 12:39

Tommy Herrmann hat geschrieben: So 12. Okt 2025, 12:20 ach ja - meine CSS habe ich vergessen - ist ja nicht alles was schlecht ist von der KI

CSS in den gleichen Block:
Code: Alles auswählen
.mycode {
  color: #3384d6;
  font-size: .9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  tab-size: 2;
}
.code-block {
  background: #6ec7f2;
  border: 1px solid #ffffff;
  border-radius: 8px;
  padding: 24px;
}
.mb-3 {
  margin-bottom: 1rem;
}
.mbr-text {
  color: #ffffff;
}

Auch wenn ich das unten in die css setze habe ich den fehler :

Mobirise-Tutorials.com

Mega Menü

Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Re: Mega Menü

Wer ist online?