Code: Alles auswählen
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mega Menü</title>
<style>
/* =========================
WRAPPER
========================= */
.mm-wrapper {
position: sticky;
top: 0;
z-index: 99999;
background: #fff;
font-family: Arial, sans-serif;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mm-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* =========================
HAMBURGER
========================= */
.mm-hamburger {
display: none;
width: 30px;
height: 22px;
cursor: pointer;
position: absolute;
right: 20px;
}
.mm-hamburger span {
display: block;
height: 3px;
background: #000;
margin: 5px 0;
transition: 0.3s ease;
}
.mm-hamburger.mm-active span:nth-child(1){
transform: rotate(45deg) translate(5px,5px);
}
.mm-hamburger.mm-active span:nth-child(2){
opacity: 0;
}
.mm-hamburger.mm-active span:nth-child(3){
transform: rotate(-45deg) translate(6px,-6px);
}
/* =========================
NAV
========================= */
.mm-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
position: relative;
}
.mm-nav > li {
margin: 0 25px;
}
.mm-nav > li > a {
text-decoration: none;
color: #000;
padding: 20px 5px;
display: block;
font-weight: 600;
font-size: 22px;
transition: color 0.3s ease;
}
.mm-nav > li > a:hover {
color: #ef7f1a;
}
/* =========================
DESKTOP MEGA
========================= */
@media (min-width: 993px){
.mm-mega {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 60vw;
max-width: 1400px;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
background: #fff;
padding: 25px;
box-shadow: 0 8px 30px black;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 9999;
border-radius: 15px;
}
.mm-nav > li.mm-open .mm-mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* Mega Items */
.mm-mega-item {
flex: 1 1 0;
margin: 0 10px;
text-align: center;
}
.mm-mega-item img {
width: 100%;
max-width: 100%;
border-radius: 15px;
height: auto;
display: block;
transition: transform 0.8s;
}
.mm-mega-item:hover img {
transform: scale(0.98);
}
.mm-mega-title {
margin-top: 10px;
font-size: 20px;
transition: color 0.3s ease;
}
/* Bild + Titel als EIN klickbarer Link */
.mm-main-link {
display: block;
text-decoration: none;
color: inherit;
}
.mm-main-link:hover .mm-mega-title {
color: #ef7f1a;
}
/* =========================
MOBILE
========================= */
@media (max-width: 992px){
.mm-hamburger {
display: block;
}
.mm-nav {
flex-direction: column;
align-items: center;
text-align: center;
display: none;
width: 100%;
}
.mm-nav.mm-active {
display: flex;
}
.mm-nav > li {
width: 100%;
margin: 0;
}
.mm-nav > li > a {
padding: 15px 5px;
font-size: 20px;
}
.mm-mega {
position: relative;
width: 100%;
transform: none;
box-shadow: none;
padding: 10px 0;
display: flex !important;
flex-direction: column;
align-items: center;
}
.mm-mega-item {
width: 100%;
margin: 15px 0;
}
.mm-mega-item img {
width: 200px;
height: 200px;
object-fit: cover;
margin: 0 auto;
border-radius: 15px;
}
/* Submenü mobile */
.mm-sub-images {
position: relative !important;
width: 100%;
flex-direction: column;
padding: 10px 0;
box-shadow: none;
gap: 15px;
}
}
/* ===== HIGHLIGHTS SUB LINKS ===== */
.mm-sub-images {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 15px;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
position: absolute;
top: calc(100% + 15px);
left: 50%;
transform: translateX(-50%);
width: 60vw;
max-width: 1400px;
background: #fff;
padding: 15px;
box-shadow: 0 8px 30px black;
border-radius: 15px;
z-index: 9999;
}
.mm-sub-images a {
flex: 1 1 0;
text-decoration: none;
color: #000;
display: flex;
flex-direction: column;
align-items: center;
}
.mm-sub-images img {
width: 100%;
border-radius: 10px;
transition: transform 0.3s;
}
.mm-sub-images a:hover img {
transform: scale(0.98);
}
.mm-sub-images div {
margin-top: 6px;
text-align: center;
}
.mm-sub-images a:hover div {
color: #ef7f1a;
}
.mm-highlights:hover .mm-sub-images {
opacity: 1;
max-height: 1000px;
}
</style>
<nav class="mm-wrapper">
<div class="mm-container">
<div class="mm-hamburger" id="mmHamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul class="mm-nav" id="mmNav">
<li><a href="index.html">Startseite</a></li>
<li class="mm-has-mega">
<a href="index.html#close">Unser Verein</a>
<div class="mm-mega">
<div class="mm-mega-item">
<a href="Wir-ueber-uns.html" class="mm-main-link">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/wirueberuns_7.png">
<div class="mm-mega-title">Wir über uns</div>
</a>
</div>
<div class="mm-mega-item">
<a href="Trainer.html" class="mm-main-link">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/Trainerteam.png">
<div class="mm-mega-title">Unsere Trainer</div>
</a>
</div>
<div class="mm-mega-item">
<a href="Training.html" class="mm-main-link">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/Trainingszeiten_2.png">
<div class="mm-mega-title">Trainingszeiten</div>
</a>
</div>
<div class="mm-mega-item">
<a href="kontakt.php" class="mm-main-link">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/kontakt_2.png">
<div class="mm-mega-title">E-Mail an uns..</div>
</a>
</div>
</div>
</li>
<li class="mm-has-mega">
<a href="#">Weitere Infos</a>
<div class="mm-mega">
<div class="mm-mega-item">
<a href="Termine-Links.html" class="mm-main-link">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/termine_links.png">
<div class="mm-mega-title">Termine/Links</div>
</a>
</div>
<div class="mm-mega-item">
<a href="anfahrt.html" class="mm-main-link">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/anfahrt_4.png">
<div class="mm-mega-title">Anfahrt</div>
</a>
</div>
<div class="mm-mega-item mm-highlights">
<a href="#" class="mm-main-link">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/highlights_2.png">
<div class="mm-mega-title">Vereinshighlights</div>
</a>
<div class="mm-sub-images">
<a href="Highlights-2023.html">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/2023.png">
<div>Highlights 2023</div>
</a>
<a href="Highlights-2024.html">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/2024.png">
<div>Highlights 2024</div>
</a>
<a href="Highlights-2025.html">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/2025.png">
<div>Highlights 2025</div>
</a>
<a href="#">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/2026_2.png">
<div>Highlights 2026</div>
</a>
</div>
</div>
<div class="mm-mega-item">
<a href="anmeldung.php" class="mm-main-link">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/Mitgliederausweis.png">
<div class="mm-mega-title">Mitgliederbereich</div>
</a>
</div>
</div>
</li>
<li><a href="Impressum-Datenschutz.html">Impressum/Datenschutzerklärung</a></li>
</ul>
</div>
</nav>
<script>
document.addEventListener("DOMContentLoaded", function(){
const hamburger = document.getElementById("mmHamburger");
const nav = document.getElementById("mmNav");
const megaItems = document.querySelectorAll(".mm-has-mega");
let timeout;
// Hamburger toggle
hamburger.addEventListener("click", function(){
this.classList.toggle("mm-active");
nav.classList.toggle("mm-active");
});
// Desktop Hover + Mobile Click
megaItems.forEach(item => {
item.addEventListener("mouseenter", function(){
if(window.innerWidth > 992){
clearTimeout(timeout);
megaItems.forEach(i => i.classList.remove("mm-open"));
item.classList.add("mm-open");
}
});
item.addEventListener("mouseleave", function(){
if(window.innerWidth > 992){
timeout = setTimeout(()=>{ item.classList.remove("mm-open"); },300);
}
});
item.addEventListener("click", function(e){
if(window.innerWidth <= 992){
e.preventDefault();
item.classList.toggle("mm-open");
}
});
});
// Mobile Links schließen Hamburger
document.querySelectorAll('.mm-nav a').forEach(link => {
link.addEventListener('click', function(){
if(window.innerWidth <= 992){
nav.classList.remove('mm-active');
hamburger.classList.remove('mm-active');
}
});
});
});
</script>
Code: Alles auswählen
<section class="mrb-mega-menu-block">
<div class="mrb-container">
<!-- Hamburger -->
<div class="mrb-hamburger" id="mrbHamburger">
<span></span>
<span></span>
<span></span>
</div>
<!-- Navigation -->
<ul class="mrb-nav" id="mrbNav">
<li><a href="index.html">Home</a></li>
<!-- Unser Verein -->
<li class="mrb-has-mega">
<a href="#">Unser Verein</a>
<div class="mrb-mega">
<div class="mrb-mega-item">
<a href="Wir-ueber-uns.html" class="mrb-main-link">
<img src="https://via.placeholder.com/200x150?text=Bild1">
<div class="mrb-mega-title">Wir über uns</div>
</a>
</div>
<div class="mrb-mega-item">
<a href="Trainer.html" class="mrb-main-link">
<img src="https://via.placeholder.com/200x150?text=Bild2">
<div class="mrb-mega-title">Unsere Trainer</div>
</a>
</div>
<div class="mrb-mega-item">
<a href="Training.html" class="mrb-main-link">
<img src="https://via.placeholder.com/200x150?text=Bild3">
<div class="mrb-mega-title">Trainingszeiten</div>
</a>
</div>
<div class="mrb-mega-item">
<a href="Kontakt.html" class="mrb-main-link">
<img src="https://via.placeholder.com/200x150?text=Bild4">
<div class="mrb-mega-title">Kontakt</div>
</a>
</div>
</div>
</li>
<!-- Weitere Infos -->
<li class="mrb-has-mega mrb-has-sub">
<a href="#">Weitere Infos</a>
<div class="mrb-mega">
<div class="mrb-mega-item">
<a href="Termine.html" class="mrb-main-link">
<img src="https://via.placeholder.com/200x150?text=Bild1">
<div class="mrb-mega-title">Termine</div>
</a>
</div>
<div class="mrb-mega-item">
<a href="Anfahrt.html" class="mrb-main-link">
<img src="https://via.placeholder.com/200x150?text=Bild2">
<div class="mrb-mega-title">Anfahrt</div>
</a>
</div>
<div class="mrb-mega-item mrb-sub-images">
<a href="Highlights.html" class="mrb-main-link">
<img src="https://via.placeholder.com/200x150?text=Bild3">
<div class="mrb-mega-title">Highlights</div>
</a>
<div class="mrb-submenu">
<a href="2023.html">2023</a>
<a href="2024.html">2024</a>
<a href="2025.html">2025</a>
<a href="2026.html">2026</a>
</div>
</div>
<div class="mrb-mega-item">
<a href="Mitgliederbereich.html" class="mrb-main-link">
<img src="https://via.placeholder.com/200x150?text=Bild4">
<div class="mrb-mega-title">Mitgliederbereich</div>
</a>
</div>
</div>
</li>
<li><a href="Impressum.html">Impressum</a></li>
</ul>
</div>
</section>
<style>
/* =========================
Container & Wrapper
========================= */
.mrb-mega-menu-block {
position: sticky;
top: 0;
background: #fff;
z-index: 9999;
font-family: Arial, sans-serif;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mrb-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* =========================
Hamburger
========================= */
.mrb-hamburger {
display: none;
width: 30px;
height: 22px;
cursor: pointer;
position: absolute;
right: 20px;
}
.mrb-hamburger span {
display: block;
height: 3px;
background: #000;
margin: 5px 0;
transition: 0.3s;
}
.mrb-hamburger.mrb-active span:nth-child(1){ transform: rotate(45deg) translate(5px,5px);}
.mrb-hamburger.mrb-active span:nth-child(2){opacity:0;}
.mrb-hamburger.mrb-active span:nth-child(3){ transform: rotate(-45deg) translate(6px,-6px);}
/* =========================
Navigation
========================= */
.mrb-nav {
list-style: none;
margin:0;
padding:0;
display:flex;
justify-content:center;
position: relative;
}
.mrb-nav>li { margin:0 25px; position: relative;}
.mrb-nav>li>a { text-decoration:none; color:#000; padding:20px 5px; font-weight:600; font-size:22px; display:block; transition:color 0.3s; }
.mrb-nav>li>a:hover { color:#ef7f1a; }
/* =========================
Mega Menus Desktop
========================= */
@media(min-width:993px){
.mrb-mega {
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
width:70%;
display:flex;
justify-content:space-between;
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 8px 30px rgba(0,0,0,0.2);
opacity:0;
visibility:hidden;
pointer-events:none;
transition: opacity 0.3s ease;
}
.mrb-has-mega:hover>.mrb-mega {
opacity:1;
visibility:visible;
pointer-events:auto;
}
.mrb-mega-item { flex:1 1 0; text-align:center; margin:0 5px; white-space:nowrap;}
.mrb-mega-item img { width:100%; height:auto; display:block; border-radius:8px; transition:transform 0.3s; }
.mrb-mega-item:hover img{transform:scale(0.98);}
.mrb-mega-title { margin-top:8px; font-size:18px; }
.mrb-main-link { text-decoration:none; color:inherit; display:block;}
.mrb-main-link:hover .mrb-mega-title{ color:#ef7f1a; }
/* Submenu Desktop */
.mrb-submenu {
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
width:70%;
display:flex;
justify-content:space-between;
background:#fff;
padding:10px;
border-radius:8px;
opacity:0;
visibility:hidden;
pointer-events:none;
transition: all 0.3s ease;
margin-top:10px;
}
.mrb-mega-item.mrb-sub-images:hover .mrb-submenu {
opacity:1;
visibility:visible;
pointer-events:auto;
}
.mrb-submenu a { text-decoration:none; color:#000; padding:5px 10px; text-align:center; flex:1;}
.mrb-submenu a:hover { color:#ef7f1a;}
}
/* =========================
Mobile
========================= */
@media(max-width:992px){
.mrb-hamburger { display:block;}
.mrb-nav{ flex-direction:column; align-items:center; display:none; width:100%;}
.mrb-nav.mrb-active{display:flex;}
.mrb-nav>li{width:100%; margin:0;}
.mrb-nav>li>a{padding:15px 5px; font-size:20px;}
.mrb-mega { position:relative; width:100%; transform:none; padding:0; display:flex; flex-direction:column; box-shadow:none;}
.mrb-mega-item { width:100%; margin:10px 0;}
.mrb-mega-item img { width:80%; max-width:200px; margin:0 auto; display:block; height:auto;}
.mrb-submenu { display:none !important;}
}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
const hamburger=document.getElementById("mrbHamburger");
const nav=document.getElementById("mrbNav");
const megaItems=document.querySelectorAll(".mrb-has-mega");
let timeout;
// Hamburger toggle
hamburger.addEventListener("click",function(){
this.classList.toggle("mrb-active");
nav.classList.toggle("mrb-active");
});
// Mobile Click toggle
megaItems.forEach(item=>{
item.addEventListener("click",function(e){
if(window.innerWidth<=992){
e.preventDefault();
item.classList.toggle("mrb-open");
}
});
});
});
</script>
Code: Alles auswählen
<section data-bs-version="5.1" class="menu menu1" group="Menu" plugins="DropDown, TouchSwipe" always-top="" global="" once="menu" not-draggable="" position-absolute="">
<mbr-parameters>
<header>Show/Hide</header>
<input type="checkbox" title="Logo" name="showLogo" checked="">
<input type="range" title="Logo Size" inline="" name="logoSize" min="1" max="5" step="0.1" value="3" condition="showLogo">
<input type="checkbox" title="Brand Name" name="showBrand" checked="">
<input type="checkbox" title="Menu Items" name="showItems" checked="">
<select title="Menu Items Align" name="contentAlign" condition="showItems">
<option value="1" selected="">Left</option>
<option value="2">Center</option>
<option value="3">Right</option>
</select>
<input type="checkbox" title="Icons" name="showIcons">
<select title="Amount" name="iconsAmount" condition="showIcons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
</select>
<input type="color" title="Icons Color" name="iconsColor" value="#000000" condition="showIcons">
<input type="checkbox" title="Button" name="showButtons" checked="">
<header>Styles</header>
<input type="checkbox" title="Collapsed" name="collapsed" condition="none">
<input type="checkbox" title="Transparent" name="transparent" checked="">
<input type="checkbox" title="Sticky" name="sticky" checked="">
<input type="range" title="Opacity" name="opacity" min="0" max="1" step="0.1" value="0.8" condition="transparent">
<input type="color" title="Color" name="menuBgColor" value="#ffffff">
<input type="color" title="Hamburger" name="hamburgerColor" value="#000000">
</mbr-parameters>
<nav class="navbar navbar-dropdown" mbr-class="{'navbar-fixed-top':sticky,
'navbar-expand-lg':!collapsed,
'collapsed':collapsed}">
<div class="container">
<div class="navbar-brand">
<span mbr-if="showLogo" class="navbar-logo">
<a href="https://mobiri.se">
<img src="../_images/logo.png" alt="Mobirise Website Builder" mbr-style="{'height': logoSize + 'rem'}">
</a>
</span>
<span mbr-if="showBrand" mbr-buttons="" mbr-theme-style="display-4" class="navbar-caption-wrap" data-toolbar="-mbrBtnMove,-mbrBtnAdd,-mbrBtnRemove,-iconFont"><a class="navbar-caption text-black" data-app-selector=".navbar-caption" href="https://mobiri.se" data-app-placeholder="Type Text">Mobirise</a></span>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" mbr-if="showItems || showIcons || showButtons">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" mbr-if="showItems || showIcons || showButtons">
<ul mbr-menu="" class="navbar-nav nav-dropdown" mbr-theme-style="display-4" mbr-if="showItems" mbr-class="{'nav-right': !showButtons,'navbar-nav-top-padding': isPublish && !showBrand && !showLogo}">
<li class="nav-item">
<a class="nav-link link text-black" href="https://mobiri.se" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">About</a>
</li>
<li class="nav-item">
<a class="nav-link link text-black" href="https://mobiri.se" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" aria-expanded="false">Services</a>
</li>
<li class="nav-item">
<a class="nav-link link text-black" href="https://mobiri.se" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Contacts</a>
</li>
</ul>
<div class="icons-menu" mbr-if="showIcons">
<a class="iconfont-wrapper" href="https://mobiri.se">
<span mbr-icon="" class="p-2 mbr-iconfont mobi-mbri-phone mobi-mbri"></span>
</a>
<a class="iconfont-wrapper" href="https://mobiri.se" mbr-if="iconsAmount > 1">
<span mbr-icon="" class="p-2 mbr-iconfont mobi-mbri-letter mobi-mbri"></span>
</a>
<a class="iconfont-wrapper" href="https://mobiri.se" mbr-if="iconsAmount > 2">
<span mbr-icon="" class="p-2 mbr-iconfont mobi-mbri-map-pin mobi-mbri"></span>
</a>
<a class="iconfont-wrapper" href="https://mobiri.se" mbr-if="iconsAmount > 3">
<span mbr-icon="" class="p-2 mbr-iconfont mobi-mbri-shopping-cart mobi-mbri"></span>
</a>
</div>
<div mbr-if="showButtons" mbr-buttons="" mbr-theme-style="display-4" class="navbar-buttons mbr-section-btn">
<a class="btn btn-primary" href="https://mobiri.se" data-app-placeholder="Type Text"> Start Now!</a>
</div>
</div>
</div>
</nav>
</section>
Code: Alles auswählen
z-index: 1000;
width: 100%;
position: relative;
.dropdown-item:before {
font-family: Moririse2 !important;
content: "\e966";
display: inline-block;
width: 0;
position: absolute;
left: 1rem;
top: 0.5rem;
margin-right: 0.5rem;
line-height: 1;
font-size: inherit;
vertical-align: middle;
text-align: center;
overflow: hidden;
transform: scale(0, 1);
transition: all 0.25s ease-in-out;
}
@media (max-width: 767px) {
.navbar-toggler {
transform: scale(0.8);
}
}
.navbar-brand {
img {
max-width: 100%;
max-height: 100%;
border-radius: 0px !important;
}
flex-shrink: 0;
align-items: center;
margin-right: 0;
padding: 10px 0;
transition: all 0.3s;
word-break: break-word;
z-index: 1;
.navbar-caption {
line-height: inherit !important;
}
.navbar-logo a {
outline: none;
}
}
.navbar-nav {
margin: auto;
margin-left: 0;
& when (@contentAlign = '2') {
margin-left: auto;
}
& when (@contentAlign = '3') {
margin-left: auto;
margin-right: 0;
}
.nav-item {
padding: 0 !important;
transition: .3s all !important;
.nav-link {
padding: 16px !important;
margin: 0 !important;
border-radius: 1rem !important;
transition: .3s all !important;
&:hover {
background-color: rgba(27, 31, 10, 0.06);
}
& when not (@isRoundedButtons) {
border-radius: 4px !important;
}
}
}
.open {
.nav-link {
&::after {
transform: rotate(180deg);
}
@media (min-width: 992px) {
&::before {
content: "";
width: 100%;
height: 20px;
top: 100%;
background: transparent;
position: absolute;
}
}
}
}
.dropdown-item {
padding: 12px !important;
border-radius: 0.5rem !important;
margin: 0 8px !important;
transition: .3s all !important;
&:hover {
background-color: rgba(27, 31, 10, 0.06);
}
& when not (@isRoundedButtons) {
border-radius: 4px !important;
}
}
& when not (@showLogo), (@showBrand) {
@media (min-width: 992px) {
padding-left: 1.5rem;
}
}
& when not (@showBrand) {
@media (min-width: 992px) {
padding-left: 1.5rem;
}
}
}
.nav-link {
width: fit-content;
position: relative;
}
.navbar-logo {
padding-left: 2rem;
margin: 0 !important;
@media (max-width: 767px) {
padding-left: 1rem;
}
}
.navbar-caption {
padding-left: 1rem;
padding-right: .5rem;
& when not (@showLogo) {
@media (min-width: 767px) {
padding-left: 2rem;
}
}
}
.nav-dropdown {
@media (max-width: 767px) {
padding-bottom: 0.5rem;
}
}
.nav-dropdown .link.dropdown-toggle::after {
margin-left: 0.5rem;
margin-top: 0.2rem;
transition: .3s all;
}
.container {
display: flex;
height: 90px;
padding: 0.5rem 0.6rem;
flex-wrap: nowrap;
& when not (@collapsed) {
@media (min-width: 992px) {
}
& when (@transparent) {
background: rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important;
}
}
left: 0;
right: 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 100vw;
margin-top: 1rem;
background-color: @menuBgColor;
box-shadow: 0 30px 60px 0 rgba(27, 31, 10, 0.08);
@media (max-width: 992px) {
padding-right: 2rem;
}
@media (max-width: 767px) {
width: 95%;
height: 56px !important;
padding-right: 1rem;
margin-top: 0rem;
}
& when not (@isRoundedButtons) {
border-radius: 4px !important;
}
}
.iconfont-wrapper {
color: @iconsColor !important;
font-size: 1.5rem;
padding-right: 0.5rem;
}
.dropdown-menu {
flex-wrap: wrap;
flex-direction: column;
max-width: 100%;
padding: 12px 4px !important;
border-radius: 1.5rem;
transition: .3s all !important;
min-width: auto;
background: @menuBgColor;
& when (@transparent) {
background: rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important;
}
& when not (@isRoundedButtons) {
border-radius: 4px !important;
}
}
.nav-item:focus, .nav-link:focus {
outline: none;
}
.dropdown .dropdown-menu .dropdown-item {
width: auto;
transition: all 0.25s ease-in-out;
&::after {
right: 0.5rem;
}
.mbr-iconfont {
margin-right: 0.5rem;
vertical-align: sub;
&:before {
display: inline-block;
transform: scale(1, 1);
transition: all 0.25s ease-in-out;
}
}
}
.collapsed {
.dropdown-menu .dropdown-item:before {
display: none;
}
.dropdown .dropdown-menu .dropdown-item {
padding: 0.235em 1.5em 0.235em 1.5em !important;
transition: none;
margin: 0 !important;
}
}
.navbar {
min-height: 90px;
transition: all 0.3s;
border-bottom: 1px solid transparent;
background: transparent !important;
&:not(.navbar-short) {
}
&.opened {
transition: all 0.3s;
}
.dropdown-item {
padding: 0.5rem 1.8rem;
}
.navbar-logo img {
width: auto;
}
.navbar-collapse {
z-index: 1;
justify-content: flex-end;
}
&.collapsed {
justify-content: center;
.nav-item .nav-link::before {
display: none;
}
&.opened {
.dropdown-menu {
top: 0;
}
@media (min-width: 992px) {
&:not(.navbar-short) .navbar-collapse when (@showLogo) {
max-height: ~"calc(98.5vh - @{logoSize}rem)";
}
}
}
.dropdown-menu {
.dropdown-submenu {
left: 0 !important;
}
.dropdown-item:after {
right: auto;
}
.dropdown-toggle[data-toggle="dropdown-submenu"]:after {
margin-left: 0.5rem;
margin-top: 0.2rem;
border-top: 0.35em solid;
border-right: 0.35em solid transparent;
border-left: 0.35em solid transparent;
border-bottom: 0;
top: 41%;
}
}
ul.navbar-nav {
li {
margin: auto;
}
}
.dropdown-menu .dropdown-item {
padding: 0.25rem 1.5rem;
text-align: center;
}
.icons-menu {
padding-left: 0;
padding-right: 0;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
@media (max-width: 767px) {
.navbar-logo {
img {
height: 2rem !important;
}
}
min-height: 72px;
}
@media (max-width: 991px) {
.nav-item .nav-link::before {
display: none;
}
&.opened {
.dropdown-menu {
top: 0;
}
}
.dropdown-menu {
.dropdown-submenu {
left: 0 !important;
}
.dropdown-item:after {
right: auto;
}
.dropdown-toggle[data-toggle="dropdown-submenu"]:after {
margin-left: 0.5rem;
margin-top: 0.2rem;
border-top: 0.35em solid;
border-right: 0.35em solid transparent;
border-left: 0.35em solid transparent;
border-bottom: 0;
top: 40%;
}
}
ul.navbar-nav {
li {
}
}
.dropdown-menu .dropdown-item {
padding: 0.25rem 1.5rem !important;
text-align: center;
}
.navbar-brand {
flex-shrink: initial;
flex-basis: auto;
word-break: break-word;
padding-right: 10px;
}
.navbar-toggler {
flex-basis: auto;
}
.icons-menu {
padding-left: 0;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
&.navbar-short {
.navbar-logo {
img {
height: 2rem;
}
}
}
padding: 0 !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.dropdown-item.active, .dropdown-item:active {
background-color: transparent;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding: 0;
}
.nav-dropdown .link.dropdown-toggle {
margin-right: 1.667em;
&[aria-expanded="true"] {
margin-right: 0;
padding: 0.667em 1.667em;
}
}
.navbar.navbar-expand-lg .dropdown {
.dropdown-menu {
background: @menuBgColor;
.dropdown-submenu {
margin: 0;
left: 105%;
transform: none;
top: -12px;
}
}
}
.navbar .dropdown.open > .dropdown-menu {
display: flex;
}
ul.navbar-nav {
flex-wrap: wrap;
}
.navbar-buttons {
text-align: center;
min-width: 140px;
@media (max-width: 992px) {
text-align: left;
}
}
button.navbar-toggler {
outline: none;
width: 31px;
height: 20px;
cursor: pointer;
transition: all 0.2s;
position: relative;
align-self: center;
.hamburger span {
position: absolute;
right: 0;
width: 30px;
height: 2px;
border-right: 5px;
background-color: @hamburgerColor;
&:nth-child(1) {
top: 0;
transition: all 0.2s;
}
&:nth-child(2) {
top: 8px;
transition: all 0.15s;
}
&:nth-child(3) {
top: 8px;
transition: all 0.15s;
}
&:nth-child(4) {
top: 16px;
transition: all 0.2s;
}
}
}
nav.opened .hamburger span {
&:nth-child(1) {
top: 8px;
width: 0;
opacity: 0;
right: 50%;
transition: all 0.2s;
}
&:nth-child(2) {
transform: rotate(45deg);
transition: all 0.25s;
}
&:nth-child(3) {
transform: rotate(-45deg);
transition: all 0.25s;
}
&:nth-child(4) {
top: 8px;
width: 0;
opacity: 0;
right: 50%;
transition: all 0.2s;
}
}
.navbar-dropdown {
padding: 0 1rem;
}
a.nav-link {
display: flex;
align-items: center;
justify-content: center;
}
.icons-menu {
flex-wrap: nowrap;
display: flex;
justify-content: center;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.3rem;
text-align: center;
@media (max-width: 992px) {
justify-content: flex-start;
margin-bottom: .5rem;
}
}
@media screen and (~'-ms-high-contrast: active'), (~'-ms-high-contrast: none') {
.navbar {
height: 70px;
&.opened {
height: auto;
}
}
.nav-item .nav-link:hover::before {
width: 175%;
max-width: calc(100% ~"+" 2rem);
left: -1rem;
}
}
.navbar .dropdown > .dropdown-menu {
display: none;
width: max-content;
max-width: 500px !important;
transform: translateX(-50%);
top: calc(~'100% + 20px');
left: 50%;
.dropdown-item {
line-height: 1 !important;
}
.dropdown {
.dropdown-item {
align-items: center;
display: flex;
height: max-content !important;
min-height: max-content !important;
&::after {
display: inline-block;
position: static;
margin-left: 0.5rem;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
transition: .3s all;
transform: rotate(-90deg);
}
}
}
.dropdown.open {
.dropdown-item {
&::after {
transform: rotate(0deg);
}
}
}
}
.mbr-section-btn {
margin: -0.6rem -0.6rem;
}
.navbar-toggler {
margin-left: 12px;
margin-right: 8px;
order: 1000;
}
& when (@collapsed) {
.navbar-brand {
margin-right: auto;
}
.navbar-collapse {
z-index: -1 !important;
position: absolute;
top: 110%;
left: 0;
width: 100%;
padding: 1rem;
border-radius: 1.5rem;
background: @menuBgColor;
& when (@transparent) {
border-color: rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important;
opacity: 1;
background: rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important;
}
backdrop-filter: blur(8px);
@media (max-width: 575px) {
padding: 1rem;
}
& when not (@isRoundedButtons) {
border-radius: 4px !important;
}
}
.navbar-nav {
.nav-item {
.nav-link {
&::after {
margin-left: 10px;
}
}
}
.dropdown-item {
&:hover {
background-color: rgba(27, 31, 10, 0.06);
}
}
}
.navbar .dropdown > .dropdown-menu {
display: none;
max-width: 100% !important;
transform: translateX(0);
top: 10px;
left: 0;
padding: 8px !important;
border-radius: 0.5rem;
background-color: rgba(27, 31, 10, 0.04) !important;
.dropdown-item {
padding: 8px !important;
line-height: 1 !important;
margin-bottom: 4px !important;
}
.dropdown {
.dropdown-item {
align-items: center;
display: flex;
height: max-content !important;
min-height: max-content !important;
&::after {
display: inline-block;
position: static;
margin-left: 0.5rem;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
transition: .3s all;
transform: rotate(0deg);
}
}
}
.dropdown.open {
.dropdown-item {
&::after {
transform: rotate(180deg);
}
}
}
.dropdown-submenu {
position: static;
width: 100%;
max-width: 100% !important;
transform: translateX(0) !important;
top: 0;
left: 0;
padding: 8px !important;
border-radius: 0.5rem;
background-color: rgba(27, 31, 10, 0.04) !important;
}
}
.navbar .dropdown.open > .dropdown-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.navbar .dropdown > .dropdown-submenu.show {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 991px) {
.navbar-brand {
margin-right: auto;
}
.navbar-collapse {
z-index: -1 !important;
position: absolute;
top: 110%;
left: 0;
width: 100%;
padding: 1rem;
border-radius: 1.5rem;
background: @menuBgColor;
& when (@transparent) {
opacity: 1;
border-color: rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important;
background: rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important;
}
backdrop-filter: blur(8px);
& when not (@isRoundedButtons) {
border-radius: 4px !important;
}
}
.navbar-nav {
.nav-item {
.nav-link {
&::after {
margin-left: 10px;
}
}
}
.dropdown-item {
&:hover {
background-color: rgba(27, 31, 10, 0.06);
}
}
}
.navbar .dropdown > .dropdown-menu {
max-width: 100% !important;
transform: translateX(0);
top: 10px;
left: 0;
padding: 8px !important;
border-radius: 1rem;
background-color: rgba(27, 31, 10, 0.04) !important;
.dropdown-item {
padding: 8px !important;
line-height: 1 !important;
margin-bottom: 4px !important;
}
.dropdown {
.dropdown-item {
align-items: center;
display: flex;
height: max-content !important;
min-height: max-content !important;
&::after {
display: inline-block;
position: static;
margin-left: 0.5rem;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
transition: .3s all;
transform: rotate(0deg);
}
}
}
.dropdown.open {
.dropdown-item {
&::after {
transform: rotate(180deg);
}
}
}
.dropdown-submenu {
position: static;
width: 100%;
max-width: 100% !important;
transform: translateX(0) !important;
top: 0;
left: 0;
padding: 8px !important;
border-radius: 1rem;
background-color: rgba(27, 31, 10, 0.04) !important;
}
}
.navbar .dropdown.open > .dropdown-menu {
display: flex !important;
flex-direction: column;
align-items: flex-start;
}
}
.navbar-collapse {
@media (max-width: 575px) {
padding: 1rem;
}
}
Code: Alles auswählen
<section class="menu1 mega-menu-block" data-bs-version="5.1" group="Menu" once="menu">
<mbr-parameters>
<header>Farben & Design</header>
<input type="color" title="Hintergrund" name="bgColor" value="#ffffff">
<input type="color" title="Text Farbe" name="textColor" value="#000000">
<input type="color" title="Akzent Farbe (Hover)" name="accentColor" value="#ef7f1a">
<input type="range" inline title="Schriftgröße" name="fontSize" min="14" max="30" step="1" value="23">
<input type="range" inline title="Bild-Rundung" name="imgRadius" min="0" max="30" step="1" value="9">
<header>Optionen</header>
<input type="checkbox" title="Schatten" name="showShadow" checked>
<input type="checkbox" title="Sticky (Oben fest)" name="isSticky" checked>
</mbr-parameters>
<nav class="mm-wrapper" mbr-class="{'mm-sticky': isSticky}" mbr-style="{'background-color': bgColor}">
<div class="mm-container">
<div class="mm-hamburger" id="mmHamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul class="mm-nav" id="mmNav">
<li><a href="index.html" mbr-style="{'color': textColor, 'font-size': fontSize + 'px'}">Startseite</a></li>
<li class="mm-has-mega">
<a href="#" mbr-style="{'color': textColor, 'font-size': fontSize + 'px'}">Unser Verein</a>
<div class="mm-mega" mbr-class="{'mm-shadow': showShadow}">
<div class="mm-mega-item">
<a href="Wir-ueber-uns.html" class="mm-main-link">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/wirueberuns_7.png" mbr-style="{'border-radius': imgRadius + 'px'}">
<div class="mm-mega-title" mbr-style="{'color': textColor}">Wir über uns</div>
</a>
</div>
<div class="mm-mega-item">
<a href="Trainer.html" class="mm-main-link">
<img src="https://www.shotokan-karate-dojo-neukirchen.de/assets/images/Trainerteam.png" mbr-style="{'border-radius': imgRadius + 'px'}">
<div class="mm-mega-title" mbr-style="{'color': textColor}">Unsere Trainer</div>
</a>
</div>
</div>
</li>
<li><a href="Impressum-Datenschutz.html" mbr-style="{'color': textColor, 'font-size': fontSize + 'px'}">Impressum</a></li>
</ul>
</div>
</nav>
<!-- JavaScript -->
<script>
(function() {
function runMenu() {
/* Fix 2: IDs können bei mehreren Blöcken kollidieren –
Suche relativ zur eigenen Section */
var section = document.currentScript
? document.currentScript.closest('section')
: document.querySelector('.mega-menu-block');
/* Fallback: letzten Block nehmen falls currentScript fehlt */
if (!section) return;
var burger = section.querySelector('.mm-hamburger');
var nav = section.querySelector('.mm-nav');
if (!burger || !nav) return;
/* Alten Listener entfernen – verhindert Doppel-Registrierung */
var newBurger = burger.cloneNode(true);
burger.parentNode.replaceChild(newBurger, burger);
burger = newBurger;
burger.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
burger.classList.toggle('mm-active');
nav.classList.toggle('mm-active');
});
/* Mega-Dropdown auf Mobil */
section.querySelectorAll('.mm-has-mega > a').forEach(function(link) {
var newLink = link.cloneNode(true);
link.parentNode.replaceChild(newLink, link);
newLink.addEventListener('click', function(e) {
if (window.innerWidth <= 992) {
e.preventDefault();
e.stopPropagation();
newLink.parentElement.classList.toggle('mm-open');
}
});
});
/* Klick außerhalb schließt Menü */
document.addEventListener('click', function(e) {
if (!section.contains(e.target)) {
nav.classList.remove('mm-active');
burger.classList.remove('mm-active');
section.querySelectorAll('.mm-has-mega').forEach(function(li) {
li.classList.remove('mm-open');
});
}
});
}
/* Mehrfache Absicherung */
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', runMenu);
} else {
runMenu();
}
setTimeout(runMenu, 500);
if (window.MBR && window.MBR.on) { window.MBR.on('section:update', runMenu); }
})();
</script>
</section>Code: Alles auswählen
position: relative;
.is-builder & {
padding-top: 60px !important;
}
.mm-wrapper {
width: 100%;
z-index: 100;
font-family: sans-serif;
}
.mm-sticky {
position: sticky;
top: 0;
z-index: 100;
}
.mm-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
min-height: 70px;
position: relative;
}
.mm-hamburger {
display: none;
width: 30px;
height: 22px;
cursor: pointer;
position: absolute;
right: 20px;
z-index: 10001;
}
.mm-hamburger span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: @textColor;
border-radius: 3px;
transition: 0.3s;
}
.mm-hamburger span:nth-child(1) {
top: 0;
}
.mm-hamburger span:nth-child(2) {
top: 9px;
}
.mm-hamburger span:nth-child(3) {
top: 18px;
}
.mm-hamburger.mm-active span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.mm-hamburger.mm-active span:nth-child(2) {
opacity: 0;
}
.mm-hamburger.mm-active span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
.mm-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.mm-nav > li {
margin: 0 15px;
}
.mm-nav > li > a {
text-decoration: none;
padding: 20px 0;
font-weight: 600;
display: block;
}
.mm-nav > li > a:hover {
color: @accentColor !important;
}
.mm-mega-item {
flex: 1;
padding: 10px;
text-align: center;
}
.mm-mega-item img {
width: 100%;
}
.mm-mega-title {
margin-top: 8px;
font-weight: 600;
font-size: 0.95rem;
}
.mm-main-link {
text-decoration: none;
}
.mm-main-link:hover .mm-mega-title {
color: @accentColor !important;
}
@media (max-width: 992px) {
.mm-hamburger {
display: block;
}
.mm-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: @bgColor;
flex-direction: column;
padding-bottom: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
z-index: 9998;
}
.mm-nav.mm-active {
display: flex !important;
}
.mm-nav > li {
width: 100%;
text-align: center;
margin: 0;
}
.mm-nav > li > a {
padding: 14px 20px;
}
.mm-mega {
display: none;
background: rgba(0, 0, 0, 0.04);
padding: 10px;
}
.mm-has-mega.mm-open > .mm-mega {
display: block;
}
.mm-mega-item {
display: inline-block;
width: 45%;
vertical-align: top;
}
}
@media (min-width: 993px) {
.mm-mega {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 600px;
background: #fff;
display: flex;
padding: 20px;
border-radius: 10px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
z-index: 9997;
}
.mm-has-mega:hover > .mm-mega {
opacity: 1;
visibility: visible;
}
.mm-shadow {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
}
Danke nochmal!! Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste