KI Scripte

[Tommy Herrmann]

← siehe vorherige Seite mit anderen Fehlermeldungen

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

> Am Handy funktioniert das Scrollen vom Mega-Menü nicht . was ein typisches Mobirise-Problem ist, schicke Deiner KI mein JavaScript (oben).

Da hatte ich auch 1 Stunde mit ChatGPT gerätselt.

[Tommy Herrmann]

> das Mega-Menü sollte dann auch exakt am unteren Rand (hier 80px) ausklappen und der Hover-Efekt muss auch über die gesamte Höhe der Menüleiste dargestellt werden.

[Tommy Herrmann]

> dann muss die Bildgröße auf die maximale tatsächliche Bildgröße reduziert sein. Das Bild darf also nicht größer als seine Original-Größe dargestellt werden, da es sonst unscharf wird. Also zum Beispiel diese CSS hinzufügen:

Code: Alles auswählen

img {
  max-width: 150px;
  padding-bottom: 20px;
}

> deine KI darf NICHT auf Dateien wie die "style.css" zurückgreifen, jede CSS muss von der generierten CSS kommen, deswegen konnte ich erst die Hintergrundfarbe nicht ändern. Dies ist ein grundsätzlicher Fehler und muss korrigiert werden.

> die Menü-Links und die Text-Links sind zu klein, ich habe das <a> Tag auf 1.2rem gesetzt

> es sieht so aus, als würde die Dropdown-Menüleiste am Handy nach dem Klick auf einen Link nicht schließen, das ist ein Fehler und muss korrigiert werden.


P.S.:

... jetzt habe ich für heute genug getestet und keinen Bock mehr

[Volker]

Also ich gebe auch mal auf. Das Problem ist das Hamburger und die Java Script Sache.
Man müsste in jede Seite in den end of body den code eingeben, was zu aufwendig wäre.

In der Desktop Ansicht funktioniert das ganze einwandfrei, aber sobald das Hambuger ins Spiel kommt ist Feierabend.

Deswegen gibt es wohl auch von Mobirse keine Mega Menüs

Aber ein Versuch war es wert

Alternativ werde ich aber noch versuchen die .js als Datei auszulagern und im HTML Teil aufzurufen:

<ul mbr-menu="" class="navbar-nav nav-dropdown" mbr-theme-style="display-4">
</ul>

<script src="mega-menu-toggle.js"></script>

[Tommy Herrmann]

Ich poste gleich noch was für Dich.

Das Script muss natürlich in die globale HTML in den Site-Einstellungen (am Zahnrad der Projekt-Kachel), dann wird es nur einmalig dort für alle Seiten eingefügt.

[Tommy Herrmann]

Ich schaffe es heute nicht mehr - mache morgen weiter - ist sehr aufwendig.

Bisher sieht es so aus -jetzt geht es auch am Handy und alles sitzt korrekt:

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

[Tommy Herrmann]

So sieht es jetzt bei mir aus - die CSS Variablen nimmt Mobirise nicht an, daher hinter jeder Variable eine Fallback-Farbe:

CSS:

Code: Alles auswählen

:root {
  --nav-bg: #000000;
  --nav-text: #ffffff;
  --nav-hover-bg: #555555;
  --panel-bg: #ffffff;
  --panel-border: #667eea;
  --overlay-menu-bg: #ffffff;
  --overlay-menu-text: #111111;
  --overlay-panel-bg: #444444;
  --overlay-text: #ffffff;
  --bs-primary: #0d6efd;
  --header-h: 80px;
  --header-h-sm: 60px;
  --menu-overlay-maxh: 80vh;
}
body {
  margin-top: 0 !important;
  padding-top: var(--header-h, 80px) !important;
  font-family: 'Jost', Arial, sans-serif;
}
body > *:nth-child(2) {
  display: flow-root !important;
}
html.menu-open, html.menu-open body {
  overflow: hidden;
}
a {
  font-size: 1.2rem;
}
a:hover {
  color: #232323;
}
.navbar-main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--nav-bg, #000000);
  color: var(--nav-text, #ffffff);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.navbar-main.navbar-dropdown {
  background: var(--nav-bg, #000000) !important;
}
.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-h, 80px);
  background: var(--nav-bg, #000000);
  position: relative;
  z-index: 1;
}
.navbar-logo a {
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  font-size: 1.5em;
  font-weight: bold;
}
.navbar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: stretch;
  margin-left: auto !important;
  margin-right: 0 !important;
}
.navbar-menu > li {
  position: relative;
}
.navbar-menu > li > a {
  height: var(--header-h, 80px);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 16px;
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.navbar-menu > li:hover > a, .navbar-menu > li.active > a {
  background: var(--nav-hover-bg, #555555);
}
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  background: var(--panel-bg, #ffffff);
  color: #333;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  padding: 20px;
  border-top: 3px solid var(--panel-border, #667eea);
}
.navbar-menu > li:hover .mega-menu {
  display: flex;
}
.navbar-menu > li:nth-last-child(-n+2):hover .mega-menu {
  left: auto;
  right: 0;
  transform: none;
}
.mega-menu-column {
  flex: 1;
  padding: 0 15px;
  min-width: 0;
}
.mega-menu-column h4 {
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-size: 1.1em;
}
.mega-menu img {
  max-width: 150px;
  height: auto;
  display: block;
  padding-bottom: 20px;
}
.mega-menu a {
  color: var(--bs-primary, #0d6efd);
  text-decoration: none;
}
.mega-menu a:hover, .mega-menu a:focus {
  text-decoration: underline;
}
.navbar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--nav-text, #ffffff);
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  z-index: 10001;
}
@media (max-width: 991.98px) {
  body {
    padding-top: var(--header-h-sm, 60px) !important;
  }
  .navbar-container {
    padding: 0 15px;
    height: var(--header-h-sm, 60px);
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-menu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: var(--header-h-sm, 60px);
    left: 0;
    right: 0;
    height: var(--menu-overlay-maxh, 80vh);
    max-height: var(--menu-overlay-maxh, 80vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    background: var(--overlay-menu-bg, #ffffff);
    color: var(--overlay-menu-text, #111111);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin: 0 !important;
    padding: 0;
    z-index: 10000;
  }
  .navbar-menu.active {
    display: block;
  }
  .navbar-menu > li {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
  }
  .navbar-menu > li > a {
    height: auto;
    padding: 14px 16px;
    display: block;
    background: transparent;
    color: var(--overlay-menu-text, #111111);
  }
  .navbar-menu > li:hover > a, .navbar-menu > li.active > a {
    background: #f5f5f7;
  }
  .mega-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: none;
    flex-direction: column;
    padding: 10px 16px;
    background: var(--overlay-panel-bg, #444444);
    color: var(--overlay-text, #ffffff);
    box-shadow: none;
    border-top: none;
  }
  .mega-menu.open {
    display: flex;
  }
  .mega-menu a {
    color: var(--bs-primary, #0d6efd);
  }
  .navbar-menu .mega-menu {
    background: #fff !important;
    color: #111 !important;
  }
  .navbar-menu .mega-menu .mega-menu-column, .navbar-menu .mega-menu .mega-menu-column * {
    background: transparent !important;
    color: #111 !important;
  }
  .navbar-menu .mega-menu h4 {
    color: #111 !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }
  .navbar-menu .mega-menu a {
    color: var(--bs-primary, #0d6efd) !important;
    text-decoration: none;
  }
  .navbar-menu .mega-menu a:hover, .navbar-menu .mega-menu a:focus {
    text-decoration: underline;
  }
}
.navbar-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nav-bg, #000000) !important;
  pointer-events: none;
}

HTML:

Code: Alles auswählen

<section
  data-bs-version="5.1"
  style="background: #000000" 
  class="menu menu3 navbar-dropdown navbar-fixed-top navbar-main"
  group="Menu"
  plugins="DropDown, TouchSwipe"
  always-top
  global
  once="menu"
  not-draggable
  position-absolute>
    
    <div class="navbar-container">
        <div class="navbar-logo"><a href="#">Mobirise-Tutorials</a></div>
        <button class="navbar-toggle" aria-label="Toggle navigation">&#9776;</button>
        
        <ul class="navbar-menu">
            <li class="">
                <a class="nav-link link" href="#index.html" data-app-placeholder="Type Text">Startseite</a>
            </li>
            <li class="has-mega-menu">
                <a class="nav-link link" href="#products" data-app-placeholder="Type Text">Seiten🔻</a>
                <div class="mega-menu">
                    <div class="mega-menu-column">
                        <h4>Mobirise-Tutorials</h4>
                        <div class="mega-menu-image"><img src="https://www.mobirise-tutorials.com/images/logo-mobirise-250x250.png" alt="Mobirise-Tutorials"></div>
                        <ul>
                            <li><a href="https://www.mobirise-tutorials.com/">Mobirise-Tutorials.com</a></li>
                            <li><a href="Tutorial.html">Tutorial zum Menü Generator</a></li>
                        </ul>
                    </div>
                    <div class="mega-menu-column">
                        <h4>Forum</h4>
                        <div class="mega-menu-image"><img src="https://www.mobirise-tutorials.com/images/social-sharing/Blog.png" alt="Forum"></div>
                        <ul>
                            <li><a href="https://www.mobirise-tutorials.com/Forum/">Unser Forum</a></li>
                        </ul>
                    </div>
                    <div class="mega-menu-column">
                        <h4>KI generierte Seiten</h4>
                        <div class="mega-menu-image"><img src="https://www.mobirise-tutorials.com//images/AI-250.png" alt="KI generierte Seiten"></div>
                        <ul>
                            <li><a href="https://www.mobirise-tutorials.com/Mobirise-AI/">Mobirise AI</a></li>
                            <li><a href="https://www.mobirise-tutorials.com/AI-Beispiele/">KI - Beispiele</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="">
                <a class="nav-link link" href="https://www.mobirise-tutorials.com/Formular/" data-app-placeholder="Type Text">Kontakt</a>
            </li>
            <li class="">
                <a class="nav-link link" href="https://www.mobirise-tutorials.com/Forum/" data-app-placeholder="Type Text">Forum</a>
            </li>
        </ul>
    </div>
</section>

JavaScript (muss z.Zt. noch auf jede Seite - ich arbeite an dem Problem):

Code: Alles auswählen

  <!--  Mega Menü mobile Navigation -->
  <script>
    (function () {
      // ===== Helpers =====
      const $  = (sel, ctx=document) => ctx.querySelector(sel);
      const $$ = (sel, ctx=document) => Array.from(ctx.querySelectorAll(sel));
      const MOBILE_BP = 992; // muss zum CSS-Breakpoint passen

      const root      = document.documentElement;
      const container = $('.navbar-main');
      if (!container) return;

      const menu      = $('.navbar-menu', container);
      const toggleBtn = $('.navbar-toggle', container);

      // State-Helfer
      function lockBody(open){ root.classList.toggle('menu-open', open); }
      function closePanels(){ $$('.mega-menu.open', container).forEach(m => m.classList.remove('open')); }

      function setMenuOpen(open){
        if (!menu) return;
        menu.classList.toggle('active', open);
        lockBody(open);
        if (toggleBtn) toggleBtn.setAttribute('aria-expanded', String(open));
        if (!open) closePanels();
      }

      // ===== Click Handling im Capture-Modus (vor Mobirise/Bootstrap) =====
      document.addEventListener('click', function(e){
        const isMobile   = window.innerWidth < MOBILE_BP;
        const btnToggle  = e.target.closest('.navbar-toggle');
        const linkParent = e.target.closest('.has-mega-menu > a');
        const linkAny    = e.target.closest('.navbar-menu a[href]');

        // 1) Hamburger -> Overlay toggeln (Panels werden beim Schließen zu)
        if (btnToggle) {
          e.preventDefault();
          e.stopPropagation();
          e.stopImmediatePropagation();
          setMenuOpen(!menu.classList.contains('active'));
          return;
        }

        // 2) Parent-Link "Seiten" (nur mobil): Panel toggeln
        if (linkParent && isMobile) {
          e.preventDefault();
          e.stopPropagation();
          e.stopImmediatePropagation();

          const li    = linkParent.closest('li');
          const panel = li ? li.querySelector('.mega-menu') : null;
          if (!panel) return;

          const wasOpen = panel.classList.contains('open');
          // andere Panels schließen
          closePanels();
          // Wenn es vorher zu war -> jetzt öffnen, sonst zu lassen (Overlay bleibt offen)
          if (!wasOpen) {
            panel.classList.add('open');
            panel.scrollIntoView({ block: 'nearest' });
          }
          return;
        }

        // 3) Klick außerhalb der Navbar schließt das Overlay (nur mobil)
        if (isMobile && menu.classList.contains('active')) {
          const insideNavbar = e.target.closest('.navbar-main');
          if (!insideNavbar) {
            setMenuOpen(false);
            return;
          }
        }

        // 4) Normale Links im Overlay schließen das Overlay (nicht der Parent-Link)
        if (isMobile && menu.classList.contains('active') && linkAny && !linkAny.closest('.has-mega-menu')) {
          // Navigation läuft normal weiter; wir klappen das Overlay zu
          setMenuOpen(false);
          return;
        }
      }, true); // capture: true

      // ESC schließt
      document.addEventListener('keydown', function(e){
        if (e.key === 'Escape' && menu.classList.contains('active')) {
          setMenuOpen(false);
        }
      });

      // Beim Resize über den Breakpoint -> Overlay schließen
      let lastW = window.innerWidth;
      window.addEventListener('resize', function(){
        const nowW = window.innerWidth;
        const crossed = (lastW < MOBILE_BP && nowW >= MOBILE_BP) || (lastW >= MOBILE_BP && nowW < MOBILE_BP);
        lastW = nowW;
        if (crossed) setMenuOpen(false);
      });

      // ARIA init
      if (toggleBtn) {
        toggleBtn.setAttribute('aria-controls', 'main-menu');
        toggleBtn.setAttribute('aria-expanded', 'false');
      }
      if (menu && !menu.id) menu.id = 'main-menu';
    })();
  </script>

[Tommy Herrmann]

Hinweis:

Die Menüleiste ist nur dann global, wenn man zuvor alle Experimente löscht.

Mit anderen Worten der HTML-Code muss als User-Block gespeichert werden und dann in eine Seite eingefügt werden, dann findet die Abfrage statt ob global oder nicht. Dazu müssen zuvor alle Menüleisten gelöscht worden sein.

[Tommy Herrmann]

Die Menüleiste ist jetzt bei mir global auf zwei Seiten eingebaut und funktioniert auch, sodass Änderungen nur auf einer Seite vorgenommen werden müssen.

Bei mir gibt es gerade zwei interne Seiten:

Startseite:

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

[Tommy Herrmann]

Neue CSS. Vertikale Höhe an Menü angepasst und bei 80% der Höhe gedeckelt:

Code: Alles auswählen

:root {
  --nav-bg: #000000;
  --nav-text: #ffffff;
  --nav-hover-bg: #555555;

  /* Desktop-Mega */
  --panel-bg: #ffffff;
  --panel-border: #667eea;

  /* Mobil: Overlay-Container (navbar-menu) */
  --overlay-menu-bg: #ffffff;
  --overlay-menu-text: #111111;

  /* Mobil: Mega-Panels im Overlay */
  --overlay-panel-bg: #ffffff; /* weiß im Panel */
  --overlay-text: #111111;     /* dunkle Schrift im Panel */

  --bs-primary: #0d6efd;

  --header-h: 80px;
  --header-h-sm: 60px;

  /* Obergrenze für die mobile Overlay-Höhe */
  --menu-overlay-maxh: 80vh;
}

/* Body-Offset wg. fixed Header */
body {
  margin-top: 0 !important;
  padding-top: var(--header-h, 80px) !important;
  font-family: Arial, sans-serif;
}
/* (Mobirise Flow-Fix) */
body > *:nth-child(2) { display: flow-root !important; }

html.menu-open,
html.menu-open body { overflow: hidden; }

/* Basisgröße für Links (Farben regeln wir gezielt im Menü) */
a { font-size: 1.2rem; }
a:hover { color: #232323; }

/* ===========================
   Header / Navbar
   =========================== */
.navbar-main {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 10000;
  background: var(--nav-bg, #000000);
  color: var(--nav-text, #ffffff);
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.navbar-main.navbar-dropdown {
  background: var(--nav-bg, #000000) !important;
}
.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  display: flex; justify-content: space-between; align-items: center;
  height: var(--header-h, 80px);
  background: var(--nav-bg, #000000);
  position: relative; z-index: 1;
}
.navbar-logo a {
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  font-size: 1.5em; font-weight: bold;
}

/* Hauptmenü (Desktop) */
.navbar-menu {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: stretch;
  margin-left: auto !important; margin-right: 0 !important;
}
.navbar-menu > li { position: relative; }

/* Vertikal zentriert via Flex */
.navbar-menu > li > a {
  height: var(--header-h, 80px);
  display: flex; align-items: center; gap: .5rem;
  padding: 0 16px;
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  transition: background-color .3s ease;
}
.navbar-menu > li:hover > a,
.navbar-menu > li.active > a {
  background: var(--nav-hover-bg, #555555);
}

/* Mega-Menü (Desktop – hell) */
.mega-menu {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 800px;
  background: var(--panel-bg, #ffffff);
  color: #333;
  box-shadow: 0 5px 15px rgba(0,0,0,.3);
  z-index: 1000;
  padding: 20px;
  border-top: 3px solid var(--panel-border, #667eea);
}
.navbar-menu > li:hover .mega-menu { display: flex; }
.navbar-menu > li:nth-last-child(-n+2):hover .mega-menu {
  left: auto; right: 0; transform: none;
}
.mega-menu-column { flex: 1; padding: 0 15px; min-width: 0; }
.mega-menu-column h4 {
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px; margin-bottom: 15px; font-size: 1.1em;
}
.mega-menu img { max-width: 150px; height: auto; display: block; padding-bottom: 20px; }
.mega-menu a {
  color: var(--bs-primary, #0d6efd);
  text-decoration: none;
}
.mega-menu a:hover, .mega-menu a:focus { text-decoration: underline; }

/* Burger */
.navbar-toggle {
  display: none;
  background: none; border: none;
  color: var(--nav-text, #ffffff);
  font-size: 24px; cursor: pointer; padding: 10px;
  z-index: 10001;
}

/* ===========================
   Mobile / Tablet
   =========================== */
@media (max-width: 991.98px) {
  body {
    padding-top: var(--header-h-sm, 60px) !important;
  }
  .navbar-container {
    padding: 0 15px;
    height: var(--header-h-sm, 60px);
  }
  .navbar-toggle { display: block; }

  /* Mobiles Overlay:
     - Höhe dynamisch (Inhalt) + 20px Padding
     - gedeckelt bei 80vh
  */
  .navbar-menu {
    display: none;                 /* per JS .active -> block */
    flex-direction: column;
    position: fixed;
    top: var(--header-h-sm, 60px);
    left: 0; right: 0;

    height: auto;                          /* <-- dynamisch nach Inhalt */
    max-height: var(--menu-overlay-maxh, 80vh);  /* <-- Deckel */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;

    padding: 10px 0;                       /* 10px oben + 10px unten = +20px */
    background: var(--overlay-menu-bg, #ffffff);
    color: var(--overlay-menu-text, #111111);
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    margin: 0 !important;
    z-index: 10000;
  }
  .navbar-menu.active { display: block; }

  .navbar-menu > li {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
  }
  .navbar-menu > li > a {
    height: auto; padding: 14px 16px; display: block;
    background: transparent;
    color: var(--overlay-menu-text, #111111);
  }
  .navbar-menu > li:hover > a,
  .navbar-menu > li.active > a {
    background: #f5f5f7;
  }

  /* Mega-Panels im Overlay – weiß + dunkle Beschriftung */
  .mega-menu {
    position: static !important;
    left: auto !important; right: auto !important; transform: none !important;
    width: 100% !important; max-width: 100% !important;

    display: none; flex-direction: column;
    padding: 10px 16px;

    background: var(--overlay-panel-bg, #ffffff);
    color: var(--overlay-text, #111111);

    box-shadow: none; border-top: none;
  }
  .mega-menu.open { display: flex; }

  /* Links in Mega-Panels (mobil) = Bootstrap Primary */
  .mega-menu a { color: var(--bs-primary, #0d6efd); }
}

/* ===========================
   Mobirise-Override: volle Breite Schwarz
   (übermalt style.css auf .navbar-dropdown)
   =========================== */
section.navbar-main.navbar-dropdown,
.menu .navbar-dropdown.navbar-main,
.menu3 .navbar-dropdown.navbar-main,
.navbar-fixed-top.navbar-dropdown.navbar-main {
  background: var(--nav-bg, #000) !important;
  background-color: var(--nav-bg, #000) !important;
  background-image: none !important;
}
section.navbar-main.navbar-dropdown::before,
section.navbar-main.navbar-dropdown::after {
  background: none !important;
}
h4 {
  padding-top: 40px;
  font-weight: bold;
}

[Tommy Herrmann]

Ach ja - aufgeben - gibt es nicht

Das hat mich mindestens 3 Stunden Nerven gekostet - denn auch ChatGPT schafft das alleine nicht auf Anhieb. Am Ende schafft aber ChatGPT genau das, was andere KIs eben nicht schaffen

[Tommy Herrmann]

Volker,

ich würde vorschlagen, dass Du meine Scripts (unten) als Default-Werte übernimmst. Verlinke halt auf eigenen Bilder oder Farbflächen und setze eigene Links, meinetwegen alle auf "#" (nach oben). Meine Codes funktionieren jetzt garantiert. Ich habe diese nunmehr ca. 8 Stunden getestet und 4 Stunden ChatGPT bemüht. Die CSS muss dabei schön formatiert dargestellt werden.

Du hast den fast fertigen Generator mit den 3 Buttons zum Kopieren nicht mehr am Server - warum

HTML | CSS | JS

Der Generator, der noch am Server ist, mit der CSS und der HTML im selben Code geht ja gar nicht Man kann die CSS doch nicht einfach mitten in die HTML legen, die gehört in den Head der Seite und am Handy funktioniert das doch so überhaupt nicht.

Ein idiotensicheres Tutorial zum Einbau in Mobirise würde ich dann noch erstellen. Der Einbau ist jetzt ziemlich einfach und kann von jedem bewältigt werden.

---

Moin,

alles nochmals etwas angepasst:

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

In der CSS sind einige (wenige) Elemente durch das viele Testen, die jetzt nicht mehr gebraucht werden. Ich bekomme diese aber gerade nicht weg und ChatGPT auch nicht. Die stören aber auch nicht. Zum Beispiel war da der Versuch den Menübalken über die gesamte Breite mit der gleichen Hintergrundfarbe zu versehen, was ich jetzt am <section> Tag der HTML gemacht habe.

Die wichtigste Änderung ist mir endlich gelungen

Das JavaScript wird nur einmalig in der globalen HTML eingebaut und gilt dann für das gesamte Projekt.

Hier mein derzeitiger Stand, der einwandfrei funktioniert, global ist und wohl von meiner Seite nun auch nicht mehr geändert wird. Wie Du das in Deinen Generator einbaust, wirst Du ja wissen.


HTML ich habe den einfachen Text-Block aus der Rubrik "Article" vom Standard-Thema "Mobirise5" verwendet. Im <section> Tag muss gegebenenfalls die Hintergrundfarbe der Menüleiste angepasst werden:

style="background: #000000"

Code: Alles auswählen

<section data-bs-version="5.1" style="background: #000000" class="menu menu3 navbar-dropdown navbar-fixed-top navbar-main" group="Menu" plugins="DropDown, TouchSwipe" always-top="" global="" once="menu" not-draggable="" position-absolute="">
    
    <div class="navbar-container">
        <div class="navbar-logo"><a href="https://www.mobirise-tutorials.com/" target="_blank">Mobirise-Tutorials</a></div>
        <button class="navbar-toggle" aria-label="Toggle navigation">☰</button>
        
        <ul class="navbar-menu">
            <li class="">
                <a class="nav-link link" href="https://www.mobirise-tutorials.com/Menu-Generator-Volker/" data-app-placeholder="Type Text">Startseite</a>
            </li>
            <li class="has-mega-menu">
                <a class="nav-link link" href="#products" data-app-placeholder="Type Text">Seiten🔻</a>
                <div class="mega-menu">
                    <div class="mega-menu-column">
                        <h4>Mobirise-Tutorials</h4>
                        <div class="mega-menu-image"><img src="https://www.mobirise-tutorials.com/images/logo-mobirise-250x250.png" alt="Mobirise-Tutorials"></div>
                        <ul>
                            <li><a href="https://www.mobirise-tutorials.com/" target="_blank">Mobirise-Tutorials.com</a></li>
                            <li><a href="Tutorial.html">Tutorial Mega-Menü</a></li>
                        </ul>
                    </div>
                    <div class="mega-menu-column">
                        <h4>Forum</h4>
                        <div class="mega-menu-image"><img src="https://www.mobirise-tutorials.com/images/social-sharing/Blog.png" alt="Forum"></div>
                        <ul>
                            <li><a href="https://www.mobirise-tutorials.com/Forum/" target="_blank">Unser Forum</a></li>
                        </ul>
                    </div>
                    <div class="mega-menu-column">
                        <h4>KI generierte Seiten</h4>
                        <div class="mega-menu-image"><img src="https://www.mobirise-tutorials.com//images/AI-250.png" alt="KI generierte Seiten"></div>
                        <ul>
                            <li><a href="https://www.mobirise-tutorials.com/AI-Beispiele/" target="_blank">KI - Beispiele</a></li>                            
                            <li><a href="https://www.mobirise-tutorials.com/Mobirise-AI/" target="_blank">Mobirise AI</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="">
                <a class="nav-link link" href="https://www.mobirise-tutorials.com/Formular/" target="_blank" data-app-placeholder="Type Text">Kontakt</a>
            </li>
            <li class="">
                <a class="nav-link link" href="https://www.mobirise-tutorials.com/Forum/" target="_blank" data-app-placeholder="Type Text">Forum</a>
            </li>
        </ul>
    </div>   
</section>

CSS - gehört in den "CSS Editor" vom Block, der für den Einbau verwendet wird. Die --Variablen werden von Mobirise nicht akzeptiert, daher steht hinter jeder Variable in der CSS ein Fallback. Dennoch sind das alle anpassbaren Farben, Höhe, usw., die dann schnell auffindbar sind.

Code: Alles auswählen

:root {
  --nav-bg: #000000;
  --nav-text: #ffffff;
  --nav-hover-bg: #555555;
  --panel-bg: #ffffff;
  --panel-border: #667eea;
  --overlay-menu-bg: #ffffff;
  --overlay-menu-text: #111111;
  --overlay-panel-bg: #ffffff;
  --overlay-text: #111111;
  --bs-primary: #0d6efd;
  --header-h: 80px;
  --header-h-sm: 60px;
  --menu-overlay-maxh: 80vh;
}
body {
  margin-top: 0 !important;
  padding-top: var(--header-h, 80px) !important;
  font-family: 'Jost', Arial, sans-serif;
}
body > *:nth-child(2) {
  display: flow-root !important;
}
html.menu-open, html.menu-open body {
  overflow: hidden;
}
a {
  font-size: 1.2rem;
}
a:hover {
  color: #232323;
}
.navbar-main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--nav-bg, #000000);
  color: var(--nav-text, #ffffff);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.navbar-main.navbar-dropdown {
  background: var(--nav-bg, #000000) !important;
}
.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-h, 80px);
  background: var(--nav-bg, #000000);
  position: relative;
  z-index: 1;
}
.navbar-logo a {
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  font-size: 1.5em;
  font-weight: bold;
}
.navbar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: stretch;
  margin-left: auto !important;
  margin-right: 0 !important;
}
.navbar-menu > li {
  position: relative;
}
.navbar-menu > li > a {
  height: var(--header-h, 80px);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 16px;
  color: var(--nav-text, #ffffff);
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.navbar-menu > li:hover > a, .navbar-menu > li.active > a {
  background: var(--nav-hover-bg, #555555);
}
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  background: var(--panel-bg, #ffffff);
  color: #333;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  padding: 20px;
  border-top: 3px solid var(--panel-border, #667eea);
}
.navbar-menu > li:nth-last-child(-n+2):hover .mega-menu {
  left: auto;
  right: 0;
  transform: none;
}
.mega-menu-column {
  flex: 1;
  padding: 0 15px;
  min-width: 0;
}
.mega-menu-column h4 {
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-size: 1.1em;
}
.mega-menu img {
  max-width: 150px;
  height: auto;
  display: block;
  padding-bottom: 20px;
}
.mega-menu a {
  color: var(--bs-primary, #0d6efd);
  text-decoration: none;
}
.mega-menu a:hover, .mega-menu a:focus {
  text-decoration: underline;
}
.navbar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--nav-text, #ffffff);
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  z-index: 10001;
}
@media (max-width: 991.98px) {
  body {
    padding-top: var(--header-h-sm, 60px) !important;
  }
  .navbar-container {
    padding: 0 15px;
    height: var(--header-h-sm, 60px);
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-menu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: var(--header-h-sm, 60px);
    left: 0;
    right: 0;
    height: auto;
    max-height: var(--menu-overlay-maxh, 80vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    padding: 10px 0;
    background: var(--overlay-menu-bg, #ffffff);
    color: var(--overlay-menu-text, #111111);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin: 0 !important;
    z-index: 10000;
  }
  .navbar-menu.active {
    display: block;
  }
  .navbar-menu > li {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
  }
  .navbar-menu > li > a {
    height: auto;
    padding: 14px 16px;
    display: block;
    background: transparent;
    color: var(--overlay-menu-text, #111111);
  }
  .navbar-menu > li:hover > a, .navbar-menu > li.active > a {
    background: #f5f5f7;
  }
  .mega-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: none;
    flex-direction: column;
    padding: 10px 16px;
    background: var(--overlay-panel-bg, #ffffff);
    color: var(--overlay-text, #111111);
    box-shadow: none;
    border-top: none;
  }
  .mega-menu.open {
    display: flex !important;
  }
  .navbar-menu > li:hover > .mega-menu.open {
    display: flex !important;
  }
  .navbar-menu > li:hover > .mega-menu {
    display: none !important;
  }
  .mega-menu a {
    color: var(--bs-primary, #0d6efd);
  }
}
section.navbar-main.navbar-dropdown, .menu .navbar-dropdown.navbar-main, .menu3 .navbar-dropdown.navbar-main, .navbar-fixed-top.navbar-dropdown.navbar-main {
  background: var(--nav-bg, #000000) !important;
  background-color: var(--nav-bg, #000000) !important;
  background-image: none !important;
}
section.navbar-main.navbar-dropdown::before, section.navbar-main.navbar-dropdown::after {
  background: none !important;
}
h4 {
  padding-top: 40px;
  font-weight: bold;
}
.navbar-menu.no-hover > li:hover .mega-menu {
  display: none;
}
.navbar-menu.no-hover .mega-menu.open {
  display: flex;
}
.navbar-menu > li .mega-menu.open {
  display: flex;
}
@media (min-width: 992px) {
  .navbar-menu:not(.no-hover) > li.has-mega-menu:hover > .mega-menu {
    display: flex !important;
  }
  .navbar-menu.no-hover > li:hover .mega-menu {
    display: none !important;
  }
  .navbar-menu.no-hover .mega-menu.open {
    display: flex !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  .navbar-menu > li:hover .mega-menu {
    display: none !important;
  }
  .navbar-menu .mega-menu {
    display: none !important;
  }
  .navbar-menu .mega-menu.open {
    display: flex !important;
  }
}

JavaScript zur Bedienung am Handy. Wird einmalig "global" in den Site-Einstellungen im Bereich:

> "Global HTML Insert" > "Before </body> code"

an Projekt-Kachel-Zahnrad eingebaut - siehe Screenshot:

Code: Alles auswählen

  <!-- Mega-Menü – global, robust, minimal -->
  <script>
    (function () {
      var MOBILE_BP = 992;

      function $(sel, ctx){ return (ctx||document).querySelector(sel); }
      function $all(sel, ctx){ return Array.prototype.slice.call((ctx||document).querySelectorAll(sel)); }
      function isMobile(){ return window.innerWidth < MOBILE_BP; }

      function getContainer(){ return $('.navbar-main'); }
      function getMenu(){ var c=getContainer(); return c ? $('.navbar-menu', c) : null; }
      function getToggle(){ var c=getContainer(); return c ? $('.navbar-toggle', c) : null; }

      function lockBody(open){
        var html = document.documentElement;
        if (open) html.classList.add('menu-open'); else html.classList.remove('menu-open');
      }
      function closePanels(){
        var c = getContainer(); if (!c) return;
        $all('.mega-menu.open', c).forEach(function(m){ m.classList.remove('open'); });
      }
      function setMenuOpen(open){
        var menu = getMenu(); if (!menu) return;
        if (open) menu.classList.add('active'); else menu.classList.remove('active');
        lockBody(open);
        var t = getToggle(); if (t) t.setAttribute('aria-expanded', String(open));
        if (!open) closePanels();
      }

      // ---- einmalig binden, wenn alles da ist ----
      function bindOnce(){
        var container = getContainer();
        var menu      = getMenu();
        var toggle    = getToggle();
        if (!container || !menu || !toggle) return false;

        // 1) Burger
        toggle.addEventListener('click', function(e){
          e.preventDefault();
          setMenuOpen(!menu.classList.contains('active'));
        });

        // 2) Parent-Links (li mit .mega-menu) finden und DIREKT binden
        var parentLinks = $all('.navbar-main .navbar-menu li > a').filter(function(a){
          var li = a.closest('li');
          return li && li.querySelector('.mega-menu');
        });

        // Dedupe: click nach pointerdown derselben Aktion ignorieren
        var lastTap = new WeakMap(); // Element -> Zeitstempel (ms)

        function parentToggle(ev){
          if (!isMobile()) return; // nur am Handy toggeln
          var a = ev.target.closest && ev.target.closest('a'); if (!a) return;
          if (parentLinks.indexOf(a) === -1) return; // kein Parent

          var now = Date.now();
          var prev = lastTap.get(a) || 0;
          if (ev.type === 'click' && (now - prev) < 500) {
            ev.preventDefault(); ev.stopPropagation(); ev.stopImmediatePropagation();
            return; // klick des selben taps ignorieren
          }

          ev.preventDefault(); ev.stopPropagation(); ev.stopImmediatePropagation();

          var li = a.closest('li');
          var panel = li && li.querySelector('.mega-menu');
          if (!panel) return;
          
          if (panel.classList.contains('open')) {
            panel.classList.remove('open');          // -> SCHLIESSEN
            // setMenuOpen(false);                   // ★ Kompromiss: Overlay gleich mit schließen
          } else {
            closePanels();
            panel.classList.add('open');             // -> ÖFFNEN
          }
          
          if (ev.type === 'pointerdown') lastTap.set(a, now);
        }

        // früh reingrätschen:
        parentLinks.forEach(function(a){
          a.addEventListener('pointerdown', parentToggle, true); // capture
          a.addEventListener('click',       parentToggle, true); // fallback
          // optional: hash-links entschärfen (kein Sprung)
          var href = a.getAttribute('href');
          if (href && href.charAt(0) === '#') a.setAttribute('role','button');
        });

        // 3) echte Links im Overlay (nicht Parent) -> Overlay zu
        container.addEventListener('click', function(e){
          if (!isMobile()) return;
          var a = e.target.closest && e.target.closest('.navbar-menu a[href]');
          if (!a) return;
          var li = a.closest('li');
          if (li && li.querySelector('.mega-menu')) return; // Parent, hier nicht
          setMenuOpen(false);
        });

        // 4) Outside-Klick -> Overlay zu (nur mobil)
        document.addEventListener('click', function(e){
          if (!isMobile()) return;
          if (!menu.classList.contains('active')) return;
          var inside = e.target.closest && e.target.closest('.navbar-main');
          if (!inside) setMenuOpen(false);
        });

        // 5) ESC & Breakpoint
        document.addEventListener('keydown', function(e){
          if (e.key === 'Escape' && menu.classList.contains('active')) setMenuOpen(false);
        });
        var lastW = window.innerWidth;
        window.addEventListener('resize', function(){
          var nowW = window.innerWidth;
          var crossed = (lastW < MOBILE_BP && nowW >= MOBILE_BP) || (lastW >= MOBILE_BP && nowW < MOBILE_BP);
          lastW = nowW;
          if (crossed) setMenuOpen(false);
        });

        // 6) ARIA
        toggle.setAttribute('aria-controls', 'main-menu');
        if (!menu.id) menu.id = 'main-menu';

        return true;
      }

      function start(){
        if (bindOnce()) return;
        document.addEventListener('DOMContentLoaded', function(){ bindOnce(); }, { once:true });
        var tries = 0, t = setInterval(function(){
          if (bindOnce() || ++tries > 100) clearInterval(t);
        }, 100);
      }

      if (document.readyState === 'complete') start();
      else window.addEventListener('load', start, { once:true });
    })();
  </script>

Einbau in den globalen "Site-Einstellungen":

Menü-Block global machen:

Nachdem der Mobirise-Block mit HTML und CSS fertig erstellt wurde, also die HTML und CSS eingefügt wurden, diesen bitte einmalig als „User-Block“ speichern. Anschließend den ursprünglichen Block löschen und dann den gerade gespeicherten „User-Block“ als Menüleiste einfügen.

Mobirise erkennt dann, dass der Block global konfiguriert ist, und fragt, ob die Änderungen auf allen Seiten (global) übernommen werden sollen — diese Abfrage am Button "OK" bestätigen (siehe Screenshot unten). Die neue Menüleiste wird sogleich auf sämtlichen Unterseiten auch eingefügt.

So müssen spätere Änderungen nur noch auf einer Seite vorgenommen werden, wie zum Beispiel die Links zu neuen Unterseiten.

[Tommy Herrmann]

Hallo Frank,

Der Rudy hat zuletzt etwas Ähnliches gebaut, was ganz gut funktioniert.

Und da habe ich das Teil mal verwendet
https://afripix-entwicklung.de/vereinsbuddies

... ist Dir bewusst, dass dein Mega-Menü vom Rudy an keinem Browser vom Handy funktioniert?

Es ist nicht bedienbar, man kann es nicht scrollen, da es dann sofort schließt!

[stobi_de]

HI Tommy,
ich hatte gerade darüber gelesen hier und wollte es ausprobieren.
Aber ich kann jeden Menüpunkt anklicken

[Tommy Herrmann]

Hallo Frank,

hier ein kleines Video zu dem Problem, das ich später wieder löschen werde:

[stobi_de]

Hi Tommy, vielen Dank an meine Testabteilung in Berlin
Du sagst: wenn Du das "irgendwo" berührst....also das "Irgendwo" ist nicht ein Menüpunkt? Oder doch ein Menüpunkt?
Ich finde es eher korrekt, dass sich das Menü komplett schließt, wenn ich irgendwohin klicke.

Oder meinst Du, dass man innerhalb des Menü-Fensters auch neben einen Menüpunkt klicken / touchen dürfen sollte, ohne dass es sich schließt?

[Tommy Herrmann]

Wie Du auch im Video sehen kannst, ist das Menü "Leistungen" höher als das Handy. Es muss also gescrollt werden und das geht nicht. Wenn ich versuche zu scrollen, schließt das Menü unverzüglich.

Das ist an meinem Android "Samsung S24" bei allen Browsern gleich, also auch im Chrome und Edge.

Das ist ein Bug.

Man kann ja am Handy noch nicht einmal erkennen, bei welchem Text es sich überhaupt um einen Link handelt. Wenn ich den dann `zufällig` treffen sollte, öffnet dieser natürlich auch.

[Tommy Herrmann]

Das sollte in meinen Augen eher so sein, wie bei dem neuen Menü-Generator von Volker, dessen Scripts ich heute morgen überarbeitet oben gepostet habe:

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

[stobi_de]

Habs mal zu Rudy geschickt, er will das ja verkaufen.
Ist aber bei Sommer Sonne Strand und Sangria in Spanien

[Volker]

Hab jetzt 23 Euro investiert

Mal gespannt was chat GPT mir da jetzt helfen kann .... ich zeige dann mein (unser) Ergebnis gleich...wenns klappt