Megamenü mit KI

[Bushisan]

Hallo zusammen,

ich habe hier:

https://www.shotokan-karate-dojo-neukir ... enue2.html

versucht ein Megamenü erstellen zu lassen. Aber weder ich noch die KI schaffen es das die Untermenüs direkt unterhalb der Navi sind und das die Untermenüs beim Versuch anzuklicken verschwinden.

Das liegt ja auch mit Sicherheit daran, dass es nicht schaffe die richtigen Dinge zu formulieren.

Kann mir hier jemand helfen.

Ich hab das hier mit meinem Mobirise 4.12 eingebaut!

Grüße Hubert

[Volker]

Da musst du mal hier den html code und die css posten.

Bitte getrennt und nutze den </> Button dafür !!

Dann lass ich die KI drüber fliegen

[Bushisan]

Hallo Volker, ich danke Dir!
Hier die Codes:

Code: Alles auswählen

<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; }

/* NAVBAR */
.navbar {
    height: 140px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 10;
}

/* LOGO */
.logo-container {
    display: flex;
    align-items: center;
}
.logo-container img { height: 130px; }
.logo-text {
    font-size: 18px;
    margin-left: 15px;
    white-space: nowrap;
}

/* NAV LINKS */
.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.nav-links li { position: relative; }

/* Menüpunkte Hover + animierter Unterstrich */
.nav-links a {
    color: black;
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
    position: relative;
    transition: color 0.3s ease;
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: orange;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}
.nav-links a:hover { color: orange; }
.nav-links a:hover::after { width: 100%; }

/* MEGA MENU */
.mega-menu {
    position: absolute;
    top: 140px; /* direkt unter Navbar */
    left: 50%;
    transform: translateX(-50%);
    background: white;
    width: auto;
    display: flex;
    justify-content: center;
    padding: 20px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 5;
}
.has-mega:hover .mega-menu {
    opacity: 1;
    pointer-events: auto;
}

.mega-menu-inner {
    display: flex;
    justify-content: center;
    gap: 50px;
}

/* Textlinks links */
.mega-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.mega-left a { margin: 8px 0; color: black; text-decoration: none; }

/* Bilder rechts */
.mega-right {
    display: flex;
    justify-content: center;
}
.image-links {
    display: flex;
    gap: 15px;
}
.image-links a {
    text-decoration: none;
    color: black;
    text-align: center;
    display: block;
}
.image-links img { width: 120px; height: 80px; object-fit: cover; display: block; margin-bottom: 5px; }

/* HAMBURGER */
.hamburger { display: none; font-size: 30px; cursor: pointer; }

