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>
- 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;
}
}
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.
eingebaut - siehe Screenshot: