Mobirise-Tutorials.com

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>

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

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>