Løst Med CSS! Dropdown Menyer

0
15

Dette innlegget er den andre i en serie om kraften i CSS.

Artikkel-Serien:

  1. Colorizing SVG-Bakgrunner
  2. Dropdown Menyer (dette innlegget)

CSS er å få stadig kraftigere, og med funksjoner som CSS rutenett og egendefinerte egenskaper (også kjent som CSS variabler), vi ser noen virkelig kreative løsninger dukker opp. Noen av de løsningene fokus rundt, ikke bare å gjøre nettet penere, men å gjøre det mer tilgjengelig, og gjør styling tilgjengelig opplevelser bedre. Jeg er definitivt her for det!

Et felles BRUKERGRENSESNITT-mønster som vi ser på nettet er dropdown menyer. De brukes til å vise relatert informasjon i stykker, uten overveldende brukeren med knapper, tekst og valg. Et sted som vi kan se disse mange er inne på topp-eller navigasjon på nettsider.

Et Google-søk for “dropdown menu” gir mange eksempler

La oss se om vi kan gjøre en av disse menyene med CSS alene. Vi vil lage en liste over koblinger innen en nav-komponent som så:

<nav rolle=”navigasjon”>
<ul>
<li><a href=”#”>En</a></li>
<li><a href=”#”>To</a></li>
<li><a href=”#”>Tre</a></li>
</ul>
</nav>

Nå si at vi vil ha en sub-menyen dropdown på den andre navigasjon element. Vi kan gjøre det samme der og inkluderer en liste over koblinger i listen element:

<nav rolle=”navigasjon”>
<ul>
<li><a href=”#”>En</a></li>
<li><a href=”#”>To</a>
<ul class=”dropdown”>
<li><a href=”#”>Sub-1</a></li>
<li><a href=”#”>Sub-2</a></li>
<li><a href=”#”>Sub-3</a></li>
</ul>
</li>
<li><a href=”#”>Tre</a></li>
</ul>
</nav>

Nå har vi våre to-trinns navigasjon system. For å ha skjult innhold og vises når vi ønsker det skal være synlig, vi trenger å bruke noen CSS. Alle stil egenskaper har blitt fjernet fra følgende eksempel for klarhet på interaksjon:

li {
display: block;
overgangen-varighet: 0.5 s;
}

li:hover {
cursor: pointer;
}

ul ul li {
visibility: hidden;
dekkevne: 0;
position: absolute;
overgang: alle 0.5 s letthet;
margin-top: 1rem;
venstre: 0;
}

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

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

Se Penn Enkel CSS-Dropdown-Meny med Hold av Una Kravets (@una) på CodePen.

Nå undermeny dropdown er skjult, men vil bli utsatt for og bli synlig når vi holder du markøren over å sammenholde sin forelder i navigasjonsfeltet. Ved styling ul ul li, vi har tilgang til denne undermenyen, og ved styling ul ul li li, har vi tilgang til den individuelle listen elementer i det.

Problemet

Dette begynner å likne på hva vi vil, men vi er fortsatt langt fra ferdig på dette punktet. Web-tilgjengelighet er en sentral del av produktets utvikling, og akkurat nå ville være en perfekt mulighet til å bringe dette opp. Legge til rolle=”navigation” er en god start, men for en navigasjonslinjen for å være tilgjengelig, bør man være i stand til å fanen gjennom det (og fokus på riktig element i en fornuftig rekkefølge), og har også en skjermleser nøyaktig lest høyt for hva som blir fokusert på.

Du kan holde musepekeren over en av listeelementene og tydelig se hva som svevde over, men dette er ikke sant for tab-navigering. Gå videre og prøve å fanen gjennom eksempelet ovenfor. Du mister oversikten over hvor fokus er visuelt Som du tab til To i hovedmenyen, vil du se en fokusindikator ringen, men når du tab til neste element (en av sine undermeny elementer), som fokuserer forsvinner.

Nå er det viktig å være oppmerksom på at teoretisk du er fokusert på dette annet element, og at en skjermleser ville være i stand til å analysere det, leser Sub-En, men tastaturet brukere vil ikke være i stand til å se hva som skjer og vil miste oversikten.

Grunnen til at dette skjer er fordi, mens vi styling hover av den overordnede element, så snart vi overgangen fokus fra foreldrene til en av listen elementer innenfor denne overordnede, mister vi at styling. Dette gir mening fra et CSS-standpunkt, men det er ikke det vi ønsker.

Heldigvis, det er en ny CSS pseudo klasse som vil gi oss akkurat hva vi vil i dette tilfellet, og det heter :fokus-innenfor.

Løsning: `:fokus-i`

I :fokus-i pseudo selector er en del av CSS-Velgere Nivå 4 Spec, og forteller leseren til å bruke en stil til en av foreldrene når noen av sine barn er i fokus. Så i vårt tilfelle betyr dette at vi kan fanen for å Sub-En og bruke en :fokus-i stil sammen med :hover stil av morselskapet og se nøyaktig hvor vi er i navigasjon-rullegardinmenyen. I vårt tilfelle ville det være ul li:fokus-i > ul:

ul li:hover > ul,
ul li:fokus-i > ul,
ul ul li:hover {
visibility: visible;
dekkevne: 1;
}

Se Penn Enkel CSS-Dropdown-Meny med Hover og :fokus-i løpet av Una Kravets (@una) på CodePen.

Søt! Det fungerer!

Nå, når vi kategorien til den andre elementet, vår undermenyen som dukker opp, og som vi fanen gjennom undermeny, sikten er fortsatt! Nå kan vi føye til koden vår for å inkludere :fokus stater sammen :hover å gi tastatur brukere den samme erfaringen som våre musen brukere.

I de fleste tilfeller, slik som på direkte linker, vi vanligvis kan bare skrive noe sånt som:

a:hover,
a:fokus {

}

Men i dette tilfellet, siden vi søker hold stiler basert på den overordnede li, kan vi igjen bruke :fokus-i for å få det samme ser på føler når tabbe gjennom. Dette er fordi vi ikke kan faktisk fokusere på li (med mindre vi legge til en tabindex=”0″). Vi er faktisk å fokusere på linken (en) i den. :fokus-innenfor tillater oss å fortsatt bruke maler til den overordnede li ved å fokusere på linken (ganske darn kult!):

li:hover,
li:fokus-i {

}

På dette punktet, siden vi søker fokus stil, vi kan gjøre noe som er vanligvis ikke anbefalt (fjern styling av det blå skissere fokus ringen). Vi kan gjøre dette ved å:

li:fokus-i en {
disposisjon: ingen;
}

Koden ovenfor angir at når vi har fokus i listen elementer via linken (en), må du ikke bruke en oversikt lenken element (en). Det er ganske trygt å skrive det på denne måten, fordi vi er utelukkende styling hover state, og med nettlesere som ikke støtter :fokus-i, linken vil fortsatt få en fokusring. Nå er vår meny ser ut som dette:

Endelige menyen ved hjelp av :fokus-i :hover stater, og tilpasse fokusringen til å forsvinne

Se Penn Enkel CSS-Dropdown-Meny med Hover og :fokus-både innenfor og Fokus stater av Una Kravets (@una) på CodePen.

Hva Om ARIA?

Hvis du er kjent med tilgjengelighet, du har kanskje hørt om ARIA etiketter og stater. Du kan bruke disse til din fordel om du også lage disse typer dropdowns med innebygd tilgjengelighet på samme tid! Du kan finne et utmerket eksempel her ved Heydon Pickering. Når inkludert ARIA markup koden din til å ville se litt mer ut som dette:

<nav rolle=”navigasjon”>
<ul>
<li><a href=”#”>En</a></li>
<li><a href=”#” aria-haspopup=”true”>To</a>
<ul class=”dropdown” aria-label=”undermeny”>
<li><a href=”#”>Sub-1</a></li>
<li><a href=”#”>Sub-2</a></li>
<li><a href=”#”>Sub-3</a></li>
</ul>
</li>
<li><a href=”#”>Tre</a></li>
</ul>
</nav>

Du legger til aria-haspopup=”true” til foreldrene i rullegardinmenyen for å angi en alternativ tilstand, og med aria-label=”undermeny” på den faktiske dropdown menyen i seg selv (i dette tilfellet vår liste med class=”dropdown”.

Disse egenskapene i seg selv vil gi deg den funksjonaliteten du trenger for å vise menyen, men ulempen er at de bare fungere med JavaScript aktivert.

Nettleser Støtter Forbeholdet

Sett av betingelser, la oss snakke om nettleseren støtter. Mens :fokus-i har ganske god nettleser støtte, er det viktig å være oppmerksom på at Internet Explorer og Kanten er ikke støttes, slik at brukere på disse plattformene vil ikke være i stand til å se fotgjengere.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
60 47 52 Ingen Ingen 10.1

Mobil / Nettbrett

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

Den ultimate løsningen her vil være å bruke både ARIA markup og CSS :fokus-i for å sikre en solid dropdown opplevelse for brukerne.

Se Penn Enkel CSS-Dropdown-Meny med Hover og :fokus-både innenfor og Fokus stater og ARIA av Una Kravets (@una) på CodePen.

Hvis du ønsker å være i stand til å bruke denne funksjonen i fremtiden, vennligst upvote det på Kanten Brukeren Stemme! Og upvote :fokus-ring mens du holder på, slik at vi vil være i stand til å stil som fokuserer ring og skape en vakker interaktive web-opplevelse for alle 😀

Mer om `:fokus-innenfor` og A11Y

  • Scott O ‘ Hara skrev om :fokus-i, utheving demoer som er uthevet <table> rader og dropdown menyer
  • Kushagra Gour på å skape et fokus på fanget modal
  • Eric Bailey på fokus stiler generelt
  • Chris på å holde et overordnet element synlig når barnet fokusert
  • Alle artikler på CSS-Triks relatert til :fokus-i