Einzeiliges Submenu
Hier stelle ich ein Script vor, das ein einzeiliges Submenu erzeugt.
(Auch für Wordpress geeignet)
Hier auf: CodePen: codepen.io/Oliver7777/pen/xbKjddY
CSS:
/* Styling des Submenus */
.line #primary-menu ul ul {
background:#333 !important;
}
.line #primary-menu ul ul li a {
color:#ccc !important;
}
.line #primary-menu ul ul li {
padding:20px 30px !important;
border-left:1px solid #666;
}
.line #primary-menu ul ul li:last-child {
border-right:1px solid #666;
}
Das jQuery:
(function ($) {
const liSelect = "#primary-menu ul > li" // die Listenelemente;
const mobileBreak = 640 //Mobilumschaltpunkt;
var isPlaceAvailable = true;
var isMobile = false;
function checkForPlace() {
if ($(window).width() < mobileBreak) {
isMobile = true;
return false;
} else {
isMobile = false;
}
$(liSelect + " ul").show();
$("body").addClass("line");
isPlaceAvailable = true;
$(liSelect).each(function () {
subWidth = 0;
checkFalse = false;
$(this).find("li").each(function () {
subWidth += $(this).outerWidth();
if (subWidth > $(window).outerWidth()) {
$(liSelect + " ul li").css("width", "");
checkFalse = true;
isPlaceAvailable = false;
return false;
} else {
$(liSelect + " ul li").css("width", "max-content");
$(liSelect + " ul li a").css("width", "max-content");
}
});
if (checkFalse) {
return false;
}
});
$(liSelect + " ul").hide();
$("body").removeClass("line");
}
function setUlWidth() {
$(liSelect + " ul").css("width", "");
$(liSelect + " ul").css("margin-left", "");
if (isPlaceAvailable && !isMobile) {
$(liSelect).each(function () {
$(this).find(">ul").css("width", $("body").prop("clientWidth"));
var left = $(this).offset().left + parseInt($(this).css("padding-left"));
$(this).find(">ul").css("margin-left", -left);
})
}
}
document.fonts.ready.then(function () {
checkForPlace();
setUlWidth();
});
$(liSelect).hover(
function () {
if (isPlaceAvailable && !isMobile) {
$("body").addClass("line");
if ($(this).find(">ul").length > 0) {
$(this).find(">ul").css("display", "flex");
newPos = $(this).find(">ul").outerWidth() / 2;
currentLeft = $(this).offset().left;
currentWidth = $(this).outerWidth() / 2;
var getWidth = 0;
$(this).find(">ul>li").each(function () {
getWidth += $(this).outerWidth();
})
newPos = currentLeft - getWidth / 2 + currentWidth;
if (getWidth + newPos > $(window).width()) {
newPos = $(window).width() - getWidth;
$(this).find(">ul").css("width", $(window).width());
}
if (newPos < 0) {
newPos = 0;
}
$(this).find(">ul li").eq(0).css("margin-left", newPos);
}
} else {
$(this).find(">ul li").eq(0).css("margin-left", "");
$(this).find(">ul").css("width", "");
$(this).find(">ul").css("display", "block");
$("body").removeClass("line");
}
}, function () {
if (isPlaceAvailable && !isMobile) {
$(this).find(">ul").css("display", "none")
$(this).find(">ul").css("left", "")
$(this).find(">ul li").eq(0).css("margin-left", "")
} else {
$(this).find(">ul").css("display", "none");
}
}
);
$(window).resize(function () {
checkForPlace();
setUlWidth();
});
})(jQuery);
Das Javascript:
const liSelect = "#primary-menu ul > li" // die Listenelemente;
const mobileBreak = 640 //Mobilumschaltpunkt;
var isPlaceAvailable = true;
var isMobile = false;
function checkForPlace() {
if (window.innerWidth < mobileBreak) {
isMobile = true;
return false;
} else {
isMobile = false;
}
for (let el of document.querySelectorAll(liSelect + " ul")) {
el.style.display = "block";
}
document.querySelector("body").classList.add("line");
isPlaceAvailable = true;
for (let el of document.querySelectorAll(liSelect)) {
subWidth = 0;
checkFalse = false;
for (let _el of el.querySelectorAll("li")) {
let style = window.getComputedStyle(_el);
let borderLeft = style.getPropertyValue('border-left-width');
let borderRight = style.getPropertyValue('border-right-width');
subWidth += _el.clientWidth + parseInt(borderLeft) + parseInt(borderRight)
if (subWidth > window.innerWidth) {
for (let __el of document.querySelectorAll(liSelect + " ul li")) {
__el.style.width = "";
}
checkFalse = true;
isPlaceAvailable = false;
break;
} else {
for (let __el of document.querySelectorAll(liSelect + " ul li")) {
__el.style.width = "max-content";
}
for (let ___el of document.querySelectorAll(liSelect + " ul li a")) {
___el.style.width = "max-content";
}
}
}
if (checkFalse) {
break;
}
}
for (let el of document.querySelectorAll(liSelect + " ul")) {
el.style.display = "none";
}
document.querySelector("body").classList.remove("line");
}
function setUlWidth() {
for (let el of document.querySelectorAll(liSelect + " >ul")) {
el.style.width = "";
el.style.marginLeft = "";
}
if (isPlaceAvailable && !isMobile) {
for (let el of document.querySelectorAll(liSelect)) {
let style = window.getComputedStyle(el);
let paddingLeft = style.getPropertyValue('padding-left');
if (el.querySelector("ul") != undefined) {
el.querySelector("ul").style.width = document.documentElement.clientWidth + "px";
const left = parseInt(paddingLeft) + el.getBoundingClientRect().left;
el.querySelector("ul").style.marginLeft = -left + "px";
}
}
}
}
document.fonts.ready.then(function () {
checkForPlace();
setUlWidth();
});
for (let el of document.querySelectorAll(liSelect)) {
el.addEventListener("mouseover", function () {
const ulSelect = this.querySelector("ul");
if (isPlaceAvailable && !isMobile) {
document.querySelector("body").classList.add("line");
if (ulSelect != undefined) {
ulSelect.style.display = "flex";
newPos = ulSelect.clientWidth / 2;
currentLeft = this.getBoundingClientRect().left;
currentWidth = this.clientWidth / 2;
var getWidth = 0;
for (let _el of this.querySelectorAll("ul li")) {
let style = window.getComputedStyle(_el);
let borderLeft = style.getPropertyValue('border-left-width');
let borderRight = style.getPropertyValue('border-right-width');
console.log(borderLeft)
getWidth += _el.clientWidth + parseInt(borderLeft) + parseInt(borderRight);
}
newPos = currentLeft - getWidth / 2 + currentWidth;
if (getWidth + newPos > window.innerWidth) {
let style = window.getComputedStyle(el);
//let paddingLeft = style.getPropertyValue('padding-left');
newPos = document.body.scrollWidth - getWidth //- parseInt(paddingLeft);
ulSelect.style.width = document.documentElement.clientWidth + "px"
}
if (newPos < 0) {
newPos = 0;
}
this.querySelectorAll("ul li")[0].style.marginLeft = newPos + "px";
}
} else {
this.querySelectorAll("ul li")[0].style.marginLeft = "";
ulSelect.style.width = "";
ulSelect.style.display = "block";
document.querySelector("body").classList.remove("line");
}
});
el.addEventListener("mouseout", function () {
const ulSelect = this.querySelector("ul");
if (ulSelect != undefined) {
ulSelect.style.display = "none";
ulSelect.style.left = "";
this.querySelectorAll("ul li")[0].style.marginLeft = "";
} else {
if (ulSelect != undefined) {
ulSelect.style.display = "none";
}
}
});
}
window.addEventListener('resize', function () {
checkForPlace();
setUlWidth();
});