Mega-Menü adaptiert von Mobirise-Menüleiste
Hier die Testseite von mir:
https://www.mobirise-tutorials.com/AI-M ... -Mobirise/
Das Problem sind nur die Bilder im Mega-Menü
Das schiebt Mobirise irgendwie einen Riegel vor, den wir nicht finden.
Deswegen hat mir ChatGPT ein
zusätzliches JavaScript nur für diese Bilder am mobilen Gerät erstellt, ansonsten wird die normale JavaScript-Datei von Mobirise unverändert weiter verwendet.
Das zusätzliche JavaScript gehört in die
globale HTML der Site in den Bereich "
Before </body> code".
→ Menü → Sites → Zahnrad
an Projekt-Kachel → Site Einstellungen → Global HTML Insert → "Before </body> code"
JavaScript:
Code: Alles auswählen
<!-- JavaScript zum Anpassen der Bildgröße am mobilen Gerät -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const isMobile = () => window.innerWidth <= 991;
function fixMegaMenuMobile() {
if (!isMobile()) return;
// 1) Panel auf volle Breite und statisch
const panel = document.querySelector('.navbar .dropdown.megamenu .dropdown-menu');
if (panel) {
panel.style.position = 'static';
panel.style.left = '0';
panel.style.right = '0';
panel.style.transform = 'none';
panel.style.width = '100%';
panel.style.maxWidth = '100%';
panel.style.boxSizing = 'border-box';
panel.style.margin = '0';
panel.style.padding = '8px 0';
}
// 2) Container/Row/Cols sauber einpassen
document.querySelectorAll(
'.navbar .dropdown.megamenu .dropdown-menu .container, .navbar .dropdown.megamenu .dropdown-menu .row, .navbar .dropdown.megamenu .dropdown-menu [class*="col-"]'
).forEach(el => {
el.style.width = '100%';
el.style.maxWidth = '100%';
el.style.flex = '0 0 100%';
el.style.overflowX = 'hidden';
el.style.boxSizing = 'border-box';
// leichte Seitenpolster
if (el.classList.contains('container')) {
el.style.paddingLeft = '12px';
el.style.paddingRight = '12px';
}
});
// 3) Bilder wirklich auf 100% bringen – egal, was vorher gesetzt wurde
document.querySelectorAll('.navbar .dropdown.megamenu .dropdown-menu img').forEach(img => {
// harte Attribute entfernen
img.removeAttribute('width');
img.removeAttribute('height');
// evtl. inline width/max-width aus Styles killen
if (img.style) {
img.style.width = '100%';
img.style.maxWidth = '100%';
img.style.height = 'auto';
img.style.display = 'block';
// wenn Bilder optisch „zu hoch“ wirken, kannst du das aktivieren:
// img.style.objectFit = 'cover';
// img.style.maxHeight = '220px';
}
});
}
// Beim Start
fixMegaMenuMobile();
// Beim Resize (Wechsel zwischen Desktop/Mobile)
window.addEventListener('resize', fixMegaMenuMobile);
// Wenn das Dropdown geöffnet wird (sicherstellen, dass späte DOM-Manipulationen gefasst werden)
document.querySelectorAll('.navbar .dropdown.megamenu').forEach(dd => {
dd.addEventListener('shown.bs.dropdown', fixMegaMenuMobile);
});
});
</script>
Der Einbau ist eigentlich einfach.
> Erstelle eine ganz normale, beliebige Menüleiste von Mobirise. Ich habe das jetzt hier bisher nur mit der Menüleiste aus dem Standard-Thema "Mobirise5" gemacht und kann daher nichts zu anderen Themen oder gar "Mobirise4" sagen. Das muss noch getestet werden.
> Erstelle ein
Dropdown-Menü und benenne es so, dass Du es im Code Editor wieder finden wirst.
> Suche dann im HTML-Code im "Code Editor" nach:
> Ersetze dieses komplette
<li> Tag </li> deines originalen
Dropdown mit meinem HTML-Code. Wichtig: Die Bilder müssen eine
absolute URL zum Server haben. Das heißt die Bilder sollten sich schon zuvor auf dem Server befinden. Passe also die URL entsprechend zu Deinem Server an und natürlich alle Links.
HTML:
Code: Alles auswählen
<!-- Start Mega Menu Dropdown -->
<li class="nav-item dropdown megamenu">
<a class="nav-link link text-white text-primary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" data-app-placeholder="Type Text">
Projekte
</a>
<div class="dropdown-menu mega-menu p-0" aria-labelledby="megaMenu">
<div class="container py-3">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-3">
<img src="https://www.mobirise-tutorials.com/AI-Mega-Menu-Mobirise/assets/images/bild01.jpg" alt="Bild 1" class="img-fluid mb-2">
<h6 class="mb-2 text-white">Projekt-Seiten</h6>
<ul class="list-unstyled mb-0">
<li><a class="text-secondary py-0" href="index.html" data-app-placeholder="Type Text">Startseite</a></li>
<li><a class="text-secondary py-0" href="Tutorial.html" data-app-placeholder="Type Text">Mega-Menü Seite -2-</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="https://www.mobirise-tutorials.com/AI-Mega-Menu-Mobirise/assets/images/bild02.jpg" alt="Bild 2" class="img-fluid mb-2">
<h6 class="mb-2 text-white">Test 1</h6>
<ul class="list-unstyled mb-0">
<li><a class="py-0" href="#" data-app-placeholder="Type Text">Link1</a></li>
<li><a class="py-0" href="#" data-app-placeholder="Type Text">Link2</a></li>
<li><a class="py-0" href="#" data-app-placeholder="Type Text">Link3</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="https://www.mobirise-tutorials.com/AI-Mega-Menu-Mobirise/assets/images/bild03.jpg" alt="Bild 3" class="img-fluid mb-2">
<h6 class="mb-2 text-white">Über uns</h6>
<ul class="list-unstyled mb-0">
<li><a class="text-secondary py-0" href="#" data-app-placeholder="Type Text">Team</a></li>
<li><a class="text-secondary py-0" href="#" data-app-placeholder="Type Text">Karriere</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="https://www.mobirise-tutorials.com/AI-Mega-Menu-Mobirise/assets/images/bild04.jpg" class="img-fluid mb-2">
<h6 class="mb-2 text-white">Extras</h6>
<ul class="list-unstyled mb-0">
<li><a class="py-0" href="#" data-app-placeholder="Type Text">Blog</a></li>
<li><a class="py-0" href="#" data-app-placeholder="Type Text">FAQ</a></li>
<li><a class="py-0" href="#" data-app-placeholder="Type Text">Downloads</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- End Mega Menu Dropdown -->
> Nun noch diese
zusätzliche CSS an die vorhandene CSS von Mobirise (rechts) im Fenster "CSS Editor" unten dran kopieren.
CSS:
Code: Alles auswählen
/* 1) Hover-Öffnen auf Desktop (Bootstrap 5 bleibt unberührt) */
@media (min-width: 992px) {
.navbar .dropdown.megamenu:hover > .dropdown-menu {
display: block; /* statt Click */
}
/* Falls Popper das Menu positioniert, überschreiben wir das */
.navbar .dropdown.megamenu .dropdown-menu[data-bs-popper] {
left: 50% !important;
transform: translateX(-50%) !important;
top: 100% !important;
margin-top: 0 !important;
}
}
/* 2) Mega-Panel: zentriert unter der Navi, breite Fläche */
.navbar .dropdown-menu.mega-menu {
border: none;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
width: clamp(640px, 80vw, 1100px); /* passe nach Geschmack an */
left: 50%;
transform: translateX(-50%);
right: auto;
}
/* 3) Spalten und Typo */
.navbar .dropdown-menu.mega-menu h6 {
font-weight: 600;
letter-spacing: .2px;
}
.navbar .dropdown-menu.mega-menu a {
text-decoration: none;
}
P.S.:
Wenn einer das mit den
Bildern lösen kann, wäre es natürlich toll auf das JavaScript verzichten zu können. So etwas wie `max-width` braucht ihr natürlich erst gar nicht zu versuchen
… und auch so etwas nicht - da habe ich insgesamt so an die 3 Dutzend Versuche unternommen:
Code: Alles auswählen
/* <= 991px: Mega-Menü mobil stapeln & Bilder wirklich einpassen */
@media (max-width: 991.98px){
/* 1) Spalten sicher auf volle Breite erzwingen */
.navbar .dropdown.megamenu .dropdown-menu.mega-menu .col-12,
.navbar .dropdown.megamenu .dropdown-menu.mega-menu .col-md-6,
.navbar .dropdown.megamenu .dropdown-menu.mega-menu .col-lg-3{
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
/* 2) Container nicht breiter werden lassen */
.navbar .dropdown.megamenu .dropdown-menu.mega-menu .container{
max-width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* 3) Bilder: ALLES überschreiben, auch Inline-Styles */
.navbar.navbar .dropdown.megamenu .dropdown-menu.mega-menu img,
.navbar.navbar .dropdown.megamenu .dropdown-menu.mega-menu img[style*="width"],
.navbar.navbar .dropdown.megamenu .dropdown-menu.mega-menu .myimg{
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
}
an Projekt-Kachel → Site Einstellungen → Global HTML Insert → "Before </body> code"