KI Scripte

[Dieter53]

Super, Danke, jetzt passt es. Hatte schon 2 Stunden versucht.

[Volker]

Ich arbeite gerade noch an einem schalter der das Menü offen lässt um es einfacher zu bearbeiten.

Ich werde dann den Code wieder aktualisieren - also immer mal wieder gucken

Schalter ist eingebaut. bitte nur den HTML Teil neu kopieren.

So kann man besser den Mega Menü Container bearbeiten.

[Volker]

Hier mal zu besseren Übersicht die neuen Codes mit folgenden Optionen:

Menü Container kann für die Bearbeitung offen gehalten werden
Schieberegler für Spalten Überschriften und Menüpunkte. Obwohl Menüpunkte auch direkt in der Größe geändert werden können.

Änderung heute 9.10.25 22:25 Transparenz für den Container hinzugefügt

HTML CODE:

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">
    <input type="checkbox" title="Brand Name" name="showBrand">
    <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="#645600">
   
    <input type="color" title="Linkfarbe" name="linkColor" value="#163300">
    <input type="color" title="Mega-Menü Linkfarbe" name="megaMenuLinkColor" value="#9fe870">
    <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="#a6a99c">
    <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="range" title="Mega-Menü Link Größe (rem)" name="megaLinkSize" min="0.7" max="1.8" step="0.05" value="1.8">
      <input type="range" title="Mega-Menü Transparenz" name="megaOpacity" min="0" max="1" step="0.05" value="0.2">
    
  </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="#">
            <img src="../_images/logo.png" alt="Logo" data-app-img="image" class="logo-img">
          </a>
        </span>
        <span mbr-if="showBrand" class="navbar-caption text-black" data-app-placeholder="Titel bearbeiten">Volker Mega Menü</span>
      </div>

      <!-- Hamburger Button -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </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" href="#" data-app-placeholder="Type Text">Start</a>
            <a class="nav-link link text-primary" href="#" data-app-placeholder="Type Text">Über uns</a> <a class="nav-link link text-primary" href="#" data-app-placeholder="Type Text">Leistungen</a>  <a class="nav-link link text-primary" 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 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/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-09_143927/assets/images/mbr-599x399.jpg" alt="Bild 1" data-app-img="image" class="img-fluid mb-2">
                  <h6 data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}">Produkte</h6>
                  <ul mbr-menu="main" class="list-unstyled"><li><a href="#" data-app-placeholder="Type Text" class="text-secondary" mbr-style="{'font-size': megaLinkSize + 'rem'}">sddsd</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary" mbr-style="{'font-size': megaLinkSize + 'rem'}">Produkt B</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary" mbr-style="{'font-size': megaLinkSize + 'rem'}">Link1</a></li></ul>
                </div>

                <div class="mega-col">
                  <img src="../../app/themes/startm5/components/_images/background17.jpg" alt="Bild 2" data-app-img="image" class="img-fluid mb-2">
                  <h6 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/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-06_213748/assets/images/mbr-540x360.jpg" alt="Bild 3" data-app-img="image" class="img-fluid mb-2">
                  <h6 data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}">Über uns</h6>
                  <ul mbr-menu class="list-unstyled"><li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Team</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Karriere</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Link2</a></li></ul>
                </div>

                <div class="mega-col">
                  <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-06_213748/assets/images/mbr-583x389.jpg" alt="Bild 4" data-app-img="image" class="img-fluid mb-2">
                  <h6 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 vom 10.10.17:75 Uhr Sprung des Menüs aus der Mitte beseitigt.
CSS Code :

Code: Alles auswählen

