Mega Menü

[Tommy Herrmann]

Liegt das vielleicht an Deinem Thema StartM5 - keine Ahnung...

[Volker]

Ich hab extra ein m5 standard genommen Tommy.

Ich hab nur ein Menü in die Berabeitung gezogen. Sonst keine Blöcke da.

[Tommy Herrmann]

warte - ich suche mal den User-Block - und zippe den. Trage den dann in die Datei "list.json" mit ein. Glaube da kennst Du Dich besser aus.

ZIP - kommt gleich

[Tommy Herrmann]

Hier das ZIP im Verzeichnuis "mobirise5"

mobirise5.zip

(64.04 KiB) 7-mal heruntergeladen

[Volker]

Tommy ich rede von dem Mega Menü und den Code den Du da stehen hast:

Unten meine hier verwendeten Codes. Ersetzt den gesamten HTML und CSS Code der Menüleiste im Code Editor.

Wenn ich den Code da kopiere und in ein standard m5 menü einfüge bekomme ich diese Fehler.

[Tommy Herrmann]

Verstehe gerade nur Bahnhof

Ich dachte Du wolltest den Kopier-Code-Block haben, um den auch bei Dir einzubauen.


Jetzt verstehe ich Dich so - als wolltest Du den eigentlich Mega-Menü-Code testen.

Der hier ist mein Code, den ich verwende- da steht nun natürlich der lokale (falsche Pfad zu den Bildern drinnen drinnen). Warte mal kurz, den muss ich ohnehin als URL anpassen.

https://www.mobirise-tutorials.com/Test ... l#Tutorial

[Volker]

[Volker]

Ich dachte Du wolltest den Kopier-Code-Block haben, um den auch bei Dir einzubauen.

Ja will ich, aber das ist ja nicht das Thema

Den bau ich mir gleich ein

[Tommy Herrmann]

Der Code wird von der <textarea> falsch interpretiert - der nächste Bug von Mobirise

Probiere den mal:

Code: Alles auswählen

<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>


  <mbr-parameters>
    <header>Show/Hide</header>
    <input type="checkbox" title="Logo" name="showLogo" checked>
    <input type="checkbox" title="Brand Name" name="showBrand" checked>
    <input type="checkbox" title="Menu Items" name="showItems" checked>

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

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

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


      <!-- Logo + Brand -->
      <div class="navbar-brand d-flex align-items-center gap-3">
        <span mbr-if="showLogo">
          <a href="https://www.mobirise-tutorials.com/" target="_blank">
            <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">
          </a>
        </span>
        <span mbr-if="showBrand" class="navbar-caption" data-app-placeholder="Titel bearbeiten"><a href="https://www.mobirise-tutorials.com/" target="_blank">Mobirise-Tutorials</a></span>
      </div>

      <!-- Hamburger Button -->
      <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">
          ☰
      </button>

      <!-- Collapsible Menu Content -->
      <div class="collapse navbar-collapse" id="navbarContent">
        <!-- Menü-Container mit Gap -->
        <div class="d-flex align-items-center gap-4 flex-column flex-lg-row w-100 w-lg-auto">
          <!-- Normale Menü-Items -->
          <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'}"><a class="nav-link link text-primary myMarginLinks" href="index.html" data-app-placeholder="Type Text">Startseite</a> 
             <a class="nav-link link text-primary" href="https://www.mobirise-tutorials.com/Formular/" data-app-placeholder="Type Text" target="_blank">Kontakt</a>  <a class="nav-link link text-primary" href="https://www.mobirise-tutorials.com/Forum/" data-app-placeholder="Type Text" target="_blank">Forum</a> <a class="nav-link link text-primary" href="https://www.mobirise-tutorials.com/Suchen.php" data-app-placeholder="Type Text" target="_blank"><span class="mbri-search mbr-iconfont mbr-iconfont-btn"></span>Suchen</a></div>

          <!-- Mega-Menü -->
          <div class="nav-item dropdown position-static mega-menu-wrapper">
            <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}">Mega Menü</a>

            <div class="dropdown-menu mega-dropdown-content p-4" mbr-class="{'show': megaAlwaysOpen}" mbr-style="{'background-color': megaBgColor, 'display': megaAlwaysOpen ? 'block' : ''}">
              <div class="mega-flex" mbr-class="{'cols-1': megaCols==1, 'cols-2': megaCols==2, 'cols-3': megaCols==3, 'cols-4': megaCols==4}">
                
                <div class="mega-col">
                  <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">
                  <h6 class="text-white" data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}">Projekt-Seiten</h6>
                  <ul mbr-menu="main" class="list-unstyled"><li><a href="index.html" data-app-placeholder="Type Text" class="text-secondary">Startseite</a></li>
                    <li><a href="Tutorial.html" data-app-placeholder="Type Text" class="text-secondary">Mega-Menü Seite -2-</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary"></a></li></ul>
                </div>

                <div class="mega-col">
                  <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">
                  <h6 class="text-white" data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}">Test 1</h6>
                  <ul mbr-menu class="list-unstyled"><li><a href="#" data-app-placeholder="Type Text" class="text-primary">Link1</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-primary">Link2</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-primary">Link3</a></li></ul>
                </div>

                <div class="mega-col">
                  <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">
                  <h6 class="text-white" data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}">Andere Mega-Menü</h6>
                  <ul mbr-menu class="list-unstyled">
                    <li><a href="https://www.mobirise-tutorials.com/AI-Mega-Menu/" target="_blank" data-app-placeholder="Type Text" class="text-secondary">Mega Menü 1</a></li>
                    <li><a href="https://www.mobirise-tutorials.com/AI-Mega-Menu-2/" target="_blank" data-app-placeholder="Type Text" class="text-secondary">Mega Menü 2</a></li>
                    <li><a href="https://www.mobirise-tutorials.com/AI-Mega-Menu-Mobirise/" target="_blank" data-app-placeholder="Type Text" class="text-secondary">Mega Mobirise basiert</a></li>                      
                  </ul>
                </div>

                <div class="mega-col">
                  <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">
                  <h6 class="text-white" data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}">Extras</h6>
                  <ul mbr-menu class="list-unstyled"><li><a href="#" data-app-placeholder="Type Text" class>Blog</a></li>
                    <li><a href="#" data-app-placeholder="Type Text">FAQ</a></li>
                    <li><a href="#" data-app-placeholder="Type Text">Downloads</a></li>
                  </ul>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</section>

