Home

Diesen Code in den HTML Teil:

<section 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">
    <input type="checkbox" title="Menu Items" name="showItems">

    <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>Position</header>
    <select title="Menüposition" name="menuAlign">
      <option value="start" selected>Links</option>
      <option value="center">Mitte</option>
      <option value="end">Rechts</option>
    </select>

    <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="#163300">
    <input type="color" title="Mega-Menü Linkfarbe" name="megaMenuLinkColor" value="#55b4d4">
    <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.4">
    <input type="color" title="Mega-Menü Hintergrundfarbe" name="megaBgColor" value="#cebfaf">
    <input type="range" title="Mega-Menü Überschrift Größe (rem)" name="megaHeadingSize" min="0.8" max="2.5" step="0.1" value="1.4">
    <input type="color" title="Brand Name Farbe" name="brandColor" value="#9fe870">
    <input type="range" title="Mega-Menü Transparenz" name="megaOpacity" min="0" max="1" step="0.05" value="1">
  </mbr-parameters>

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

      <!-- Logo + Brand -->
      <div class="navbar-brand d-flex align-items-center gap-3">
        <span mbr-if="showLogo">
          <a href="#">
            <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-10_205738/assets/images/logo2.png" alt="Logo" data-app-img="image" class="logo-img">
          </a>
        </span>
        <span mbr-if="showBrand" class="navbar-caption" mbr-style="{'color': brandColor}">Volker Mega Menü</span>
      </div>

      <!-- Hamburger Button -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- Menü-Inhalt -->
      <div class="collapse navbar-collapse" id="navbarContent">
        <div class="d-flex align-items-center gap-4 flex-column flex-lg-row w-100">
          <!-- 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-size': linkSize + 'rem'}"><a class="nav-link text-secondary" href="index.html" data-app-placeholder="Type Text">Start</a>
            <a class="nav-link text-secondary" href="#" data-app-placeholder="Type Text">Über uns</a>
            <a class="nav-link text-secondary" href="#" data-app-placeholder="Type Text">Leistungen</a>
            <a class="nav-link text-secondary" href="#" data-app-placeholder="Type Text">Kontakt</a></div>

          <!-- Mega-Menü -->
          <div class="nav-item dropdown position-static mega-menu-wrapper">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" mbr-style="{'color': megaMenuLinkColor, 'font-size': linkSize + 'rem'}">
              Mega Menü
            </a>

            <div class="dropdown-menu mega-dropdown-content p-4" mbr-class="{'show': megaAlwaysOpen}" mbr-style="{'background-color': megaBgColor}">
              <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/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-10_205738/assets/images/face5.jpg" alt="Bild 1" class="img-fluid mb-2" data-app-img="image">
                  <h6 mbr-style="{'font-size': megaHeadingSize + 'rem'}">Produkte</h6>
                  <ul mbr-menu class="list-unstyled"><li><a href="#" class="text-secondary" data-app-placeholder="Type Text" data-app-selector=".dropdown-item">Produkt A</a></li>
<li><a href="#" class="text-secondary" data-app-placeholder="Type Text" data-app-selector=".dropdown-item">Produkt B</a> <a href="#" class="text-secondary" data-app-placeholder="Type Text" data-app-selector=".dropdown-item">Produkt B</a></li></ul>
                </div>

                <div class="mega-col">
                  <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/info_0040sound_002ddj_002ede/addons/solutionm4/components/_images/faces/face4.jpg" alt="Bild 2" class="img-fluid mb-2" data-app-img="image">
                  <h6 mbr-style="{'font-size': megaHeadingSize + 'rem'}">Über uns</h6>
                  <ul mbr-menu class="list-unstyled"><li><a href="#" class="text-black" data-app-placeholder="Type Text">Team</a> <a href="#" class="text-black" data-app-placeholder="Type Text">Team</a></li>
                    <li><a href="#" class="text-black" data-app-placeholder="Type Text">Karriere</a></li></ul>
                </div>

                <div class="mega-col">
                  <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/info_0040sound_002ddj_002ede/addons/solutionm4/components/_images/faces/face2.jpg" alt="Bild 3" class="img-fluid mb-2" data-app-img="image">
                  <h6 mbr-style="{'font-size': megaHeadingSize + 'rem'}">Extras</h6>
                  <ul mbr-menu class="list-unstyled"><li><a href="#" class="text-secondary" data-app-placeholder="Type Text">Blog</a> <a href="#" class="text-secondary" data-app-placeholder="Type Text">Blog</a></li>
                    <li><a href="#" class="text-secondary" data-app-placeholder="Type Text">FAQ</a></li></ul>
                </div>

                <div class="mega-col">
                  <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/info_0040sound_002ddj_002ede/addons/solutionm4/components/_images/faces/face3.jpg" alt="Bild 4" class="img-fluid mb-2" data-app-img="image">
                  <h6 mbr-style="{'font-size': megaHeadingSize + 'rem'}">Kontakt</h6>
                  <ul mbr-menu class="list-unstyled"><li><a href="#" class="text-secondary" data-app-placeholder="Type Text">Kontaktformular</a> <a href="#" class="text-secondary" data-app-placeholder="Type Text">Kontaktformular</a></li>
                    <li><a href="#" class="text-secondary" data-app-placeholder="Type Text">Anfahrt</a></li></ul>
                </div>

              </div>
            </div>
          </div> <!-- Ende Mega-Menü -->
        </div>
      </div>
    </div>
  </nav>
</section>

Diesen Code in den CSS Teil:

.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-size: inherit;
  text-decoration: none;
  transition: color .2s;
}
.navbar-nav .nav-link:hover {
  color: @primaryColor;
}
.mega-dropdown-content {
  width: 100%;
  border: none;
  background: rgba(red(@megaBgColor), green(@megaBgColor), blue(@megaBgColor), @megaOpacity) !important;
}
.mega-flex {
  display: grid;
  gap: 1.5rem;
}
.mega-flex.cols-1 {
  grid-template-columns: 1fr;
  max-width: 400px;
  margin: 0 auto;
}
.mega-flex.cols-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin: 0 auto;
}
.mega-flex.cols-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  margin: 0 auto;
}
.mega-flex.cols-4 {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1300px;
  margin: 0 auto;
}
.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: 3rem;
}
.navbar-toggler {
  border: none;
  background: transparent;
  padding: 0.25rem 0.5rem;
}
.navbar-toggler-icon {
  width: 28px;
  height: 3px;
  background-color: @hamburgerColor;
  border-radius: 2px;
  position: relative;
}
.navbar-toggler-icon::before, .navbar-toggler-icon::after {
  content: '';
  display: block;
  position: absolute;
  background-color: @hamburgerColor;
  height: 3px;
  width: 100%;
  border-radius: 2px;
}
.navbar-toggler-icon::before {
  top: -7.5px;
}
.navbar-toggler-icon::after {
  top: 7.5px;
}
.mega-menu-volker.align-start .dropdown-menu.mega-dropdown-content {
  left: 0;
  right: auto;
  transform: none;
  justify-content: flex-start;
  text-align: left;
}
.mega-menu-volker.align-center .dropdown-menu.mega-dropdown-content {
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  text-align: center;
}
.mega-menu-volker.align-end .dropdown-menu.mega-dropdown-content {
  right: 0;
  left: auto;
  transform: none;
  justify-content: flex-end;
  text-align: right;
}
@media (max-width: 991px) {
  .navbar-nav {
    flex-direction: column;
  }
  .mega-dropdown-content {
    position: static;
    width: 95% !important;
    margin: 0 auto !important;
    display: none !important;
  }
  .mega-dropdown-content.show {
    display: block !important;
  }
  .mega-flex {
    display: flex !important;
    flex-direction: column !important;
  }
  .navbar-collapse {
    width: 100%;
    margin-top: 1rem;
  }
  .mega-col img {
    max-width: 100% !important;
  }
}
A {
  font-size: 20px;
}

Im globalen HTML muss in der Sektion Before </body> naoch das rein:


<script>
document.addEventListener("DOMContentLoaded", function() {
  let menuRecentlyToggled = false;

  // Wenn das Dropdown geöffnet oder geschlossen wird, kurzzeitig blockieren
  document.querySelectorAll('.mega-menu-wrapper [data-toggle="dropdown"]').forEach(toggle => {
    toggle.addEventListener('click', () => {
      menuRecentlyToggled = true;
      setTimeout(() => { menuRecentlyToggled = false; }, 400); // 400 ms Sperre
    });
  });

  // Schließen beim Klick auf einen Menülink
  document.querySelectorAll('.mega-dropdown-content a').forEach(link => {
    link.addEventListener('click', () => {
      if (menuRecentlyToggled) return; // Verhindert sofortiges Schließen beim Öffnen

      const openDropdown = document.querySelector('.mega-menu-wrapper .dropdown-menu.show');
      if (openDropdown) {
        openDropdown.classList.remove('show');
        const toggle = openDropdown.parentElement.querySelector('[data-toggle="dropdown"]');
        if (toggle) toggle.classList.remove('show');
      }
    });
  });

  // Schließen beim Klick außerhalb
  document.addEventListener('click', function(e) {
    if (menuRecentlyToggled) return;
    const openDropdown = document.querySelector('.mega-menu-wrapper .dropdown-menu.show');
    if (openDropdown && !openDropdown.contains(e.target)) {
      openDropdown.classList.remove('show');
      const toggle = openDropdown.parentElement.querySelector('[data-toggle="dropdown"]');
      if (toggle) toggle.classList.remove('show');
    }
  });

  // Schließen beim Seitenwechsel
  window.addEventListener('beforeunload', function() {
    const openDropdown = document.querySelector('.mega-menu-wrapper .dropdown-menu.show');
    if (openDropdown) {
      openDropdown.classList.remove('show');
      const toggle = openDropdown.parentElement.querySelector('[data-toggle="dropdown"]');
      if (toggle) toggle.classList.remove('show');
    }
  });
});
</script>

MARKETING SOLUTION AGENCY

Let's Talk?

+425 235 712

info@yoursite.com

Office Street, 123

SolutionM4