.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: 3rem;
}
.navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
  background: transparent;
  position: relative;
  margin-left: auto;
  height: auto;
}
.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}
.navbar-toggler-icon {
  width: 28px;
  height: 3px;
  background-image: none;
  position: relative;
  display: inline-block;
  background-color: @hamburgerColor;
  border-radius: 2px;
  top: 7.5px;
}
.navbar-toggler-icon::before, .navbar-toggler-icon::after {
  content: '';
  display: block;
  position: absolute;
  background-color: @hamburgerColor;
  height: 3px;
  width: 100%;
  left: 0;
  border-radius: 2px;
}
.navbar-toggler-icon::before {
  top: -7.5px;
}
.navbar-toggler-icon::after {
  bottom: -7.5px;
}
@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;
  }
  .mega-col img {
    max-width: 100% !important;
  }
  .navbar-collapse, .navbar-nav, .navbar-nav .nav-link {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .mega-menu-volker .dropdown-menu.mega-dropdown-content {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 auto !important;
  }
}
A {
  font-size: 25px;
  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-collapse {
  padding-bottom: 50px;
}

Bitte Beachten !!!! Vor Veröffentlichen müsst ihr natürlich den Schalter aus machen, sonst wird der Container auch auf der Website sofort angezeigt !!!!!!


https://www.niederastroth.de/megatest/

[Volker]

Wer nicht genug bekommen kann von MEGA MENÜ - dem hab ich jetzt noch eine Variante mit 2 Drop Downs gemacht, die unabhängig von einander bearbeitet werden können ( 2 Schalter zum offen halten )

Es muss nur der HTML Teil ersetzt werden :

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">
    <input type="checkbox" title="Brand Name" name="showBrand">
    <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>
    
    <!-- 🔹 Zwei unabhängige Editor-Schalter -->
    <input type="checkbox" title="Mega-Menü 1 immer offen (Editor)" name="megaAlwaysOpen">
    <input type="checkbox" title="Mega-Menü 2 immer offen (Editor)" name="mega2AlwaysOpen">

    <header>Farben &amp; Schrift</header>
    <input type="checkbox" title="Sticky" name="sticky" checked>
    <input type="color" title="Hintergrundfarbe" name="menuBgColor" value="#645600">
   
    <input type="color" title="Linkfarbe" name="linkColor" value="#163300">
    <input type="color" title="Mega-Menü Linkfarbe" name="megaMenuLinkColor" value="#9fe870">
    <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="#957621">
    <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="range" title="Mega-Menü Link Größe (rem)" name="megaLinkSize" min="0.7" max="1.8" step="0.05" value="1.8">
  </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="#">
            <img src="../_images/logo.png" alt="Logo" data-app-img="image" class="logo-img">
          </a>
        </span>
        <span mbr-if="showBrand" class="navbar-caption text-black" data-app-placeholder="Titel bearbeiten">Volker Mega Menü</span>
      </div>

      <!-- Hamburger Button -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </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" href="#" data-app-placeholder="Type Text">Start</a>
            <a class="nav-link link text-primary" href="#" data-app-placeholder="Type Text">Über uns</a>
            <a class="nav-link link text-primary" href="#" data-app-placeholder="Type Text">Leistungen</a>
            <a class="nav-link link text-primary" href="#" data-app-placeholder="Type Text">Kontakt</a>
          </div>

          <!-- 🔹 Mega-Menü 1 -->
          <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ü 1" mbr-style="{'font-family': fontFamily, 'font-size': linkSize + 'rem', 'color': megaMenuLinkColor}">Mega Menü 1</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/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-09_143927/assets/images/mbr-599x399.jpg" alt="Bild 1" data-app-img="image" class="img-fluid mb-2">
                  <h6 data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}">Produkte</h6>
                  <ul mbr-menu="main" class="list-unstyled">
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Produkt A</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Produkt B</a></li>
                  </ul>
                </div>

                <div class="mega-col">
                  <img src="../../app/themes/startm5/components/_images/background17.jpg" alt="Bild 2" data-app-img="image" class="img-fluid mb-2">
                  <h6 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>
                  </ul>
                </div>

                <div class="mega-col">
                  <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-06_213748/assets/images/mbr-540x360.jpg" alt="Bild 3" data-app-img="image" class="img-fluid mb-2">
                  <h6 data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}">Über uns</h6>
                  <ul mbr-menu class="list-unstyled">
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Team</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Karriere</a></li>
                  </ul>
                </div>

                <div class="mega-col">
                  <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-06_213748/assets/images/mbr-583x389.jpg" alt="Bild 4" data-app-img="image" class="img-fluid mb-2">
                  <h6 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">Blog</a></li>
                    <li><a href="#" data-app-placeholder="Type Text">FAQ</a></li>
                  </ul>
                </div>

              </div>
            </div>
          </div>

          <!-- 🔹 Mega-Menü 2 -->
          <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ü 2" mbr-style="{'font-family': fontFamily, 'font-size': linkSize + 'rem', 'color': megaMenuLinkColor}">Mega Menü 2</a>

            <div class="dropdown-menu mega-dropdown-content p-4" mbr-class="{'show': mega2AlwaysOpen}" mbr-style="{'background-color': megaBgColor, 'display': mega2AlwaysOpen ? '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/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-09_191545/assets/images/a1-1400x1050.jpg" alt="Bild A" data-app-img="image" class="img-fluid mb-2">
                  <h6 data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}">Infos</h6>
                  <ul class="list-unstyled">
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Unsere Geschichte</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Team</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Karriere</a></li>
                  </ul>
                </div>

                <div class="mega-col">
                  <img src="../_images/mbr-583x389.jpg" alt="Bild B" data-app-img="image" class="img-fluid mb-2">
                  <h6 data-app-placeholder="Überschrift bearbeiten" mbr-style="{'font-size': megaHeadingSize + 'rem'}">Kontakt</h6>
                  <ul class="list-unstyled">
                    <li><a href="#" data-app-placeholder="Type Text" class="text-primary">Standorte</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-primary">Ansprechpartner</a></li>
                  </ul>
                </div>

              </div>
            </div>
          </div>
          <!-- 🔸 Ende Mega-Menü 2 -->

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

