Tutorial Mega-Menü

HTML-Code - Im "Code Editor" den Bereich "HTML Editor" vom Textblock leeren und diesen Code einfügen

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

CSS-Code - Im "Code Editor" den Bereich "CSS Editor" vom Textblock leeren und diesen Code einfügen

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

JavaScript-Code - In den globalen Siteeinstellungen im Bereich "Before </body> code:" einfügen

<!-- Mega-Menu nur schließen bei Klick auf Navi oder Background -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
      // Im Editor nie eingreifen
      if (document.body.classList.contains('is-builder')) return;
      
      // A) Eventuelle Tooltip/Param-Reste entschärfen
      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-Panel behandeln & Dropdown schließen (nur wenn gewünscht)
      // Wenn du "nur außen/Toggle schließt" willst, kannst du B) weglassen.
      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
      });
    });
</script>

Mobirise Tutorials

Mega Menü

Mega-Menü

HTML-Code - Im "Code Editor" den Bereich "HTML Editor" vom Textblock leeren und diesen Code einfügen

CSS-Code - Im "Code Editor" den Bereich "CSS Editor" vom Textblock leeren und diesen Code einfügen

JavaScript-Code - In den globalen Siteeinstellungen im Bereich "Before </body> code:" einfügen