ChatGPT begeistert mich mal wieder

[Tommy Herrmann]

Was ebenfalls mal wirklich sinnvoll wäre: ein einstellbarer Breakpoint fürs Menü.
Habe eben mal angefangen, aber noch nichts Zeigbares.

Moin,

wo siehst du da denn die Anwendungsmöglichkeiten. Die Bootstrap Breakpoints sind doch auf die möglichen Displays aller Geräte bereits optimiert:

https://getbootstrap.com/docs/5.0/layou ... reakpoints

… und genau die verwendet doch auch Mobirise.

[Tommy Herrmann]

Moin,

also das mit dem Mega-Menü von der KI ChatGPT, habe ich heute morgen nochmals mit ChatGPT überarbeitet, denn das mit dem "hover" (Mausüber) dem Link "Mega-Menü" hat mir gar nicht gefallen, zumal dadurch meine zusätzlich eingebaute "Lightbox 2" nicht am Handy funktionierte.

Ich habe jetzt alles auf "Klick" umgebaut, sowohl am Desktop als auch am mobilen Gerät.

Meine neuen Codes stehen auf meiner Tutorialseite zur Verfügung:

https://www.mobirise-tutorials.com/AI-M ... orial.html


Meine geänderte CSS:

Code: Alles auswählen

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Jost;
}
nav {
  background-color: #003366;
  padding: 0;
}
.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 10px;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
}
.menu > li {
  position: relative;
}
.menu > li > a {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 20px;
  color: white;
  text-decoration: none;
  margin: 5px 0px 5px 0px;
}
.menu > li:hover {
  background-color: #0055aa;
}
.mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 800px;
  display: none;
  background-color: #e6f0ff;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 10px 10px;
  z-index: 1000;
  flex-wrap: nowrap;
}
.menu li.show-mega .mega-menu {
  display: flex;
}
.mega-menu .column {
  flex: 1;
  min-width: 200px;
  padding: 10px;
}
.mega-menu h3 {
  margin-top: 0;
  color: #003366;
}
.mega-menu a {
  display: block;
  color: #003366;
  text-decoration: none;
  padding: 5px 0;
}
.mega-menu a:hover {
  text-decoration: underline;
}
.mega-menu img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 10px 10px 10px 0px;
}
.home-button a {
  background-color: #0055aa;
  color: white;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 10px;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-size: 1.2rem;
}
.home-button a:hover {
  background-color: #0077cc;
}
.menu-toggle {
  display: none;
  background-color: #003366;
  color: white;
  padding: 15px 20px;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 20px;
}
.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}
@media (min-width: 992px) and (max-width: 1200px) {
  .mega-menu {
    left: 50%;
    transform: translateX(-40%);
  }
}
@media (max-width: 991px) {
  .menu-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-bottom: 50px;
  }
  .menu.show {
    display: flex;
  }
  .menu li.show-mega .mega-menu {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: none;
  }
  .mega-menu {
    width: 100%;
    flex-direction: column;
    border-radius: 0px 0px 0px 0px;
  }
  .menu-toggle {
    display: block;
  }
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: list-item;
    margin-bottom: 0;
    padding: 0;
  }
  .mobile-only a {
    display: inline-block;
    margin: 15px 15px 10px 15px;
    background-color: #0055aa;
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    width: 200px;
    text-align: center;
  }
  .mobile-only a:hover {
    background-color: #0077cc;
  }
  .menu > li > a {
    height: 50px;
  }
}

Mein geändertes JavaScript von "Hover" auf "Click":

Code: Alles auswählen

  <!-- AI Mega Menu -->
  <script>
      // Hamburger-Menu with click 
      function toggleMenu() {
        const menu = document.getElementById("mainMenu");
        menu.classList.toggle("show");
      }
      
      // Mega-Menu with click 
      document.addEventListener("DOMContentLoaded", function () {
        const megaMenuLinks = document.querySelectorAll('.menu > li > a');
        
        megaMenuLinks.forEach(function (link) {
          const parentLi = link.parentElement;
          const submenu = parentLi.querySelector('.mega-menu');
          
          if (submenu) {
            link.addEventListener('click', function (e) {
              e.preventDefault();
              
              // All others close
              document.querySelectorAll('.menu li.show-mega').forEach(function (li) {
                if (li !== parentLi) {
                  li.classList.remove('show-mega');
                }
              });
              
              // Toggle Mega-Menu
              parentLi.classList.toggle('show-mega');
            });
            
            // Click outside will close the menu
            document.addEventListener('click', function (e) {
              if (!parentLi.contains(e.target)) {
                parentLi.classList.remove('show-mega');
              }
            });
          }
        });
      });
  </script>

[stobi_de]

Zum Thema Breakpoints:
ich finde das schon sehr sinnvoll.
Ab ca. 5 Menüpunkte mit langen Worten gibt es auf kleineren Monitoren ein 2-zeiliges Menü.
Wenn man den Breakpoint auf lg oder xl festlegt, sieht das besser aus.
Es muss halt im HTML-Teil alles von md auf lg geändert werden und die 991/992 vom CSS auf 1200/1201

Code: Alles auswählen

@breakpoint: 991px;

@media (min-width: (@breakpoint + 1)) {
  .navbar-collapse {
    display: flex !important;
  }
  .navbar-toggler {
    display: none !important;
  }
}

@media (max-width: @breakpoint) {
  .navbar-collapse {
    display: none !important;
  }
  .navbar.opened .navbar-collapse {
    display: block !important;
  }
  .navbar-toggler {
    display: block !important;
  }
}

<nav class="navbar navbar-dropdown" mbr-class="{'navbar-expand-lg': breakpoint == 'lg', 'navbar-expand-md': breakpoint == 'md'}">



<select title="Breakpoint" name="breakpoint">
  <option value="md">768px</option>
  <option value="lg" selected>992px</option>
  <option value="xl">1200px</option>
</select>

[Tommy Herrmann]

kannst das ja mal vorschlagen - aber wie ich die Helden von Mobirise kenne, werden sie sich die Arbeit nicht machen

[stobi_de]

Du hast das Hover durch Click ersetzt in Deinem Menü.
Ist sinnvoll, will ich auch machen.
Aber bei mir ist das Mega dann nicht mehr in Mobi selbst sichtbar, was nicht schlimm, aber unpraktisch ist.

==========

Das mit dem variablen Breakpoint wurde doch in den letzten Jahren immer mal wieder gewünscht - mit der üblichen reaktion von Mobi

[Tommy Herrmann]

Ja klar, weil das über das JavaScript gesteuert wird, was ja erst nach dem Publizieren (lokal oder entfernt) im Browser wirken kann.

Keine Ahnung, wie man das JavaScript so laden könnte, dass es auch in Mobirise selbst schon wirkt.

Du könntest natürlich mit einem Trick arbeiten und die neue Class mit der alten für die Bearbeitung austauschen:

alte:

Code: Alles auswählen

.menu > li:hover .mega-menu {
  display: flex;
}

Neue - benötigt das JavaScript zum Öffnen

Code: Alles auswählen

.menu li.show-mega .mega-menu {
  display: flex;
}

oder Du überschreibst eben für die Bearbeitung die class ".show-mega" mit ":hover"

P.S.:

… oder (wo Du gerade dabei bist) bastelst Dir über eine Variable einen input-Schalter für die Toolbox für die Bearbeitung

[Tommy Herrmann]

Das mit dem Hover geht schlichtweg am Handy nicht richtig, weil - egal wo man tippt - sich dann immer das Mega-Menü schließt.

Kannst ja mal das neue JavaScript bei ChatGPT trennen lassen, gehen tut das. Dann wäre am Desktop Hover und am Handy Click angesagt:

Optional:

Wenn du willst, dass Desktop weiterhin Hover nutzt, aber Mobilgeräte nur per Klick öffnen, kannst du das auch mit einem Media Query + JS trennen. Sag einfach Bescheid – ich mache dir die Variante fertig.

[Tommy Herrmann]

Ich lasse mir mal diese Variante noch erstellen

... wenn Mr. Kaos nicht langsam die Faxen dicke hat mit mir

[Tommy Herrmann]

Habe schon - muss nur noch testen

[Tommy Herrmann]

Nee - das hat gar nicht funktioniert - außerdem habe ich falsch gedacht - wir müssen ja zwingend die CSS anpassen und das ist dann ein riesen Ding. Da ist dann meine Idee die Class kurz umzuschreiben entschieden besser - am Ende ist diese Menüleiste ja ohnehin reine Handarbeit.


Das hatte ChatGPT generiert (funktioniert nicht):