[Volker]

und die CSS ?

Geht mit der aus deinem Code Block nicht.

OK, geht auch mit meiner CSS

Da solltest Du nachbessern Tommy. Dein Code aus dem Block geht nicht. Wenn man den einfügt gibts Fehler.

[Tommy Herrmann]

OK - Mobirise Bug.

Auch hier gab es im HTML-Code geschweifte { } Klammern, alles nach einer geschweiften Klammer löscht Mobirise beim Publizieren gnadenlos

Ich habe es jetzt auf meiner Seite "repariert" (einigermaßen schwierig). Bitte probiere die Codes jetzt zu kopieren.

https://www.mobirise-tutorials.com/Test ... l#Tutorial

[Volker]

Jetzt einwandfrei

Ich hab auch einen Code block gebastelt : https://www.niederastroth.de/page15.html

[Volker]

@Dieter :

Bist du nun klar gekommen ?

Oder gibts Probleme ?

[Dieter53]

Vielen Dank der Nachfrage.
Bin gerade wieder zu Hause. Ich werde nachher nochmals versuchen den neuen Code auszuprobieren.

[Dieter53]

Vielen Dank der Nachfrage.
Bin gerade wieder zu Hause. Ich werde nachher nochmals versuchen den neuen Code auszuprobieren.

habe alles nochmals eingegeben (neuen Codes)Unterseiten funktionieren, Links gesetzt geht auch. Bilder eingefügt, so läuft es.

[Tommy Herrmann]

noch ein Hinweis zu Deinem Mega-Menü, der mir gerade eben erst aufgefallen ist.

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

Öffne das Mega-Menü und klicke mal auf das Bild ganz rechts vom Sonnenuntergang. Da öffnet sich das Mini-Panel

[Volker]

Du hast einen Bug gefunden

Ich mach da aber jetzt nichts mehr Tommy, ich bin zufrieden mit dem Mega Menü

[Tommy Herrmann]

... dann mache ich das alleine weg - das geht gar nicht.

Ich will da zum Beispiel noch eine Lightbox einbauen - da kann ich das nicht gebrauchen.

[Volker]

... dann mache ich das alleine weg - das geht gar nicht.

Ich will da zum Beispiel noch eine Lightbox einbauen - da kann ich das nicht gebrauchen.

Wenn Du das gelöst hast übernehm ich das natürlich

[Tommy Herrmann]

Ja klar - ist aber etwas aufwendiger.

Hier eingebaut:

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

So schließt das Mega-Menü (wie es eigentlich richtig ist) nur beim erneuten Klick auf die Navi oder auf den Hintergrund.

Zusätzliche CSS:

Code: Alles auswählen

/* Nur online: eventuelle Param-Elemente wirkungslos machen */
:not(.is-builder) .mega-params,
:not(.is-builder) [data-param="megaAlwaysOpen"],
:not(.is-builder) .mbr-params,
:not(.is-builder) .mbr-section-btn[data-param="megaAlwaysOpen"],
:not(.is-builder) [title*="Mega-Menü immer offen"] {
  display: none !important;
  pointer-events: none !important;
}

Das JavaScript gehört in den Mega-Menü-Block vor das schießende </section> Tag:

Code: Alles auswählen

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Im Editor nie eingreifen
  if (document.body.classList.contains('is-builder')) return;

  // A) Alle evtl. mitexportierten Tooltip-/Param-Attribute entfernen
  document.querySelectorAll(
    '[title*="Mega-Menü immer offen"], [data-bs-original-title*="Mega-Menü immer offen"]'
  ).forEach(function (el) {
    el.removeAttribute('title');
    el.removeAttribute('data-bs-original-title');
    if (el.getAttribute('data-bs-toggle') === 'tooltip' || el.getAttribute('data-bs-toggle') === 'popover') {
      el.removeAttribute('data-bs-toggle');
    }
    if (window.bootstrap?.Tooltip) {
      var inst = bootstrap.Tooltip.getInstance(el);
      if (inst) inst.dispose();
    }
  });

  // B) Klicks im Mega-Menü abfangen (Capture), Default/Propagation stoppen und Dropdown schließen
  document.querySelectorAll('.mega-dropdown-content').forEach(function (menu) {
    menu.addEventListener('click', function (e) {
      // Interaktive Elemente dürfen weiter funktionieren, alles andere stoppt
      var interactive = e.target.closest('a, button, input, select, textarea, label');
      if (!interactive) e.preventDefault();
      e.stopPropagation();

      var toggle = this.closest('.dropdown')?.querySelector('[data-bs-toggle="dropdown"]');
      if (toggle && window.bootstrap?.Dropdown) {
        bootstrap.Dropdown.getOrCreateInstance(toggle).hide();
      }
    }, true); // <- capture, damit wir VOR evtl. Rest-Handlern drankommen
  });
});
</script>