kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-09-09 19:27:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactored code and implemented that menüs open to the top

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach
2025-01-15 13:07:02 +01:00
parent 82c111973d
commit 69fabafd9a
3 changed files with 38 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/static/css/navigation.css
View File

@@ -1,15 +1,20 @@
/* Dropdown-Menüs verstecken */
.dropdown-menu {
display: none;
opacity: 0;
visibility: hidden;
width: max-content !important; /* Passt die Breite an das breiteste Item an */
box-sizing: border-box; /* Berücksichtigt Innenabstand und Rahmen */
/* Top-Level Dropdown-Menü */
.nav-item .dropdown-menu {
position: absolute; /* Wichtig für Positionierung */
top: 100%; /* Standardmäßige Öffnung nach unten */
left: 0;
z-index: 1050; /* Damit das Menü über anderen Elementen liegt */
}
/* Positionierung von Submenüs */
/* Submenu-Position */
.dropdown-submenu > .dropdown-menu {
position: absolute;
transition: opacity 0.3s ease, visibility 0.3s ease;
top: 0;
left: 100%; /* Öffnen nach rechts */
z-index: 1050;
}
/* Sicherstellen, dass der Übergang smooth ist */
.dropdown-menu {
transition: all 0.3s ease-in-out;
}

46
app/static/js/navigation.js
View File

@@ -70,45 +70,43 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
function adjustMenuPosition(submenu, parent, isTopLevel) {
function adjustMenuPosition(submenu, parent, isTopLevel) {
const rect = submenu.getBoundingClientRect();
const parentRect = parent.getBoundingClientRect();
// Platzberechnung
const spaceAbove = parentRect.top;
const spaceBelow = window.innerHeight - parentRect.bottom;
const spaceLeft = parentRect.left;
const spaceRight = window.innerWidth - parentRect.right;
// Standardpositionierung
submenu.style.top = '';
submenu.style.bottom = '';
submenu.style.left = '';
submenu.style.right = '';
if (isTopLevel) {
// Top-Level-Menüs öffnen nur nach oben oder unten
if (spaceBelow < rect.height && spaceAbove > rect.height) {
submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
submenu.style.top = 'auto';
} else {
submenu.style.top = `${parentRect.height}px`;
submenu.style.bottom = 'auto';
}
// Top-Level-Menü
if (spaceBelow < spaceAbove) {
submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
submenu.style.top = 'auto';
} else {
submenu.style.top = `${parentRect.height}px`;
submenu.style.bottom = 'auto';
}
} else {
// Submenüs öffnen in die Richtung mit mehr Platz
const prefersRight = spaceRight >= spaceLeft;
submenu.style.left = prefersRight ? '100%' : 'auto';
submenu.style.right = prefersRight ? 'auto' : '100%';
// Submenü
const prefersRight = spaceRight >= spaceLeft;
submenu.style.left = prefersRight ? '100%' : 'auto';
submenu.style.right = prefersRight ? 'auto' : '100%';
// Öffnen nach oben, wenn unten kein Platz ist
if (spaceBelow < rect.height && spaceAbove > rect.height) {
submenu.style.top = 'auto';
submenu.style.bottom = `${parentRect.bottom - parentRect.top - rect.height}px`; // Höhe des Submenüs wird berücksichtigt
} else {
submenu.style.top = '0';
submenu.style.bottom = 'auto';
}
// Nach oben öffnen, wenn unten kein Platz ist
if (spaceBelow < spaceAbove) {
submenu.style.bottom = `0`;
submenu.style.top = `auto`;
} else {
submenu.style.top = `0`;
submenu.style.bottom = '${parentRect.height}px';
}
}
}
}
});