Mega Menu
Hier stelle ich ein Script vor, das mithilfe von CSS und jQuery oder Javascript ein mehrspaltiges Megamenü erzeugt.
(Auch für Wordpress geeignet)
Hier auf CodePen jQuery: codepen.io/Oliver7777/pen/xbKjddY
Hier auf CodePen Javascript: https://codepen.io/Oliver7777/pen/xbKzZYV
zum jQuery zum JavascriptCSS:
.mega-grid{
justify-content: space-between;
justify-items: stretch;
align-items: stretch;
align-content: center;
border-top:1px solid #ccc !important;
}
.mega-grid li {
background:#fff !important;
outline:1px solid #ccc !important;
border-bottom:none;
}
jQuery:
(function ($) {
const mainNavigation = "#primary-menu > ul"; // der Ul Selector
const megaMenu = [1, 3]; // die Menüposition der Megamenüs (gezählt)
const columns = [3, 4]; // Anzahl der Spalten pro Megamenü
const megaMenuMaxWidth = 1200; // maximale Breite des Megamenüs
const megaMenuMargin = 20; // Außenabstand
const breakPoint = 700; // Umschaltpunkt des Megamenüs
var single = 0;
var fireOnce = true;
function addMegamenuClass() {
let countUls = 0;
$(mainNavigation + " > li > ul").each(function () {
if (~megaMenu.indexOf($(this).parent("li").index() + 1)) {
$(this).addClass("mega-grid");
$(this).css("grid-template-columns", "repeat(" + columns[countUls] + ", 1fr)");
countUls++;
}
})
}
addMegamenuClass();
$(".mega-grid").css("width", megaMenuMaxWidth);
function setSubmenu(el) {
const ulSelect = $(mainNavigation + " >li").eq(megaMenu[el] - 1).find("> ul");
if (single <= megaMenu.length) {
single++;
subLength = ulSelect.find(">li").length;
var leftOver = (Math.floor(subLength / columns[el]) + 1) * columns[el] - subLength;
if (leftOver == columns[el]) {
leftOver = 0;
}
for (z = 0; z < leftOver; z++) {
ulSelect.append('<li class="empty"></li>');
}
}
if ($(window).width() > breakPoint) {
if ($(window).width() < megaMenuMaxWidth + 2 * megaMenuMargin) {
ulSelect.css("width", $(window).width() - 2 * megaMenuMargin);
} else {
ulSelect.css("width", megaMenuMaxWidth);
}
ulSelect.css("margin-left", "");
$(".empty").show();
var left = $(mainNavigation + " >li").eq(megaMenu[el] - 1).offset().left + parseInt($(mainNavigation + " >li").eq(megaMenu[el] - 1).css("padding-left"));
var offset = ($(window).width() - ulSelect.width()) / 2;
ulSelect.css("margin-left", -1 * left + offset);
if (fireOnce) {
fireOnce = false;
addMegamenuClass();
}
} else {
fireOnce = true;
ulSelect.css("margin-left", "");
$(".empty").hide();
ulSelect.css("width", "");s
ulSelect.css("grid-template-columns","");
$(".mega-grid").removeClass("mega-grid");
}
}
document.fonts.ready.then(function () {
for (i = 0; i < megaMenu.length; i++) {
setSubmenu(i);
}
})
$(mainNavigation + " >li").hover(function () {
if (~megaMenu.indexOf($(this).index() + 1) && $(window).width() > breakPoint) {
$(this).find(">ul").css("display", "grid");
} else {
$(this).find(">ul").css("display", "block");
}
}, function () {
$(this).find(">ul").css("display", "none");
});
$(window).resize(function () {
for (i = 0; i < megaMenu.length; i++) {
setSubmenu(i);
}
});
})(jQuery);
nach oben
Javascript:
const mainNavigation = "#primary-menu > ul"; // der Ul Selector
const megaMenu = [1, 3]; // die Menüposition der Megamenüs (gezählt)
const columns = [3, 4]; // Anzahl der Spalten pro Megamenü
const megaMenuMaxWidth = 1200; // maximale Breite des Megamenüs
const megaMenuMargin = 20; // Außenabstand
const breakPoint = 700; // Umschaltpunkt des Megamenüs
var single = 0;
var fireOnce = true;
function addMegamenuClass() {
let countUls = 0;
for (let el of document.querySelectorAll(mainNavigation + " > li > ul")) {
let p = el.parentNode;
if (~megaMenu.indexOf([...p.parentNode.children].indexOf(p) + 1)) {
el.classList.add("mega-grid");
el.style.gridTemplateColumns = "repeat(" + columns[countUls] + ", 1fr)";
countUls++;
}
}
}
addMegamenuClass();
for (let el of document.querySelectorAll(".mega-grid")) {
el.style.width = megaMenuMaxWidth + "px";
}
function setSubmenu(el) {
const ulSelect = document.querySelectorAll(mainNavigation + " > li")[megaMenu[el] - 1].querySelector("ul");
if (single <= megaMenu.length) {
single++;
let subLength = ulSelect.childElementCount;
let leftOver = (Math.floor(subLength / columns[el]) + 1) * columns[el] - subLength;
if (leftOver == columns[el]) {
leftOver = 0;
}
for (z = 0; z < leftOver; z++) {
const li = document.createElement("li");
li.className = "empty";
ulSelect.appendChild(li);
}
}
if (window.innerWidth > breakPoint) {
if (window.innerWidth < megaMenuMaxWidth + 2 * megaMenuMargin) {
ulSelect.style.width = document.documentElement.clientWidth - 2 * megaMenuMargin + "px";
} else {
ulSelect.style.width = megaMenuMaxWidth + "px";
}
ulSelect.style.marginLeft = "";
for (let el of document.querySelectorAll(".empty")) {
el.style.display = "block";
}
let style = window.getComputedStyle(document.querySelectorAll(mainNavigation + " > li")[megaMenu[el] - 1]);
let paddingLeft = style.getPropertyValue('padding-left');
var left = document.querySelectorAll(mainNavigation + " > li")[megaMenu[el] - 1].getBoundingClientRect().left + parseInt(paddingLeft);
ulSelect.style.display = "grid";
var offset = (document.documentElement.clientWidth - ulSelect.clientWidth) / 2;
ulSelect.style.display = "none";
ulSelect.style.marginLeft = (-1 * left + offset) + "px";
if (fireOnce) {
fireOnce = false;
addMegamenuClass();
}
} else {
fireOnce = true;
ulSelect.style.marginLeft = "";
for (let el of document.querySelectorAll(".empty")) {
el.style.display = "none";
}
ulSelect.style.width = "";
ulSelect.style.gridTemplateColumns = "";
for (let el of document.querySelectorAll(".mega-grid")) {
el.classList.remove("mega-grid");
}
}
}
document.fonts.ready.then(function () {
for (i = 0; i < megaMenu.length; i++) {
setSubmenu(i);
}
});
for (let el of document.querySelectorAll(mainNavigation + " >li")) {
el.addEventListener("mouseover", function () {
if (~megaMenu.indexOf([...this.parentNode.children].indexOf(this) + 1) && window.innerWidth > breakPoint) {
this.querySelector("ul").style.display = "grid";
} else {
if (this.querySelector("ul") != undefined) {
this.querySelector("ul").style.display = "block";
}
}
});
el.addEventListener("mouseout", function () {
if (this.querySelector("ul") != undefined) {
this.querySelector("ul").style.display = "none";
}
});
}
window.addEventListener("resize", (event) => {
for (i = 0; i < megaMenu.length; i++) {
setSubmenu(i);
}
});
nach oben