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

Optimized menus for smartphone

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach
2025-01-14 17:08:59 +01:00
parent 1eb673454c
commit 573a3be360
4 changed files with 76 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
app/static/css/default.css
View File

@@ -78,66 +78,39 @@ h3.card-title {
h3.footer-title {
font-size: 1.3em;
}
/* Dropdown menu styles */
/* Dropdown-Menüs verstecken */
.dropdown-menu {
position: absolute !important;
}
.dropdown-menu-footer {
position: absolute !important;
top: auto !important;
bottom: 100%; /* Positions the menu above the trigger */
transform: translateY(-10px); /* Optional spacing for smoother appearance */
}
/* Dropdown submenu styles */
.dropdown-submenu {
position: relative;
list-style: none;
}
.dropdown-submenu > .dropdown-menu {
position: absolute;
top: 0;
left: 100%; /* Default position: open to the right */
margin-top: -1px;
z-index: 1050;
transition: opacity 0.3s ease-in-out; /* Smooth opacity transition */
}
/* Handle collapse behavior for dropdowns */
.dropdown-menu.collapse {
display: none;
}
.dropdown-menu.collapse.show {
display: block;
}
/* Ensure submenus are hidden by default */
.dropdown-submenu .dropdown-menu {
display: none;
opacity: 0;
transition: opacity 0.3s ease-in-out;
position: absolute;
left: 100%;
top: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Show submenu on hover */
/* Dropdown-Menü beim Hover anzeigen */
.nav-item.dropdown:hover > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
}
/* Ensure submenu remains visible when hovered over */
.dropdown-submenu:hover > .dropdown-menu:hover {
/* Dropdown-Menü bei der Klasse "open" anzeigen */
.nav-item.dropdown.open > .dropdown-menu,
.dropdown-submenu.open > .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
}
/* Handle dynamic submenu positioning */
.dropdown-submenu > .dropdown-menu[style*="right: 100%"] {
left: auto; /* Override left position for leftward opening */
/* Positionierung von Submenüs */
.dropdown-submenu > .dropdown-menu {
position: absolute;
top: 0;
left: 100%; /* Rechts ausklappen */
}
.dropdown-submenu.open > .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
}