Mobirise Tutorials

Tutorial Mega Menü

Dieses Mega-Menü ist ein einfaches Beispiel, erstellt mit Hilfe der künstlichen Intelligenz ChatGPT 

Natürlich könnte unter jedem Menülink ein weiteres, umfangreiches Submenü integriert oder das bestehende Menü weiter ausgebaut werden.

Mein Ziel war es, zu testen, ob die KI in der Lage ist, eine solche Aufgabe zu bewältigen. Ich habe bewusst auf die Verwendung des Frameworks Bootstrap für die Menüleiste verzichtet und mich ausschließlich auf reines CSS konzentriert.

Ich habe allerdings die Bootstrap class="sticky-top" zu meinem <section> Tag hinzugefügt, wodurch ich eine feststehende Menüleiste erhalten habe.

Es ist mir leider nicht gelungen, diesen Block global zu machen, da es damit weiterhin Probleme mit Mobirise gibt. Daher wäre es am besten, den Block als Benutzerblock zu speichern und auf jeder Seite einzufügen. Änderungen müssten dann später ebenfalls auf jeder Seite vorgenommen werden.

Wenn ihr eine solche Menüleiste mithilfe einer KI erstellen möchtet, könnt ihr meinen HTML-, CSS- und JavaScript-Code als Vorlage verwenden, die ich mit ChatGPT erstellt habe. Es ist sehr hilfreich, diesen Code hier zu kopieren, um ihn von der KI weiterentwickeln zu lassen.

Meine Menüleiste umfasst zusätzlich die "Lightbox 2", die eine vergrößerte Ansicht der Bilder ermöglicht. Zudem habe ich weitere Bilder in einer versteckten Galerie integriert, die ebenfalls über diese Lightbox betrachtet werden können.

Hier mein Tutorial der Lightbox 

Der folgende Code könnte aufgrund möglicher nachträglicher Änderungen von meiner tatsächlichen Menüleiste etwas abweichen.

Ich habe einen einfachen Textblock aus der Rubrik "Article" des Standard-Themas "Mobirise5" verwendet, um den durch ChatGPT generierten Code einzufügen. Damit die Bootstrap-Klassen nicht aktiv sind, habe ich außer dem <section> Tag mit den Mobirise-Parametern alles aus dem Block entfernt und durch den Code für meine Menüleiste ersetzt. Siehe Screenshot unten.

Wenn ihr die Darstellung nur am Desktop durch Verkleinern des Fensters überprüfen möchtet, müsst ihr den Browser nach dem Zusammenschieben gegebenenfalls neu laden, damit die CSS-Änderungen wirksam werden.

Die CSS für mein Mega-Menü gehört dann in den rechten Bereich "CSS Editor" vom "Code Editor".

Hier könnt ihr euch meinen CSS-Code kopieren 

Hier könnt ihr euch meinen HTML-Code kopieren, der in den linken Bereich "HTML Editor" vom "Code Editor" gehört:

<!-- Start Mega Menu generated by ChatGPT -->
<button class="menu-toggle" onclick="toggleMenu()">☰ Menü</button>
<nav>
 <div class="menu-container">
  <ul class="menu" id="mainMenu">
  
   <!-- Logo optional -->
   <a class="desktop-only" href="https://www.mobirise-tutorials.com/" target="_blank">
    <img src="https://www.mobirise-tutorials.com/AI-Mega-Menu/images/logo-mobirise-250x250.png"
     alt="Μobirise Tutorials" title="Mobirise Tutorials"
     style="height: 100px; width: auto; margin: 5px 15px 5px 20px; vertical-align: middle;">
   </a>
   
   <li><a href="index.html">Startseite</a></li>
   <li><a href="Tutorial.html">Tutorial</a></li>
   <li>
    <a href="#">Mega-Menü&nbsp; 🔻</a>
    <div class="mega-menu">
     <div class="column">
      <h3>Seiten</h3>
      <a href="https://www.mobirise-tutorials.com/AI-Beispiele/" target="_blank">AI Beispiele und Tests</a>
      <a href="https://www.mobirise-tutorials.com/Forum/" target="_blank">Forum</a>
      <a href="https://www.mobirise-tutorials.com/Formular/" target="_blank">Kontakt</a>
      <a href="https://www.mobirise-tutorials.com/Mobirise-AI/" target="_blank">Mobirise AI</a>
      <a href="https://www.mobirise-tutorials.com/" target="_blank">Mobirise Tutorials</a>
      <a href="https://www.mobirise-tutorials.com/Suchen.php" target="_blank">Suchen</a>
      <a href="Tutorial.html">Tutorial Mega Menü</a>
     </div>
     <div class="column">
      <h3>AI generierte Bilder</h3>
      <p><span style="font-size: 0.8rem;">Klicke für vergrößerte Ansicht in Lightbox</span></p>
      <a href="https://www.mobirise-tutorials.com/AI-Mega-Menu/images/Dreimastbark.jpg" data-lightbox="image-block" data-title="Dreimastbark - KI generiert">
       <img style="max-width: 200px;" src="https://www.mobirise-tutorials.com/AI-Mega-Menu/images/Dreimastbark.jpg" alt="Dreimastbark" title="Klicke für Lightbox">
      </a>
      <a href="https://www.mobirise-tutorials.com/AI-Mega-Menu/images/Pferd.jpg" data-lightbox="image-block" data-title="Pferd - KI generiert">
       <img style="max-width: 200px;" src="https://www.mobirise-tutorials.com/AI-Mega-Menu/images/Pferd.jpg" alt="Pferd" title="Klicke für Lightbox">
      </a>
     </div>
    </div>
   </li>
   <li><a href="https://www.mobirise-tutorials.com/Formular/" target="_blank">Kontakt</a></li>
   
   <!-- Button nur für Mobilgeräte -->
   <li class="home-button mobile-only">
    <a href="https://www.mobirise-tutorials.com/" target="_blank">Mobirise Tutorials</a>
   </li>
   
  </ul>
  
  <!-- Button nur für Desktop -->
  <div class="home-button desktop-only">
   <a href="https://www.mobirise-tutorials.com/" target="_blank">Mobirise Tutorials</a>
  </div>
  
 </div>
</nav>
<!-- End Mega Menu generated by ChatGPT -->

Hier könnt ihr meinen JavaScript Code für das Ausklappen von Menüs beim Hover-Effekt auf Desktop-Geräten sowie durch einen Klick auf den Hamburger-Button und das Mega-Menü auf mobilen Geräten kopieren.  Dieser gehört in den globalen Bereich "Global HTML Insert" der Site-Einstellungen, und zwar unter "Before </body> code":

<!-- AI Mega Menu Hover + Click created by Tommy and ChatGPT -->
<script>
 // Hamburger menu with a click
 function toggleMenu() {
  const menu = document.getElementById("mainMenu");
  menu.classList.toggle("show");
 }
 
 document.addEventListener("DOMContentLoaded", function () {
  const isMobile = window.matchMedia("(max-width: 991px)").matches;
  const megaMenuLinks = document.querySelectorAll('.menu > li > a');
  
  megaMenuLinks.forEach(function (link) {
   const parentLi = link.parentElement;
   const submenu = parentLi.querySelector('.mega-menu');
   
   if (!submenu) return; // no mega menu available
   
   if (isMobile) {
    // Click to open on mobile devices only
    link.addEventListener('click', function (e) {
     e.preventDefault();
     
     // Close all other menus
     document.querySelectorAll('.menu li.show-mega').forEach(function (li) {
      if (li !== parentLi) {
       li.classList.remove('show-mega');
      }
     });
     
     // Show/hide current mega menu
     parentLi.classList.toggle('show-mega');
    });
    
    // Close on click outside
    document.addEventListener('click', function (e) {
     if (!parentLi.contains(e.target)) {
      parentLi.classList.remove('show-mega');
     }
    });
   }
  });
 });
</script>