Kategorie-Dropdown: Verbindungs-Pfeil (Caret) ergänzt, damit die Box unmissverständlich der Kategorie oben zugeordnet wirkt
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:
+21
-1
@@ -248,6 +248,7 @@ header.site-header {
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 230px;
|
||||
@@ -263,6 +264,24 @@ header.site-header {
|
||||
flex-direction: column;
|
||||
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; }
|
||||
/* Auf echten Maus-Geräten (nicht Touch) öffnet sich das Menü schon beim
|
||||
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-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-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-cta { align-self: flex-start; margin: 1rem 0 .6rem; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user