Code: Alles auswählen

  <!-- AI Mega Menu Desktop=Hover <= 991 Mobile=Click -->
  <script>
      function toggleMenu() {
        const menu = document.getElementById("mainMenu");
        menu.classList.toggle("show");
      }

      document.addEventListener("DOMContentLoaded", function () {
        const isMobile = window.matchMedia("(max-width: 991px)").matches;

        if (!isMobile) return; // am Desktop nichts tun → Hover bleibt aktiv

        const megaMenuLinks = document.querySelectorAll('.menu > li > a');

        megaMenuLinks.forEach(function (link) {
          const parentLi = link.parentElement;
          const submenu = parentLi.querySelector('.mega-menu');

          if (submenu) {
            link.addEventListener('click', function (e) {
              e.preventDefault();

              // Andere Mega-Menüs schließen
              document.querySelectorAll('.menu li.show-mega').forEach(function (li) {
                if (li !== parentLi) {
                  li.classList.remove('show-mega');
                }
              });

              // Aktuelles Mega-Menü umschalten
              parentLi.classList.toggle('show-mega');
            });

            // Klick außerhalb schließt Mega-Menü
            document.addEventListener('click', function (e) {
              if (!parentLi.contains(e.target)) {
                parentLi.classList.remove('show-mega');
              }
            });
          }
        });
      });
  </script>

[Tommy Herrmann]

Ich habe eben nochmals über das Problem der zu spät scrollenden ausgeklappten Menüleiste am Handy nachgedacht und Folgendes geändert.

Jetzt scrollt zuerst nur das ausgeklappte Menü, nachdem ich auch das Mega-Menü geöffnet habe, also nachdem 70 % der Höhe des Viewports erreicht sind (70vh). Es wird ein zusätzliche Scrollbalken in Rot angezeigt. Ist das Ende vom Menü erreicht, fängt dann erst der Body der Webseite an zu scrollen. Vorher war es umgekehrt. So werden auch Konflikte mit anderen Buttons am unteren Rand des Viewports vermieden, wie z.B. "Scroll-To-Top".

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


Änderung im Breakpoint von 991px:

Code: Alles auswählen

  .menu-container {
    flex-direction: column;
    align-items: flex-start;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: #e43f3f transparent;
  }
  .menu-container::-webkit-scrollbar {
    width: 8px;
  }
  .menu-container::-webkit-scrollbar-thumb {
    background-color: #e43f3f;
    border-radius: 4px;
  }

Hier nochmals meine gesamte CSS:

Code: Alles auswählen

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Jost;
}
nav {
  background-color: #003366;
  padding: 0;
}
.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 10px;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
}
.menu > li {
  position: relative;
}
.menu > li > a {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 20px;
  color: white;
  text-decoration: none;
  margin: 5px 0px 5px 0px;
}
.menu > li:hover {
  background-color: #0055aa;
}
.mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 800px;
  display: none;
  background-color: #e6f0ff;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 10px 10px;
  z-index: 1000;
  flex-wrap: nowrap;
}
.menu li.show-mega .mega-menu {
  display: flex;
}
.mega-menu .column {
  flex: 1;
  min-width: 200px;
  padding: 10px;
}
.mega-menu h3 {
  margin-top: 0;
  color: #003366;
}
.mega-menu a {
  display: block;
  color: #003366;
  text-decoration: none;
  padding: 5px 0;
}
.mega-menu a:hover {
  text-decoration: underline;
}
.mega-menu img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 10px 10px 10px 0px;
}
.home-button a {
  background-color: #0055aa;
  color: white;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 10px;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-size: 1.2rem;
}
.home-button a:hover {
  background-color: #0077cc;
}
.menu-toggle {
  display: none;
  background-color: #003366;
  color: white;
  padding: 15px 20px;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 20px;
}
.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}
@media (min-width: 992px) and (max-width: 1200px) {
  .mega-menu {
    left: 50%;
    transform: translateX(-40%);
  }
}
@media (max-width: 991px) {
  .menu-container {
    flex-direction: column;
    align-items: flex-start;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: #e43f3f transparent;
  }
  .menu-container::-webkit-scrollbar {
    width: 8px;
  }
  .menu-container::-webkit-scrollbar-thumb {
    background-color: #e43f3f;
    border-radius: 4px;
  }
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-bottom: 50px;
  }
  .menu.show {
    display: flex;
  }
  .menu li.show-mega .mega-menu {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: none;
  }
  .mega-menu {
    width: 100%;
    flex-direction: column;
    border-radius: 0px 0px 0px 0px;
  }
  .menu-toggle {
    display: block;
  }
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: list-item;
    margin-bottom: 0;
    padding: 0;
  }
  .mobile-only a {
    display: inline-block;
    margin: 15px 15px 10px 15px;
    background-color: #0055aa;
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    width: 200px;
    text-align: center;
  }
  .mobile-only a:hover {
    background-color: #0077cc;
  }
  .menu > li > a {
    height: 50px;
  }
  .noMobileDisplay {
    display: none;
  }
}

[stobi_de]

Da werde ich doch mal versuchen, das in meine Version bauen zu lassen.
Das Scrollen auf dem Handy klappt nicht wirklich bei mir.

[Tommy Herrmann]

Das hat ChatGPT auch nach 10 Versuchen nicht geschafft. Dabei ist es ganz einfach dem Menü selbst einen Scrollbalken zu verpassen. Das ist von mir.

[Tommy Herrmann]

Hier meine zuletzt geschriebene Korrespondenz mit ChatGPT wegen des Scrollens des Menüs am Handy:

Ich habe eben nochmals über das Problem von gestern nachgedacht und folgendes versucht. Bitte prüfe, ob das akzeptabel und korrekt ist.

Jetzt scrollt zuerst nur das ausgeklappte Menü, nachdem ich auch das Mega-Menü geöffnet habe. Also nach einer vh von 70%. Es wird der zusätzliche Scrollbalken angezeigt. Ist das Ende vom Menü erreicht, fängt dann erst der Body der Webseite an zu scrollen. So funktioniert es und ganz ohne Änderung vom JavaScript.

Code: Alles auswählen

  .menu-container {
    flex-direction: column;
    align-items: flex-start;
    max-height: 70vh;
    overflow-y: auto;
  }
  .menu-container::-webkit-scrollbar {
    width: 8px;
  }
  .menu-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
  }

ChatGPT:

Ja, Tommy – das ist technisch korrekt, pragmatisch gelöst und absolut akzeptabel!
Du hast die Scroll-Problematik clever umgangen, ohne das JavaScript anfassen zu müssen.

Was du gemacht hast:

Du hast mit folgenden Zeilen:

.menu-container {
max-height: 70vh;
overflow-y: auto;
}

… erreicht, dass:

die gesamte .menu-container-Leiste (inkl. ul.menu, Mega-Menü, Button) bei max. 70 % der Höhe des Viewports eine eigene Scrollbarkeit bekommt

der Body erst dann scrollt, wenn .menu-container fertig gescrollt ist

Vorteile deiner Lösung:

Vorteil Warum gut?
Kein JavaScript nötig einfache Wartung, weniger Fehlerquellen
Scrollbalken sichtbar gute Usability
Mega-Menü + Hauptmenü zusammen scrollbar gewünschtes Verhalten auf kleinen Screens
Elegant in bestehende CSS integriert sehr saubere Umsetzung

Optional (nicht zwingend):

Falls du möchtest, dass dieses Verhalten nur auf Mobilgeräten aktiv ist (und nicht am Desktop),
kannst du es in deine bestehende mobile Media Query (max-width: 991px) legen:

@media (max-width: 991px) {
.menu-container {
flex-direction: column;
align-items: flex-start;
max-height: 70vh;
overflow-y: auto;
}
.menu-container::-webkit-scrollbar {
width: 8px;
}
.menu-container::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 4px;
}
}

Fazit:

Ja, Tommy – deine Lösung ist technisch einwandfrei, praxisgerecht und schlank.
Du hast die Scrollsteuerung elegant über CSS geregelt – und damit dein ursprüngliches Ziel vollständig erreicht.

Du brauchst keinen Code mehr anpassen, solange das Verhalten für dich passt.

Richtig gut durchdacht – du hast’s!

Du:
Ja - das liegt bereits in der Media-Abfrage, sorry hatte ich vergessen zu erwähnen. Vielen Dank für Deine Hilfe. ChatGPT ist großartig.


ChatGPT:

Das freut mich wirklich sehr, Tommy – danke für dein tolles Feedback!
Und ja, du hast absolut sauber gearbeitet und dich clever Schritt für Schritt zur optimalen Lösung vorgearbeitet. Wenn alles jetzt in der Media-Abfrage liegt, ist dein Setup auch technisch genau da, wo es hingehört.