/* MOBILE */
@media (max-width: 900px) {
    .logo-text { display: none; }

    .nav-links {
        position: absolute;
        top: 140px;
        left: 0;
        width: 100%;
        flex-direction: column;
        display: none;
        background: white;
        border-top: 1px solid #ddd;
        text-align: center;
    }
    .nav-links li { width: 100%; padding: 10px 0; }
    .nav-links.active { display: flex; }
    .hamburger {
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

    /* Untermenü im mobilen Menü */
    .mega-menu {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        flex-direction: column;
        padding: 15px 0;
        opacity: 1;
        pointer-events: auto;
        display: none; /* zuerst verstecken */
    }
    .has-mega.active .mega-menu { display: flex; }

    .mega-menu-inner {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .mega-left, .mega-right { width: 100%; justify-content: center; }
    .image-links { flex-direction: column; align-items: center; gap: 15px; }

    .nav-links a::after { display: none; }
}
</style>

Code: Alles auswählen

<nav class="navbar">
    <div class="logo-container">
        <img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/logo-2021-2-256x255.jpg" alt="Logo">
        <span class="logo-text">Shotokan Dojo Neukirchen b.S.R. e.V.</span>
    </div>

    <div class="hamburger" id="hamburger">☰</div>

    <ul class="nav-links" id="navLinks">
        <li><a href="#">Startseite</a></li>

        <!-- MEGA MENU 1 -->
        <li class="has-mega" id="megaItem1">
            <a href="#">Wir über uns</a>
            <div class="mega-menu">
                <div class="mega-menu-inner">
                    <div class="mega-left">
                        <a href="#">Unsere Geschichte</a>
                        <a href="#">Team</a>
                        <a href="#">Karriere</a>
                    </div>
                    <div class="mega-right">
                        <div class="image-links">
                            <a href="#"><img src="bild1.jpg" alt="">Projekt 1</a>
                            <a href="#"><img src="bild2.jpg" alt="">Projekt 2</a>
                            <a href="#"><img src="bild3.jpg" alt="">Projekt 3</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>

        <!-- MEGA MENU 2 -->
        <li class="has-mega" id="megaItem2">
            <a href="#">Projekte</a>
            <div class="mega-menu">
                <div class="mega-menu-inner">
                    <div class="mega-left">
                        <a href="#">Projekt A</a>
                        <a href="#">Projekt B</a>
                        <a href="#">Projekt C</a>
                    </div>
                    <div class="mega-right">
                        <div class="image-links">
                            <a href="#"><img src="bild4.jpg" alt="">Projekt 4</a>
                            <a href="#"><img src="bild5.jpg" alt="">Projekt 5</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>

        <li><a href="#">Impressum</a></li>
    </ul>
</nav>

Code: Alles auswählen

<script>
const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("navLinks");
const megaItems = document.querySelectorAll(".has-mega");

// Hamburger Toggle
hamburger.addEventListener("click", () => { navLinks.classList.toggle("active"); });

// Mobile Click auf Untermenüs
megaItems.forEach(item => {
    item.addEventListener("click", (e) => {
        if(window.innerWidth <= 900) {
            e.preventDefault();
            item.classList.toggle("active");
        }
    });
});

// Resize Reset
window.addEventListener("resize", () => {
    if(window.innerWidth > 900) {
        navLinks.classList.remove("active");
        megaItems.forEach(item => item.classList.remove("active"));
    }
});
</script>

[Bushisan]

Hallo zusammen,

mit diesen Änderungen sind die Untermenüs nach oben gerutscht. Und wenn ich versuche auf einen Untermenüpunkt zu klicken verschwindet das Untermenü auch nicht mehr. Schaut aber auch nicht gerade schick aus. Ich wollte das das Untermenu mit der Oberkante von unten an die Navi geht.

https://www.shotokan-karate-dojo-neukir ... enue2.html


Alt:

Code: Alles auswählen

.mega-menu {
    position: absolute;
    top: 140px;
    ...
}

Neu:

Code: Alles auswählen

.mega-menu {
    position: absolute;
    top: 100%;
    ...
}

[Volker]

Versuch diesen Code:

HTM Teil:

Code: Alles auswählen

<section data-bs-version="5.1" class="hello-mega-nav" style="background:{{navBg}};" data-navbar-height="{{navbarHeight}}">
<mbr-parameters>
    <header>Farben</header>
    <input type="color" title="Navbar Hintergrund" name="navBg" value="#ffffff">
    <input type="color" title="Link Farbe" name="linkColor" value="#000000">
    <input type="color" title="Hover Farbe" name="hoverColor" value="#ff8c00">
    <input type="color" title="Mega-Menu Hintergrund" name="megaBg" value="#ffffff">
    <header>Größen</header>
    <input type="range" inline title="Navbar Höhe px" name="navbarHeight" min="60" max="180" step="10" value="140">
    <input type="range" inline title="Logo Höhe px" name="logoHeight" min="40" max="160" step="10" value="120">
    <input type="range" inline title="Schriftgröße px" name="fontSize" min="14" max="24" step="1" value="18">
    <header>Logo</header>
    <input type="image" title="Logo" name="logoImg" value="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/logo-2021-2-256x255.jpg">
    <input type="text" title="Logo Text" name="logoText" value="Shotokan Dojo Neukirchen b.S.R. e.V.">
    <input type="checkbox" title="Logo Text anzeigen" name="showLogoText" checked>
</mbr-parameters>

<nav class="mnav-bar">
    <!-- Logo -->
    <div class="mnav-logo">
        <img src="{{logoImg}}" alt="Logo" class="mnav-logo-img">
        <span class="mnav-logo-text" mbr-if="showLogoText">{{logoText}}</span>
    </div>

    <!-- Hamburger -->
    <button class="mnav-hamburger" id="mnavHamburger" aria-label="Menü öffnen">
        <span></span><span></span><span></span>
    </button>

    <!-- Links -->
    <ul class="mnav-links" id="mnavLinks">

        <li><a href="#">Startseite</a></li>

        <!-- MEGA 1 -->
        <li class="mnav-has-mega">
            <a href="#" class="mnav-mega-trigger">Wir über uns <svg class="mnav-arrow" viewBox="0 0 10 6" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></a>
            <div class="mnav-mega">
                <div class="mnav-mega-inner">
                    <div class="mnav-mega-left">
                        <a href="#">Unsere Geschichte</a>
                        <a href="#">Team</a>
                        <a href="#">Karriere</a>
                    </div>
                    <div class="mnav-mega-right">
                        <a href="#"><img src="bild1.jpg" alt="">Projekt 1</a>
                        <a href="#"><img src="bild2.jpg" alt="">Projekt 2</a>
                        <a href="#"><img src="bild3.jpg" alt="">Projekt 3</a>
                    </div>
                </div>
            </div>
        </li>

        <!-- MEGA 2 -->
        <li class="mnav-has-mega">
            <a href="#" class="mnav-mega-trigger">Projekte <svg class="mnav-arrow" viewBox="0 0 10 6" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="currentColor"/></svg></a>
            <div class="mnav-mega">
                <div class="mnav-mega-inner">
                    <div class="mnav-mega-left">
                        <a href="#">Projekt A</a>
                        <a href="#">Projekt B</a>
                        <a href="#">Projekt C</a>
                    </div>
                    <div class="mnav-mega-right">
                        <a href="#"><img src="bild4.jpg" alt="">Projekt 4</a>
                        <a href="#"><img src="bild5.jpg" alt="">Projekt 5</a>
                    </div>
                </div>
            </div>
        </li>

        <li><a href="#">Impressum</a></li>

    </ul>
</nav>


<script>
document.addEventListener("DOMContentLoaded", function(){
  var section = document.querySelector(".hello-mega-nav");
  if(!section) return;

  /* CSS-Variablen aus data-Attributen setzen */
  var h   = parseInt(section.dataset.navbarHeight, 10) || 140;
  section.style.setProperty("--mnav-h",        h + "px");

  /* Farben & Größen aus inline-style lesen falls gesetzt */
  /* (Mobirise schreibt sie als style="background:..." – wir holen sie per dataset) */

  /* Hamburger */
  var hamburger = section.querySelector("#mnavHamburger");
  var navLinks  = section.querySelector("#mnavLinks");
  hamburger.addEventListener("click", function(){
    hamburger.classList.toggle("open");
    navLinks.classList.toggle("open");
  });

  /* Mega-Menu Mobile Toggle */
  var megaItems = section.querySelectorAll(".mnav-has-mega");
  megaItems.forEach(function(item){
    var trigger = item.querySelector(".mnav-mega-trigger");
    trigger.addEventListener("click", function(e){
      if(window.innerWidth <= 900){
        e.preventDefault();
        item.classList.toggle("active");
      }
    });
  });

  /* Außerhalb klicken → schließen */
  document.addEventListener("click", function(e){
    if(!section.contains(e.target)){
      navLinks.classList.remove("open");
      hamburger.classList.remove("open");
      megaItems.forEach(function(i){ i.classList.remove("active"); });
    }
  });
});
</script>
</section>

CSS:

Code: Alles auswählen

.hello-mega-nav *, .hello-mega-nav *::before, .hello-mega-nav *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.mnav-bar {
  height: var(--mnav-h, 140px);
  background: var(--mnav-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  border-bottom: 1px solid #ddd;
  position: relative;
  z-index: 1000;
}
.mnav-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}
.mnav-logo-img {
  height: var(--mnav-logo-h, 120px);
  width: auto;
}
.mnav-logo-text {
  font-size: 18px;
  white-space: nowrap;
}
.mnav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 auto;
}
.mnav-links > li {
  position: relative;
}
.mnav-links a {
  color: var(--mnav-link, #000000);
  text-decoration: none;
  font-size: var(--mnav-fs, 18px);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  position: relative;
  transition: color .3s;
}
.mnav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--mnav-hover, orange);
  transform: translateX(-50%);
  transition: width .3s;
}
.mnav-links a:hover {
  color: var(--mnav-hover, orange);
}
.mnav-links a:hover::after {
  width: 100%;
}
.mnav-arrow {
  transition: transform .3s;
  flex-shrink: 0;
}
.mnav-mega {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--mnav-mega-bg, #ffffff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 24px 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 999;
  min-width: 420px;
}
.mnav-mega::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top: 0;
  border-bottom-color: var(--mnav-mega-bg, #ffffff);
}
.mnav-has-mega:hover .mnav-mega, .mnav-has-mega.active .mnav-mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mnav-has-mega:hover .mnav-arrow, .mnav-has-mega.active .mnav-arrow {
  transform: rotate(180deg);
}
.mnav-mega-inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.mnav-mega-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 140px;
}
.mnav-mega-left a {
  font-size: 15px;
  color: #333;
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
}
.mnav-mega-left a:last-child {
  border-bottom: none;
}
.mnav-mega-left a::after {
  display: none;
}
.mnav-mega-left a:hover {
  color: var(--mnav-hover, orange);
  padding-left: 6px;
  transition: all .2s;
}
.mnav-mega-right {
  display: flex;
  gap: 15px;
}
.mnav-mega-right a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555;
}
.mnav-mega-right a::after {
  display: none;
}
.mnav-mega-right img {
  width: 110px;
  height: 75px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.mnav-mega-right a:hover img {
  border-color: var(--mnav-hover, orange);
}
.mnav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
}
.mnav-hamburger span {
  display: block;
  width: 26px;
  height: 3px;
  background: #333;
  border-radius: 2px;
  transition: all .3s;
}
.mnav-hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.mnav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.mnav-hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
@media (max-width: 900px) {
  .mnav-logo-text {
    display: none;
  }
  .mnav-hamburger {
    display: flex;
  }
  .mnav-links {
    position: absolute;
    top: var(--mnav-h, 140px);
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid #ddd;
    gap: 0;
    display: none;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 998;
  }
  .mnav-links.open {
    display: flex;
  }
  .mnav-links > li {
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  .mnav-links > li > a {
    padding: 14px 20px;
    justify-content: space-between;
  }
  .mnav-links > li > a::after {
    display: none;
  }
  .mnav-mega {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none;
    padding: 0;
    min-width: unset;
    display: none;
    border-top: 1px solid #eee;
  }
  .mnav-mega::before {
    display: none;
  }
  .mnav-has-mega.active .mnav-mega {
    display: block;
  }
  .mnav-mega-inner {
    flex-direction: column;
    gap: 0;
  }
  .mnav-mega-left {
    gap: 0;
  }
  .mnav-mega-left a {
    padding: 12px 30px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 15px;
  }
  .mnav-mega-right {
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
    gap: 12px;
  }
}

Muss aber alles dann im HTML geändert werden, ist also kein 100% Mobirise Menü

[Bushisan]

Hallo Volker,

hab das mal online gestellt. Schaut eigentlich so aus wie meine was die Abstände angeht. Das Hamburgermenü schaut allerdings um Klassen besser aus !! Wenn alle Stricke reißen lass ich das so

https://www.shotokan-karate-dojo-neukir ... index.html

Grüße und Danke wieder einmal für Deine Mühen

[stobi_de]

Also jetzt gerade ist aber Grütze

[Bushisan]

Ups - was war das denn - jetzt gehts wieder

https://www.shotokan-karate-dojo-neukir ... index.html

[Volker]

Hier ist das funktionierende : https://www.shotokan-karate-dojo-neukir ... enue2.html

[Bushisan]

Dankeschön

[Bushisan]

Hallihallo,

bin total stolz auf mich,
hab's doch tatsächlich geschafft mit Hilfe der KI ein responsives Megamenü zu erstellen. Nur bei dem Versuch die Unterpunkte im Hamburger nebeneinander hinzubekommen bin ich gescheitert, Aber egal - das schaut schonmal megageil aus finde ich. Jetzt kommen noch die Links und die richtigen Bilder rein und fertig

Für diese "Prompts" braucht man auch richtig Übung.

https://www.shotokan-karate-dojo-neukir ... index,html

Grüße

[Volker]

Ich kann das Hamburger nicht öffnen
Da stimmt noch was nicht denke ich

[Bushisan]

Jetzt funktioniert es wieder !!

Dankeschön !

Grüße

[Bushisan]

Hallo zusammen,

ich hoffe ich nerve Euch nicht. Bin immer noch am rumspielen mit meinem Megamenü. Möchte jetzt ne Kopfzeile machen und darunter die Navi setzen. Nach vielen Versuchen hab ich es geschafft, dass die Untermenüs nicht zentriert am Menüpunkt hängen sondern zentriert auf dem Bildschirm sind. Jetzt hätte ich gern diese Untermenüs responive. Bekomme es aber nicht hin. Bin sicher - das ist für viele hier ein Klacks.

https://www.shotokan-karate-dojo-neukir ... nsive.html

Grpße und einen schönen Tag!!

[Bushisan]

Hat sich erledigt

[Volker]

Naja, beim Handy die Menüpunkte nebeneinander ist aber jetzt nicht wirklich do toll
Und die Schrift Größe der Menüpunkte ist viel zu klein.
Das Menü hier ist doch viel besser : https://www.shotokan-karate-dojo-neukir ... enue2.html

Warum nicht so ?

[Bushisan]

Hallo Volker,

warum auch immer ich wollte unbedingt beide Menüs übereinander und responsiv haben ohne dieses nach rechts und links springen. Ich habs bei meinen ersten Versionen auch nicht geschafft diesen "li-Bereich" zu eliminieren. Man musste ganz schnell mit der Maus nach unten fahren sonst hätten sich die Untermenüs wieder geschlossen.
Muss auch noch ein paar Links hinterlegen

Bis auf die Schriftgröße hab ich noch einiges rumgeschraubt. Gefällt mir jetzt eigentlich ganz gut.

Vielleicht kannst Du ja nochmal draufschauen - aber auch alle anderen sind gern eingeladen !!

Bin dankbar für jeden kritischen Blick und Kommentar.

https://www.shotokan-karate-dojo-neukir ... nsive.html

Der nächste Aspekt der ganzen Geschichte ist, dass ich mir über meine Defizite wirklich bewusst bin und nehme sowas dann auch als Gelegenheit wieder einen Schritt nach vorn zu kommen. Die Möglichkeiten mit der KI sind ja wirklich enorm. Obwohl mir wohl bei der Erstellung der Anfragen noch Übung fehlt und ich in einigen Bereichen selbst Hand anlegen musst. Aber egal - mir gefällts ganz gut.

Danke für Deine Zeit und Deine Mühen !!!

Grüße aus der schönen Oberpfalz
Hubert

[Volker]

Meine Meinung:

In der Desktop Ansicht sind mir die Bilder im Verhältnis zum Text zu groß. Ansonsten OK.
In der Handy Ansicht für mich so nicht akzeptabel, weil eben 1. Quer Scroller weil horizontal und nicht typisch für ein Hamburger Menü. 2. Die Menüpunkte sind mir viel zu klein.

Ein Fehler noch im Hamburger: Da sind ja sofort alle Menüpunkte auf

[Bushisan]

Hallo zusammen,

eingentlich sollte meine kleine Welt jetzt in Ordnung sein s.hier:

https://www.shotokan-karate-dojo-neukir ... nsive.html

aber

nachdem ich die zwei Blöck auf die Homepage eingebunden hatte werden meine Blöcke zerschossen.

So haben die Blöcke mal ausgesehen

https://www.shotokan-karate-dojo-neukirchen.de/#close

jetzt sehen die so aus

https://www.shotokan-karate-dojo-neukir ... aps/#close

was ist da passiert - kann mir jemand helfen?

Grüße und einen schönen Abend!

[Bushisan]

Hallo zusammen,

im Block sind vermutlich globale Einstellung, die auch andere Blöcke beeinflussen verwendet worden. Ich fange morgen nochmal bei null an und versuche diese Einstellung von Beginn an zu vermeiden, Mal sehen was rauskommt. Mit Hilfe einer KI hab ich das mit dem vorhandenen Code nicht hinbekommen. Aber: Wir lassen uns nicht unterkrigen ist mein zweiter Vorname