Morgen kommt ein Youtube Video mit genauer Beschreibung des Menüs

[Volker]

Im Aktuellen Code ist jetzt auch noch eine Transparenz für den Menü Container eingebaut

Bitte beide Codes von oben kopieren, wenn ihr Transparenz haben wollt

[Tommy Herrmann]

Moin,

habe mal getestet und noch das eine oder andere zunächst gefunden, der Ansatz scheint aber gut zu sein.

Hier ist meine Testseite:

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

... und natürlich hast Du eine JavaScript-Datei dabei, sonst würde das doch gar nicht gehen. Nur ist das die von Mobirise "navbar-dropdown.js". Daher funktioniert das ja nur am Handy.

> Irgendetwas an der Projektdatei muss durch deinen Eingriff beschädigt worden sein, denn beim entfernten Publizieren über Mobirise fehlten zahlreiche Dateien – das muss aber zwingend auch über Mobirise funktionieren. Wahrscheinlich liegt das daran, dass der gesamte Inhalt des Mobirise-Menü-Blocks brutal gelöscht wurde. So sollte man nicht vorgehen; besser ist es, einen neutralen Block zu verwenden - nur dann fehlt natürlich das JavaScript zum Toggeln.

Erst nachdem ich mit FileZilla alles aus der lokalen Publizierung kopiert hatte, funktionierte es. Auch spätere Änderungen an der Menüleiste, wie andere und zusätzliche Links oder Icons, werden nicht beim Publizieren übernommen. Nur in in das lokale Verzeichnis eingetragen.

> Was ganz schlimm ist: Andere Blöcke werden beim Erstellen oder einer Änderung von der Menüleiste einfach gelöscht. Bei mir in drei Fällen die weißen Textblöcke und einmal auch beide Header-Blöcke beider Seiten. Es blieben also nur noch Menüleiste und Footer erhalten, alles andere wurde gelöscht.


> Logo wird nicht gefunden und erzeugt Fehlermeldung - logisch - weil es sich in meinem Pfad gar nicht befindet.

> Firmenname kann nicht in Größe und Farbe geändert werden. Die Bearbeitung der class="navbar-caption" fehlt.

> Wie kann man die Menülinks → mittig oder → rechts anordnen? Die Menü-Links kleben mir jetzt viel zu dicht und sehr unschön am "Firmennamen". Ich habe die Menü-Links jetzt bereits 80px nach rechts verschoben, um diese vom "Firmennamen" zu trennen. Der Firmenname sollte auch verlinkbar sein. Traditionell sollten die Menü-Links eigentlich rechtsbündig stehen.

