Gelöst Mit CSS! Dropdown-Menüs

0
36

Dieser Beitrag ist der zweite in einer Serie über die macht von CSS.

Artikel-Serie:

  1. Einfärben der SVG-Hintergründe
  2. Dropdown-Menüs (in diesem post)

CSS wird heute immer leistungsfähiger, und mit features wie CSS-raster und benutzerdefinierte Eigenschaften (auch bekannt als CSS-Variablen), sehen wir einige wirklich kreative Lösungen entstehen. Einige dieser Lösungen konzentrieren um nicht nur die web-schöner, sondern machen es leichter zugänglich und machen styling zugänglich Erfahrungen besser. Ich bin auf jeden Fall dabei!

Eine gemeinsame Benutzeroberfläche Muster, die wir im web sehen, werden dropdown-Menüs. Sie sind verwendet, um dazugehörige Informationen anzuzeigen, die in Stücke, ohne überwältigende den Benutzer mit Schaltflächen, text und die Optionen. Irgendwo, wir sehen diese viel in den Header oder die navigation Bereiche auf Webseiten.

Eine Google-Suche nach “- dropdown-Menü” liefert viele Beispiele

Lassen Sie uns sehen, ob wir eines dieser Menüs mit CSS allein. Wir erstellen eine Liste mit links in ein nav-Komponente wie folgt:

<nav role=”navigation”>
<ul>
<li><a href=”#”>Eins</a></li>
<li><a href=”#”>Zwei</a></li>
<li><a href=”#”>Drei</a></li>
</ul>
</nav>

Nun, sagen wir, wir wollen ein sub-Menü dropdown auf den zweiten Navigationspunkt. Wir können das gleiche tun, es und enthalten eine Liste von links innerhalb dieser Liste posten:

<nav role=”navigation”>
<ul>
<li><a href=”#”>Eins</a></li>
<li><a href=”#”>Zwei</a>
<ul class=”dropdown”>
<li><a href=”#”>Untermenü 1</a></li>
<li><a href=”#”>Untermenü 2</a></li>
<li><a href=”#”>Untermenü 3</a></li>
</ul>
</li>
<li><a href=”#”>Drei</a></li>
</ul>
</nav>

Wir haben jetzt unsere zwei-Ebenen-navigation-system. Um den content ausgeblendet und eingeblendet, wenn wir es wollen sichtbar sein, wir müssen etwas CSS. Alle style-Eigenschaften wurden entfernt aus dem folgenden Beispiel für die Klarheit, die der Interaktion:

li {
display: block;
transition-duration: 0.5 s;
}

li:hover {
cursor: pointer;
}

ul li ul {
visibility: hidden;
Deckkraft: 0;
position: absolute;
übergang: alle 0,5 s Leichtigkeit;
margin-top: 1rem;
left: 0;
}

ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
}

ul li ul li {
clear: both;
width: 100%;
}

Finden Sie den Stift Einfach CSS Dropdown-Menü mit Hover-per Una Kravets (@una) auf CodePen.

Nun, die dropdown-Untermenü versteckt ist, aber ausgesetzt und werden sichtbar, wenn wir den Mauszeiger über Ihre Korrelation von Eltern in der Navigationsleiste. Durch styling ul li ul,, wir haben Zugriff auf dieses Untermenü, und durch styling ul li ul li”, haben wir Zugriff auf die einzelnen Listenelemente.

Das Problem

Dies ist beginnend zu schauen, wie das, was wir wollen, aber wir sind noch lange nicht fertig an diesem Punkt. Barrierefreiheit ist ein zentraler Teil Ihrer Produkt-Entwicklung, und gerade jetzt wäre die perfekte Gelegenheit, um das anzusprechen. Hinzufügen role=”navigation” ist ein guter Anfang, aber in Ordnung für eine Navigationsleiste zugänglich zu sein, sollte man in der Lage sein, auf die Registerkarte mit ihm (und den Fokus auf die richtige Position in einer sinnvollen Reihenfolge), und habe auch ein screen-reader genau zu Lesen laut, was gerade im Fokus ist.