Wenn du irgendwann noch Unterstützung brauchst – sei es beim Feinschliff, bei Animationen, mobiler Optimierung oder etwas ganz anderem – ich bin immer gern da.

Bis dahin wünsche ich dir weiterhin viel Freude mit deiner Website – und Respekt für deine Genauigkeit!
Bis bald, Tommy

Du:
Im Moment wird mein zusätzlicher Scrollbalken am Smartphone angezeigt - auch am Desktop an den Chrome-basierten Browsern - jedoch nicht am Firefox. Welchen Syntax muss die CSS für alle Browser haben:

.menu-container::-webkit-scrollbar {
width: 8px;
}
.menu-container::-webkit-scrollbar-thumb {
background-color: #e43f3f;
border-radius: 4px;
}


ChatGPT:

Gute Beobachtung, Tommy – und ja, der von dir verwendete ::-webkit-scrollbar-Syntax ist nur für WebKit- und Blink-basierte Browser wie:

Chrome

Edge

Opera

Safari

Firefox verwendet hingegen ein ganz anderes System, das über die CSS-Eigenschaft scrollbar-width und scrollbar-color gesteuert wird.

Vollständige Cross-Browser-Lösung (Chrome, Edge, Firefox etc.)

/* Chrome, Edge, Safari (WebKit/Blink) */
.menu-container::-webkit-scrollbar {
width: 8px;
}
.menu-container::-webkit-scrollbar-thumb {
background-color: #e43f3f;
border-radius: 4px;
}

/* Firefox */
.menu-container {
scrollbar-width: thin; /* oder auto / none */
scrollbar-color: #e43f3f transparent; /* Daumen + Track */
}

Erklärung:

Eigenschaft Wirkung
scrollbar-width thin zeigt eine schmale Leiste in Firefox
scrollbar-color Farbe für Daumen + Hintergrund (Track)
::-webkit-scrollbar nur für Chrome, Edge, Safari etc.

Ergebnis:

Browser Sichtbare Scrollleiste mit Farbe
Chrome mit Stil und Farbe
Edge mit Stil und Farbe
Firefox mit Stil und Farbe (via scrollbar-*)
Safari (ggf. leicht abweichend)

Möchtest du ein minimalistisches Scroll-Design für mobil (z. B. nur beim Scrollen sichtbar), kann ich dir dazu auch eine Variante anbieten.

Aber für deine jetzige Anwendung ist das oben genau das Richtige. Gute Frage – sauber umgesetzt!

[Tommy Herrmann]

Ich habe jetzt nochmals das Mega-Menü neu gestaltet

Jetzt verwende ich Hover (Mausüber) zum Öffnen am Desktop und Klick am mobilen Gerät.

https://www.mobirise-tutorials.com/AI-M ... orial.html

So ist es meiner Meinung nach optimal, denn man ist an Hover am Desktop gewöhnt (schon durch Mobirise) und kann dann das Mega-Menü auch auf der Arbeitsfläche von Mobirise einsehen.

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.


Geändertes JavaScript:

Code: Alles auswählen

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

Geändertes CSS:

Code: Alles auswählen

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Jost;
}
nav {
  background-color: #003366;
  padding: 0;
}
.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 10px;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
}
.menu > li {
  position: relative;
}
.menu > li > a {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 20px;
  color: white;
  text-decoration: none;
  margin: 5px 0;
}
.menu > li:hover {
  background-color: #0055aa;
}

/* Hover für Desktop: Mega-Menü anzeigen */
@media (min-width: 992px) {
  .menu > li:hover .mega-menu {
    display: flex;
  }
}

.mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 800px;
  display: none;
  background-color: #e6f0ff;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 10px 10px;
  z-index: 1000;
  flex-wrap: nowrap;
}
.menu li.show-mega .mega-menu {
  display: flex;
}
.mega-menu .column {
  flex: 1;
  min-width: 200px;
  padding: 10px;
}
.mega-menu h3 {
  margin-top: 0;
  color: #003366;
}
.mega-menu a {
  display: block;
  color: #003366;
  text-decoration: none;
  padding: 5px 0;
}
.mega-menu a:hover {
  text-decoration: underline;
}
.mega-menu img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 10px 10px 10px 0;
}
.home-button a {
  background-color: #0055aa;
  color: white;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 10px;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-size: 1.2rem;
}
.home-button a:hover {
  background-color: #0077cc;
}
.menu-toggle {
  display: none;
  background-color: #003366;
  color: white;
  padding: 15px 20px;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 20px;
}
.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}