> Das Symbol für den Hamburger sieht sehr unschön aus. Das ist ja kein Hamburger, sondern eher ein Symbol für eine Datenbank. Es sitzt obendrein viel zu hoch (falsche CSS). Ich habe den Button jetzt so umgeschrieben, dann stimmt auch die Position. Die Farb-Variable müsstest Du noch einsetzen:

Code: Alles auswählen

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

CSS:

Code: Alles auswählen

@media (max-width: 991px) {
  button[aria-label='Toggle navigation'] {
    display: inline-block !important;
    font-size: 24px;
  }
}

So sieht das Mega-Menü von Dir nach meiner Korrektur am Handy aus:

> Das Mega-Menü schiebt sich auf der Arbeitsseite im Modus "Immer offen" zu einer Mini-Version zusammen:

> Man kann die Links im Mega-Menü nicht bearbeiten, mit jedem Klick schließt sich das Mega-Menü sogleich. Auch in der Version "Immer offen" können keine Links bearbeitet werden. Die Links sind zwar im Mobirise-Linkfenster anwählbar, werden aber im Code nicht gespeichert.

> Der Link "Mega-Menü" springt am Handy von der Mitte nach links, wenn man diesen klickt

> Dann muss unter dem "Mega-Menü" am Handy etwas Abstand sein, das sieht jetzt schrecklich aus, wenn der Link direkt am unteren Rand klebt:

Code: Alles auswählen

.navbar-collapse {
     padding-bottom: 50px;
}

> Dann sollte das Mega-Menü ausgeklappt nicht mehr als 70% der Display-Höhe einnehmen, damit man noch die Webseite dahinter sehen und bedienen kann.

> Du musst natürlich auch beschreiben - ganz wichtig - dass man die Menüleiste von Dir zunächst als "User Block" speichern muss. Dann löschen und dann kann man diese erst als "globalen" Block für alle Seiten einfügen. Sonst passiert auf den Unterseiten gar nichts und nix ist mit "global".

[Volker]

Das mit dem Sprung nach links ändere ich noch

[Tommy Herrmann]

Volker,

es tut mir leid - ich habe heute kaum Zeit. Töchterlein hatte eine Unfall in München und der Schaden scheint enorm. Bin gerade am helfen.

ALLES - was ich geschrieben habe ist ganz genauso wie ich es geschrieben habe - wenn Du damit keine Probleme hast, dann liegt das an etwas anderem.

Du machst aber auch in deinem Video nicht das, was ich beschreibe.

Versuche doch nur mal einen einzigen Link zu setzen - das geht nicht.

Ich habe zum Beispiel nur die Lupe bei "Suchen" hinzugefügt. Die wurde nicht auf den Server publiziert - nur lokal. Dafür waren alle anderen Blöcke am Server gelöscht.

Wenn Du ein Projekt mit mehreren vorhandenen Seiten hast, dann die neue Navi auf der Startseite einbaust, ist diese noch nicht global auf den bereits anderen, vorhandenen Seiten. Das passiert bei Dir nur nicht, weil Du diese anderen Seiten erst im Nachhinein erstellt hast, nachdem Du die Mega-Menüleiste bereits auf der Startseite eingebaut hattest. Logisch - dann wird das globale Attribut auch erst durch die Neuerstellung, von der Startseite her, aktiv.

Du sagts in Deinem Video, dass auch das Logo in der Navi bei Dir angezeigt wird. Logisch - das habe ich auch nicht bezweifelt, denn es zeigt ja auf einen lokalen Pfad auf Deinem Computer - nur - diesen lokalen Pfad gibt es nur bei Dir, bzw. das von Dir an dieser Stelle hinterlegte Logo gibt es bei anderen natürlich nicht - also nicht an einem anderen Computer - daher dann die Fehlermeldung.

Ich habe heute schon wieder Stunden mit den neuen Tests für Dich verbracht. Alles was ich geschrieben habe ist zu 100% korrekt - dreimal - neu getestet. Immer das gleiche Ergebnis. Ich mache mir die Arbeit nicht um Dich zu ärgern, sondern ausschließlich, weil ich diese Anwendung als sehr gut zu gebrauchen finde.

So war das auch mit dem Mega-Menü-Generator:

https://www.mobirise-tutorials.com/AI-Mega-Menu-2/

Da habe ich fast 24 Stunden getestet und alles von und mit ChatGPT bestimmt 30 Mal neu generieren lassen. Das hast Du noch nicht einmal zur Kenntnis genommen und die Arbeit sowie den Generator ohne Rückmeldung einfach eingestellt. Daher fallen mir weitere Tests für Dich sehr schwer, denn ich mache mir grundsätzlich keine Arbeit por nada (für nichts).

Ich finde es etwas merkwürdig, wenn Du einerseits um Tests bittest (was sehr verständlich) ist, dann aber alle Tests die fehlschlagen in Deinem Video als "madig machen" bezeichnest

[Tommy Herrmann]

Volker,


weil Du so auf Videos stehst

Hier mal nur zu meiner Kritik, dass die Links nicht geändert werden - live und in Farbe:

[Volker]

Tommy ich bin Dir ja auch immer Dankbar das Du alles ausgiebig testest,
aber ich habe diese Probleme eben nicht.

Ich habe soeben meine komplette sound-dj.de
https://sound-dj.de/

Die zig Unterseiten hat geändert, in dem ich oben das original Menü gelöscht habe

vorher hatte ich natürlich mein Mega Menü nur als Userblock gespeichert ( ohne da was zu Ändern bezüglich global)

Den habe ich dann einfach anstatt des original Menüs oben eingefügt:

Da kam dann die Abfrage von Mobirise :

Danach ist auf jeder Seite oben das Menü. Das ist das was ich Dir sagen kann.

Jetzt habe ich im Mega Menü mal Links eingefügt für die Sound DJ Seiten und es auf den Server gelegt mit Mobirise FTP eigener Routine.

Die neuen Links heißen jeweils sound1, sound2 sound 3

Das ist das Ergebnis :
Das Ergebnis war das das Mega Menü nicht aufging !
Und hier ist der Wurm drin - da beißt sich was .

Es ist ein M4 Theme ich vermute da liegt der Knackpunkt






Ich werde das aber mal mit m5 Seiten jetzt Testen. Ich erstelle ein M5 Projekt mit 3 Unterseiten und Menü und ersetze dann das Menü durch das mega menü.


https://www.niederastroth.de/megatest/

Es liegt 100 % am alten m4 Theme. Da geht das Mega Menü nicht mit.

Habe jetzt ein Projekt mit m5 Theme gemacht mit 2 Unterseiten. Dann das Menü oben gelöscht und meins genommen.
Und jetzt gehts einwandfrei.

Also halten wir fest: Das Mega Menü läuft nicht mit älteren Themes.

Im Mega Menü sind 2 Menüpunkte test1 und test2 - das war ja auch Dein Problem. Auch hier siehst Du das die Links einwandfrei laufen.

Wie gesagt, das war ein Test mit dem vorgefertigten Layout und Menü oben. Das Ersetzen des Menüs durch das Mega Menü war problemlos möglich und Links einfügen ebenfalls. Export mit Mobirise.

[Volker]

Ich habe es gerade nochmals getestet und es ist so wie ich sage.

Das Mega Menü funktioniert NICHT bei M4 Themes !

Das werde ich aber auch nicht mehr ändern jetzt. Wer also ein M4 oder M3 Theme hat, kann dieses Menü nicht nutzen.
Bei allen anderen M5 Themes sollte es jedoch laufen.

Hier die Aussage meiner neuen Assistentin

https://www.niederastroth.de/m4.html

[Volker]

Ich habe jetzt auf meiner aktuellen Seite ebenfalls erfolgreich das Mega Menü eingebaut.
Nicht weil ich es brauche, nur weil ich wissen wollte ob ich das alte Menü ohne Probleme tauschen kann.

Und JA - konnte ich. Einfach das alte Menü gelöscht und aus den Userblöcken das Mega Menü eingefügt.
Sofort global und wunderbar in der Funktion.

Kann man hier sehen : https://www.niederastroth.de/

[Volker]

