DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kategorie-Dropdown: Verbindungs-Pfeil (Caret) ergänzt, damit die Box unmissverständlich der Kategorie oben zugeordnet wirkt

Browse Source 
Die Zentrierung war rechnerisch schon exakt (Dropdown-Mitte = Button-
Mitte), aber weil die Box (5 Menüpunkte) breiter ist als ein einzelner
Kategorie-Knopf, ragt sie optisch in Nachbar-Kategorien hinein und wirkt
dadurch "nicht zugeordnet". Jetzt zeigt ein kleiner Pfeil mittig unter
dem Knopf eindeutig auf die zugehörige Kategorie (Standard-Dropdown-UX-
Pattern). Im mobilen Hamburger-Menü (<1480px, dort volle Breite/statisch
positioniert) wird der Pfeil ausgeblendet, da dort nicht sinnvoll.
This commit is contained in:
DogFatherGit
2026-08-03 03:10:53 +02:00
parent 20f9b516fe
commit ea8fe6c6ab
1 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+21 -1
View File
@@ -248,6 +248,7 @@ header.site-header {
.nav-dropdown { .nav-dropdown {
position: absolute; position: absolute;
top: 100%; top: 100%;
margin-top: 12px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
min-width: 230px; min-width: 230px;
@@ -263,6 +264,24 @@ header.site-header {
flex-direction: column; flex-direction: column;
animation: sprach-dropdown-in .18s ease both; animation: sprach-dropdown-in .18s ease both;
} }
/* Kleiner Verbindungs-Pfeil (Caret), mittig unter dem Kategorie-Knopf —
macht auch dann unmissverständlich klar, zu welcher Kategorie das
Menü gehört, wenn die Box (wegen mehr Einträgen) breiter ist als der
Knopf selbst und dadurch optisch in Nachbar-Kategorien hineinragt. */
.nav-dropdown::before {
content: "";
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: rgba(4, 5, 8, .96);
border-left: 1px solid rgba(255, 255, 255, .14);
border-top: 1px solid rgba(255, 255, 255, .14);
border-radius: 3px 0 0 0;
pointer-events: none;
}
.nav-group.open .nav-dropdown { display: flex; } .nav-group.open .nav-dropdown { display: flex; }
/* Auf echten Maus-Geräten (nicht Touch) öffnet sich das Menü schon beim /* Auf echten Maus-Geräten (nicht Touch) öffnet sich das Menü schon beim
Drüberfahren, ohne extra Klick — auf Touch/Tablet bleibt es bewusst Drüberfahren, ohne extra Klick — auf Touch/Tablet bleibt es bewusst
@@ -1097,7 +1116,8 @@ header.site-header {
.nav-links.open { transform: translateY(0); } .nav-links.open { transform: translateY(0); }
.nav-group > button { width: 100%; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--border); } .nav-group > button { width: 100%; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--border); }
.nav-flat { display: block; padding: .9rem 0; border-bottom: 1px solid var(--border); } .nav-flat { display: block; padding: .9rem 0; border-bottom: 1px solid var(--border); }
.nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; } .nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; margin-top: 0; }
.nav-dropdown::before { display: none; }
.nav-group.open .nav-dropdown { display: flex; } .nav-group.open .nav-dropdown { display: flex; }
.nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; } .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; }
} }