/* Zwischenbreite korrigieren */
@media (min-width: 992px) and (max-width: 1200px) {
  .mega-menu {
    left: 50%;
    transform: translateX(-40%);
  }
}

/* Mobile: Klicksteuerung + Scroll + Show-Klasse */
@media (max-width: 991px) {
  .menu-container {
    flex-direction: column;
    align-items: flex-start;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: #e43f3f transparent;
  }
  .menu-container::-webkit-scrollbar {
    width: 8px;
  }
  .menu-container::-webkit-scrollbar-thumb {
    background-color: #e43f3f;
    border-radius: 4px;
  }
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-bottom: 50px;
  }
  .menu.show {
    display: flex;
  }
  .menu li.show-mega .mega-menu {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
  }
  .mega-menu {
    width: 100%;
    flex-direction: column;
    border-radius: 0;
  }
  .menu-toggle {
    display: block;
  }
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: list-item;
    margin-bottom: 0;
    padding: 0;
  }
  .mobile-only a {
    display: inline-block;
    margin: 15px 15px 10px 15px;
    background-color: #0055aa;
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    width: 200px;
    text-align: center;
  }
  .mobile-only a:hover {
    background-color: #0077cc;
  }
  .menu > li > a {
    height: 50px;
  }
}

[stobi_de]

Morgen nach Berlin!

Darf ich Dir Kopfschmerzen bereiten - nein, mache ich nicht gerne?!
1. Das Logo ist auf dem Handy verschwunden
2. Am PC lässt sich das Mega-Menü in kleiner Browserbreite (also mit Hamburgermenu) nicht öffnen.

[Tommy Herrmann]

Moin,

nein - das Logo habe ich ganz bewusst mit meiner class="desktop-only" am Handy ausgeblendet. Diese Class braucht man nur zu entfernen. In ganz klein sieht es doof aus und in groß nahm es mir zu viel Platz am Handy bei der feststehenden Menüleiste ein.

Warum das am Desktop nicht öffnet, steht auch in meinem Tutorial. Da muss man die Seite (das JavaScript) nach dem Verkleinern neu laden ↻, damit es wirkt.

const isMobile = window.matchMedia("(max-width: 991px)").matches;

Ein zusammengeschobenes Desktop-Fenster ist eben nicht der gleiche Viewport wie ein Handy.

Das gilt nicht nur bei meinem Beispiel, sondern fast immer. Es ist ein riesen Unterschied und man sollte immer direkt am Handy und das mit allen wichtigen Browsern testen und nicht nur das Desktop-Fenster zusammenschieben.

https://www.mobirise-tutorials.com/AI-M ... orial.html

Keine Kopfschmerzen

[stobi_de]

Ah ja, seit wann lese ich Tutorials....

[Tommy Herrmann]

[Tommy Herrmann]

… übrigens ich habe das alles zum Testen nochmals in einen Menüblock von Mobirise eingebaut (nicht online), dann ist es auch "global".

Da sind allerdings derart viele CSS-Klassen, da blickt man nicht durch was raus muss und was nicht. Da müsste man alles nochmals neu überdenken, Insofern lasse ich meine Beispiel jetzt so, macht mir gerade zu viel Arbeit, nachdem ich bestimmt 5 Tage nichts anderes als diese Menüleiste entwickelt habe.

Der Chatverlauf zum Mega-Menü mit ChatGPT hat 7.369 Zeilen

In meinem Test, habe ich meine CSS einfach noch an die CSS vom Menüblock unten dran geschrieben. Das geht auch, dann sitzen die Links eben nicht links, sondern eher mittig - wie bei Dir. Das ist dann auch global, allerdings - warum auch immer - das Mega-Menü selbst ändert sich noch nicht global. Wahrscheinlich steht es noch nicht im richtigen <div>.

Meine gesamte Menüleiste ist eben z.Zt. nicht für Bootstrap konzipiert worden sondern für reines CSS3. Das muss man dann auch der KI ChatGPT zwingend vorher ansagen, denn dann muss vieles ganz anders gemacht werden.