mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2025-01-15 19:23:58 +01:00
Optimized menu bug
This commit is contained in:
parent
f017cacebe
commit
00e0096f8a
@ -16,8 +16,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
timeout = setTimeout(() => closeMenu(item), 500);
|
timeout = setTimeout(() => closeMenu(item), 500);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Offen lassen beim Klicken
|
// Öffnen und Position anpassen beim Klicken
|
||||||
item.addEventListener('click', (e) => {
|
item.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault(); // Verhindert die Standardaktion
|
||||||
e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
|
e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
|
||||||
if (item.classList.contains('open')) {
|
if (item.classList.contains('open')) {
|
||||||
closeMenu(item);
|
closeMenu(item);
|
||||||
@ -41,8 +42,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
timeout = setTimeout(() => closeMenu(item), 500);
|
timeout = setTimeout(() => closeMenu(item), 500);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Offen lassen beim Klicken
|
// Öffnen und Position anpassen beim Klicken
|
||||||
item.addEventListener('click', (e) => {
|
item.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault(); // Verhindert die Standardaktion
|
||||||
e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
|
e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
|
||||||
if (item.classList.contains('open')) {
|
if (item.classList.contains('open')) {
|
||||||
closeMenu(item);
|
closeMenu(item);
|
||||||
@ -97,29 +99,21 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
if (isTopLevel) {
|
if (isTopLevel) {
|
||||||
// Top-Level-Menüs öffnen nur nach oben oder unten
|
// Top-Level-Menüs öffnen nur nach oben oder unten
|
||||||
if (spaceBelow < rect.height && spaceAbove > rect.height) {
|
if (spaceBelow < rect.height && spaceAbove > rect.height) {
|
||||||
submenu.style.top = 'auto';
|
|
||||||
submenu.style.bottom = '100%';
|
submenu.style.bottom = '100%';
|
||||||
|
submenu.style.top = 'auto';
|
||||||
} else {
|
} else {
|
||||||
submenu.style.top = '100%';
|
submenu.style.top = `${parentRect.height}px`;
|
||||||
submenu.style.bottom = 'auto';
|
submenu.style.bottom = 'auto';
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// Submenüs öffnen in die Richtung mit mehr Platz
|
// Submenüs öffnen in die Richtung mit mehr Platz
|
||||||
if (spaceRight < rect.width && spaceLeft > rect.width) {
|
const prefersRight = spaceRight >= spaceLeft;
|
||||||
submenu.style.left = 'auto';
|
submenu.style.left = prefersRight ? '100%' : 'auto';
|
||||||
submenu.style.right = '100%';
|
submenu.style.right = prefersRight ? 'auto' : '100%';
|
||||||
} else {
|
|
||||||
submenu.style.left = '100%';
|
|
||||||
submenu.style.right = 'auto';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (spaceBelow < rect.height && spaceAbove > rect.height) {
|
const prefersBelow = spaceBelow >= spaceAbove;
|
||||||
submenu.style.top = 'auto';
|
submenu.style.top = prefersBelow ? '0' : 'auto';
|
||||||
submenu.style.bottom = '100%';
|
submenu.style.bottom = prefersBelow ? 'auto' : '100%';
|
||||||
} else {
|
|
||||||
submenu.style.top = '0';
|
|
||||||
submenu.style.bottom = 'auto';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user