Sie können bewegen Sie den Mauszeiger über einen beliebigen Listeneintrag, und klar sehen, was ist, als schwebte über, aber das ist nicht wahr für tab-navigation. Gehen Sie voran und versuchen Sie auf die Registerkarte mit dem obigen Beispiel. Sie verlieren den überblick, wo der Fokus ist optisch, Wie Sie tab, um Zwei im Hauptmenü, werden Sie sehen, ein Fokus-ring, aber wenn Sie mit der Tabulatortaste zum nächsten Element (eine seiner Untermenüpunkte), Fokus verschwindet.

Nun, es ist wichtig zu beachten, dass theoretisch Sie konzentrieren sich auf das andere Element ist, und dass ein screen-reader würde in der Lage sein, zu analysieren, Lesen, Sub-One, aber Tastatur-Benutzer werden nicht in der Lage, um zu sehen, was Los ist und wird den überblick verlieren.

Der Grund, warum dies passiert ist, weil, während wir das styling der hover für das Elternelement, sobald wir den übergang des Fokus von den Eltern auf eines der Listenelemente innerhalb dieser übergeordneten, verlieren wir, styling. Dies macht Sinn aus CSS-Sicht, aber es ist nicht das, was wir wollen.

Zum Glück, es gibt eine neue CSS-pseudo-Klasse, die geben uns genau das, was wir wollen, in diesem Fall, und es heißt :der Fokus-Rahmen.

Die Lösung: `:focus-in`

Die :focus-in pseudo-Selektor ist ein Teil der CSS-Selektoren Stufe 4 Skillung und teilt dem browser mit, so wenden Sie einen Stil auf einen Elternteil, wenn eines Ihrer Kinder im Fokus stehen. Also in unserem Fall bedeutet das, wir können mit der Tabulatortaste zum Sub-One und anwenden :konzentrieren Sie sich-in Stil zusammen mit der :hover-Stil der Eltern und sehen, wo genau wir sind in der dropdown-navigation. In unserem Fall wäre ul li:focus-in > ul:

ul li:hover > ul,
ul li:focus-in > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
}

Finden Sie den Stift Einfach CSS Dropdown-Menü mit Hover-und :focus-innerhalb von Una Kravets (@una) auf CodePen.

Süß! Es funktioniert!

Nun, wenn wir-Registerkarte, um das zweite Element, ist unser Untermenü öffnet, und wie wir Reiter durch die Untermenüs, die Sichtbarkeit bleibt! Nun, wir können anfügen, unseren code zu enthalten :focus Staaten neben :hover zu geben, können keyboard-Benutzer die gleiche Erfahrung wie unsere Maus Benutzer.

In den meisten Fällen, wie der direkten Verbindung, wir können meist nur etwas schreiben wie:

a:hover,
a:focus {

}

Aber in diesem Fall, da wir die Anwendung hover-Stile auf der Grundlage der übergeordneten li, können wir wieder nutzen :focus-in, um den gleichen look zu fühlen, wenn die Navigation mit der Tabulatortaste durch. Denn wir können uns nicht wirklich konzentrieren sich auf die li (es sei denn, wir fügen Sie ein tabindex=”0″). Sind wir eigentlich die Fokussierung auf den link (a) innerhalb der it. :focus-in ermöglicht es uns, noch wenden Sie Formatvorlagen auf den parent-li, wenn man auf den link (verdammt cool!):

li:hover,
li:focus-innerhalb {

}

An diesem Punkt, da sind wir der Anwendung eine Fokus-style, können wir etwas tun, das in der Regel nicht empfohlen (entfernen Sie das styling, die blauen Umriss-Fokus-ring). Wir können dies tun, indem Sie:

li:focus-in einem {
outline: none;
}