Der lieben Ordnung halber

Hier das ganze als M4 Mega Menü:

https://www.niederastroth.de/megam4/

Die passenden Codes:

HTML:

Code: Alles auswählen

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

CSS:

Code: Alles auswählen

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

Code: Alles auswählen

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

[Tommy Herrmann]

Moin,

nur zur Info. Ich teste immer nur mit der neuesten Software-Version von "Mobirise 6" und neue Dinge immer erst mit dem Standard-Thema "Mobirise5" - niemals mit "M4" Themen. Mit "M4" mache ich seit Jahren gar nichts mehr, außer meine Routinetests nach einem Software-Update von Mobirise.

Ich kann die Text-Links in dem neuesten Update und dem neuesten Standard-Thema von "Mobirise 6" (v6.1.5) nicht setzen, eben genau wie in meinem Video oben zu sehen ist, genau deswegen habe ich das Video als Beweis doch überhaupt erst erstellt und das ist auch eine glasklare Dokumentation, dass es eben nicht geht.

Die Links werden im Linkfenster zwar angenommen und auch den Button unten rechts "Link Einfügen" kann ich fehlerlos klicken, nur wird der Link dann nicht gesetzt. Das Mega-Menü schließt auch bereits bevor ich das Linkfenster überhaupt aufrufe, vielleicht liegt es daran, denn auch das ist ein Fehler. Deswegen werden u.a. die Dropdown-Menüs in Mobirise auch mit Hover und nicht mit Klick geöffnet (wie bei Dir). Dann bräuchtest Du auch diesen merkwürdigen "Immer offen" Schalter nicht, den ich bisher überhaupt nicht verstanden habe. Wozu soll der überhaupt gut sein

Es gehört auch zum Standard einer Website, dass sich Dropdown-Menüs, wie auch dein Mega-Menü, nicht mit Klick sondern immer mit Hover (Mausüber) öffnen. Keine Ahnung, warum Du das mit Klick machst?!

Ich musste alle meine Links, die Du auf meiner Beispiel- und Testseite klicken kannst, direkt im "Code Editor" händisch einbauen.

Ach ja - Du darfst jetzt nicht davon ausgehen, dass alles was bei Dir funktioniert auch bei anderen funktioniert, denn das kann eben bei anderen komplett anders sein. Genau deswegen sollten auch immer andere testen.



Nochmals meine Vorgehensweise beim Einbau deines Mega-Menüs:

Ich habe meine vorhandene Template-Seite mit zwei Seiten — Startseite und Unterseite — als ganz neues Projekt importiert.

Auf der Startseite habe ich die vorhandene Mobirise-Menüleiste im Code, wie von dir beschrieben, geleert. Anschließend habe ich deinen HTML- und CSS-Code eingefügt und gespeichert. Danach verschwand die ursprüngliche Menüleiste auf der Unterseite ohne Vorwarnung.

Um das zu beheben, habe ich die bereits angepasste Menüleiste von der Startseite als „User Block“ gespeichert, um sie anschließend neu einzufügen — die Menüleiste soll ja auf allen Seiten vorhanden sein. Beim Einfügen aus meinen „User Blocks“ fragte Mobirise korrekt, ob der Menüblock global sein soll; ich habe dies bejaht. Erst danach war die Menüleiste auch auf der Unterseite wieder vorhanden.

Beim initialen Publizieren sind dann allerdings alle vorhandenen Blöcke des Projekts verschwunden, bis auf den neuen, globalen Menüblock und den alten, globalen Footer. Alle anderen, nicht globalen Blöcke, waren weg — brutal gelöscht — keine Header-Blöcke, keine Textblöcke, nichts. Das war schon sehr frustrierend und eben auch bemerkenswert, denn das darf natürlich bei wirklichen Projekten auf keinen Fall passieren.



Tatsache ist, bei mir funktioniert das Mega-Menü, so wie es jetzt ist, nicht. Das ist sehr schade, denn ich finde die Idee und die Erscheinung gut gelungen.

Deswegen solltest Du das Mega-Menü auch nicht als getestet und funktionierend bezeichnen, solange das nicht von mehreren anderen fehlerfrei ausprobiert wurde. Du solltest Dich auch nicht damit zufrieden geben einfach zu behaupten, dass bei Dir alles geht - wozu teste ich denn dann

Es ist auch nicht automatisch "global" und die CSS ist teilweise falsch. Da kommt es ganz auf die Reihenfolge des Einbaus an.

Ebenso wird die CSS vom Mega-Menü nicht initial von Mobirise auf den Server publiziert, es wird überhaupt erst angezeigt, nachdem ich einmal mit dem externen FTP-Programm das lokale Verzeichnis auf den Server kopiert habe, denn auch die gesamte Custom-CSS der Datei "mbr-additional.css" des Projektes wurde gar nicht erst publiziert.

Oder glaubst Du ich hätte den Screenshot hier gefälscht und erfunden nur um dich zu ärgern Das war schlichtweg nur eines meiner vielen Testergebnisse - fehlende CSS - beim Publizieren mit dem FTP-Client von Mobirise.

Bemerkenswert dabei - und daher auch bezeichnend für einen neu eingebauten Fehler - die einzige CSS die korrekt war, war die vom Mega-Menü (Dropdown) - alles andere war fehlerhaft - wie man gut in meinem Screenshot erkennen kann.

Meist wiederhole ich meine Tests um auch ganz sicher zu sein. Hier habe ich dreimal mittels Mobirise publiziert, einmal mit Schalter "Alles publizieren" und dann noch zweimal mit "Nur veränderte Dateien" publizieren. Die CSS fehlt. Erst mit FileZilla konnte das Problem behoben werden. Wenn Du jetzt behauptest es geht - ist das schlichtweg falsch und nur der Fall weil Du initial mit FileZilla publiziert hattest - da war ja dann schon alles am Server. Bei mir war es ein ganz neues Projekt, das erstmalig über Mobirise nach dem Einbau des Mega-Menüs auf den Server publiziert wurde. Nur so macht ein Test überhaupt Sinn.

Wenn Du natürlich bereits initial mit FileZilla publiziert hattest, kannst Du dieses Problem ja gar nicht bemerkt haben, das mal nur als ein Beispiel zur unterschiedlicher Anwendung, bzw. zu unseren unterschiedlichen Tests. FileZilla mögen ja etliche verwenden, das ist aber weder im Sinne von Mobirise noch als Standard so gedacht - abgesehen davon, dass es umständlich ist.

Ich habe alle meine gefundenen Fehler oben gelistet - mehr kann ich nicht dazu beitragen, insofern klinke ich mich da jetzt aus.

Ich weiß es nicht, ich vermute die Fehler in fehlenden Einträgen - oder durch das Löschen des Block-Inhaltes falschen Einträgen - in der Projekt-Datei "project.mobirise". Das würde auch die Löschung etlicher vorhandener Blöcke, die bereits vor dem Einbau des Mega-Menüs auf meinen Seiten waren, in meinen Projekt erklären.

[Tommy Herrmann]

Ja - nun wollte ich nochmals ein Video der neuen Erstellung zeigen und da passieren am Ende noch andere Dinge, denn genau die beiden Seiten auf die ich bereits verlinkt hatte und die auch noch direkt nach dem Einbau vorhanden waren, achte im Video auf den ersten Klick auf das Mega-Menü - bei 1:34 - da sieht man noch die Links im ersten (linken) Bereich

index.html
Tutorial.html

wurden bereits beim Einfügen des "User Blocks" gelöscht. Im Video sage ich noch erst nach dem lokalen Publizieren

Offensichtlich sucht Mobirise nach den Links in der Datei "project.mobirise" und findet diese nicht, deswegen werden sie auch im Quellcode gelöscht. Das beweist auch, dass gar keine Links angenommen werden.

Das Mega-Menü funktioniert grundsätzlich wirklich gar nicht.

Gucke bitte das Video bis zu meinem Abbruch auch an. Da kannst Du wenigsten sehen, dass man das Mega-Menü noch nicht einmal ohne Trick einbauen kann. Man muss es über die "User Blocks" einbauen, was Du mir auch schon nicht glaubst.




Alle Deine Variablen wie eben "@linkColor" kennt die vorhandene Projekt-Datei natürlich nicht und stürzt ab. Mobirise gerät daher so durcheinander, das das Projekt eigentlich komplett zerstört wird. Daher wurden bei mir auch die Hälfte aller Blöcke und Dateien (fast alle JavaScript Dateien) beim entfernten Publizieren gelöscht, da an dieser Stelle die Projekt-Datei nicht zu Ende bearbeitet werden kann.

Ich meine, Du solltest grundsätzlich keinen Menü-Block für Deine Mega-Menü verwenden. Das ist der grundsätzliche Fehler.

Du solltest vielleicht diese Codes und Deine Anleitungen, solange das nicht astrein läuft, auch von Deiner Webseite nehmen, denn das kann großen Schaden verursachen (wie man an meinem Video sehen kann), falls da jemand sein eigentliches Projekt für verwendet. Kann - muss nicht.

[Volker]

Moin Tommy,

nochmals vielen vielen Dank das Du so intensiv testest

Ich kann es anders ja auch nicht schaffen das sonst fehlerfrei zu bekommen.

Ich weiß im Moment leider nicht woran das liegen sollte oder liegen kann. Ich habe ja meine Seite niederastroth.de auch mit dem Menü neu gemacht und extra mit Mobirise auf den Server geladen. Filezilla nutze ich jetzt für die Tests nicht mehr.

warum der Schalter da ist ? Eben um da die Links bearbeiten zu können. Wenn Du sagts das Du den noch nie benutzt hast, kann es auch daran liegen ?

Ich nutze den immer wenn ich Links oder Bilder im Menü bearbeite. Danach knips ich den wieder aus und veröffentliche mit Mobirise.

Ich werde heute im Laufe des Tages noch weitere Tests mit allen möglichen Kombinationen machen um deine Fehler zu reproduzieren und melde mich dann wieder.

[Tommy Herrmann]

Ich denke es liegt an den fehlenden Variablen und wahrscheinlich stehen da obendrein auch Variablen von Mobirise von der ursprünglichen Navi in der Projekt-Datei. Da kommt es natürlich auch auf den individuellen Zustand der ursprünglichen Navi an. Der kann bei Dir ja ganz anders sein.

In meinem Mega-Menü vom Video ist eben auffällig, das nur die beiden Seiten mit echten, relativen Links der beiden Seiten, gelöscht wurden. Alle absoluten Links und jene mit nur "#" blieben OK.

Nein - den Schalter "Immer offen" habe ich natürlich auch betätigt - es gibt keine Stelle, die ich nicht getestet hätte.

Ist es denn nicht besser vorerst nur die Struktur des Mega-Menüs (ul/li) einzufügen und nichts sonst zu löschen. Dann noch die vorhandene CSS und dann mal gucken. Die ganzen Input-Felder von Dir braucht man doch erst einmal nicht.

[Tommy Herrmann]

Das wiederum liegt ganz sicher daran, dass eben ein relativer Link eben auf einen Pfad zeigt, den es in einem neuen Projekt überhaupt nicht gibt - also auch nicht am eigenen Computer. Eigentlich dürfte eine solche Vorlage gar keine relativen Links beinhalten.

[Volker]

Tommy das hatte ich ja vorher auch so drin. Nur das Problem war das Mobirise wenn ich alles in (ul/li) packe, die Menüpunkte untereinander anordnet und nicht nebeneinander. Das kann Mobirise von Haus aus nicht.

Ich musste das Mega mit einem div abkoppeln um das Grid zu erhalten. Wenn Du mal deine KI fragst ob es eine andere Lösung dafür gibt bin ich echt dankbar.

[Tommy Herrmann]

Sorry Volker - das habe ich bei deinem letzten Versuch mit dem Generator gemacht - genau 21 Stunden lang, bis die KI das geschafft hatte. Im Moment ist mir das zu viel.

Vielleicht würde ich das mal erfragen, wenn ich ChatGPT bitte alles so zu lassen und eben nur die Struktur vom Menü anzupassen.

Das versuche ich mal - also mit der ganz normalen Navi von Mobirise