Der obige code gibt an, dass, wenn wir den Fokus innerhalb der Listenelemente über den link (a), nicht anwenden, eine Gliederung, um das link-Element (a). Es ist ziemlich sicher, das so geschrieben, weil wir ausschließlich das styling der hover-Zustand, und mit Browsern, die nicht unterstützt :der Fokus-Rahmen, der link wird immer noch einen Fokus-ring. Nun unser Menü sieht wie folgt aus:

Endgültige Menü mit :focus-in, :hover Staaten und anpassen der Fokus-ring zu verschwinden

Finden Sie den Stift Einfach CSS Dropdown-Menü mit Hover-und :focus-innerhalb und Konzentrieren sich Staaten, die von Una Kravets (@una) auf CodePen.

Was ist die ARIA?

Wenn Sie vertraut mit der Barrierefreiheit, die Sie vielleicht haben gehört der ARIA-labels und Staaten. Sie können diese zu Ihrem Vorteil, damit auch diese Arten von dropdowns mit eingebauter Zugänglichkeit zur gleichen Zeit! Finden Sie ein ausgezeichnetes Beispiel hier von Heydon Pickering. Wenn ARIA-markup-code Aussehen würde, ein wenig mehr wie dieser:

<nav role=”navigation”>
<ul>
<li><a href=”#”>Eins</a></li>
<li><a href=”#” aria-haspopup=”true”>Zwei</a>
<ul class=”dropdown” aria-label=”submenu”>
<li><a href=”#”>Untermenü 1</a></li>
<li><a href=”#”>Untermenü 2</a></li>
<li><a href=”#”>Untermenü 3</a></li>
</ul>
</li>
<li><a href=”#”>Drei</a></li>
</ul>
</nav>

Sie sind das hinzufügen von aria-haspopup=”true”, um die übergeordnete dropdown-Menü, um eine alternative angeben, Staat, einschließlich aria-label=”submenu” auf den eigentlichen dropdown-Menü selbst (in diesem Fall unsere Liste mit class=”dropdown”.

Diese Eigenschaften selbst wird Ihnen die Funktionalität, die Sie benötigen, um zu zeigen, das dropdown-Menü, aber der Nachteil ist, dass Sie funktionieren nur mit aktiviertem JavaScript.

Browser-Unterstützung VORBEHALT

Apropos Vorbehalte, reden wir über den browser-support. Während :focus-in hat ziemlich gute browser-Unterstützung, ist es wichtig zu beachten, dass Internet Explorer und Edge werden nicht unterstützt, damit die Benutzer auf diesen Plattformen werden nicht in der Lage zu sehen, die navigation.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
60 47 52 Keine Keine 10.1

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
10.3 Keine Keine Keine 64 57

Die ultimative Lösung wäre hier die Verwendung sowohl ARIA-markup und CSS :focus-in, um sicherzustellen, eine solide dropdown-Erfahrung für Ihre Benutzer.

Finden Sie den Stift Einfach CSS Dropdown-Menü mit Hover-und :focus-innerhalb und Konzentrieren sich Staaten und ARIE von Una Kravets (@una) auf CodePen.

Wenn Sie wollen in der Lage sein, um diese Funktion zu verwenden in der Zukunft, bitte upvote Sie auf Edge-User-Voice! Und upvote :Fokus-ring, während Sie an ihm, so dass wir in der Lage, um Stil, Fokus-ring und eine schöne interaktive web-Erfahrung für alle 😀

Mehr `:focus-in ” und A11Y

  • Scott O ‘ Hara schrieb über :focus-in, Hervorhebung demos wie hervorgehoben <table> Zeilen und dropdown-Menüs
  • Kushagra Gour, auf die Schaffung eines Fokus-gefangen modal
  • Eric Bailey Fokus auf Stile, die im Allgemeinen
  • Chris auf die Führung eines Eltern-element sichtbar, wenn ein Kind konzentriert
  • Alle Artikel auf CSS-Tricks rund um :focus-in