Löst Med CSS! Dropdown Menyer

0
17

Detta inlägg är den andra i en serie om kraften i CSS.

Artikel-Serien:

  1. Färglägga SVG Bakgrund
  2. Dropdown Menyer (detta inlägg)

CSS är att få allt starkare, och med funktioner som CSS nätet och anpassade egenskaper (även känd som CSS variabler), ser vi några riktigt kreativa lösningar att växa fram. Några av dessa lösningar är inriktade runt, inte bara att göra webben snyggare, men att göra det mer tillgängligt, och gör styling tillgänglig erfarenheter bättre. Jag är definitivt här för det!

En gemensam UI mönster som vi ser på webben är dropdown-menyer. De används för att visa relaterad information i bitar, utan att ge användaren med knappar, text och andra alternativ. Någonstans att vi ser dessa en hel del är inne i rubriker eller navigering på webbplatser.

En Google-sökning för att “dropdown-menyn” ger många exempel

Låt oss se om vi kan få ett av dessa menyer med CSS ensam. Vi kommer att skapa en lista med länkar inom en nav-komponenten som så:

<nav roll=”navigering”>
<ul>
<li><a href=”#”>En</a></li>
<li><a href=”#”>Två</a></li>
<li><a href=”#”>Tre</a></li>
</ul>
</nav>

Säg att vi vill ha en sub-meny med dropdown på andra navigering artikel. Vi kan göra samma sak där och innehålla en förteckning över länkar inom denna lista objekt:

<nav roll=”navigering”>
<ul>
<li><a href=”#”>En</a></li>
<li><a href=”#”>Två</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>

Nu har vi våra två nivåer navigationssystem. För att få innehållet dolda och visas när vi vill att det ska synas, vi måste applicera lite CSS. Alla stil egenskaper har tagits bort från följande exempel för att ge klarhet om samverkan:

li {
display: block;
övergången-längd: 0.5 s.
}

li:hover {
cursor: pointer;
}

ul li ul {
visibility: hidden;
opacitet: 0;
position: absolute;
övergången: all 0,5 s lätthet;
margin-top: 1rem;
left: 0;
}

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

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

Se Pennan Enkel CSS-Meny med Hover av Una Kravets (@una) på CodePen.

Nu, undermenyn dropdown är dolda, men kommer att vara utsatt och bli synlig när vi håller muspekaren över den motsvarande förälder i navigeringsfältet. Med styling ul li ul, vi har tillgång till denna undermeny, och med styling ul li ul li, vi har tillgång till enskilda objekt i en lista i den.

Problemet

Det här börjar se ut som vad vi vill, men vi är fortfarande långt ifrån klar på denna punkt. Tillgänglighet på webben är en central del av din produkt utveckling, och just nu skulle vara ett perfekt tillfälle att ta upp detta. Lägga till roll=”navigering” är en bra början, men för en navigation bar att vara tillgänglig, man bör kunna fliken igenom det (och fokusera på rätt objekt i en vettig ordning), och har också en skärmläsare noggrant läsa högt för vad man fokuserar på.

Du kan sväva över någon av de objekt i en lista och tydligt se vad som svävade över, men detta är inte sant för fliken navigering. Gå vidare och försöka flik genom exemplet ovan. Du förlorar spår av där fokus är visuellt Som du fliken för Två i huvudmenyn, kommer du att se ett fokus indikator ringen, men när du tabbar till nästa objekt (en av dess undermeny objekt), att fokus försvinner.

Nu är det viktigt att notera att det teoretiskt är inriktad på denna punkt, och att en skärmläsare skulle kunna tolka den, läsa Sub-One, men tangentbordet användare kommer inte att kunna se vad som händer och kommer att förlora spåret.

Anledningen till att detta händer är att, medan vi är styling hover på det överordnade elementet, så snart som vi övergången fokus från förälder till en av listan objekt i som förälder, vi förlorar denna styling. Detta är logiskt från en CSS-synpunkt, men det är inte vad vi vill ha.

Som tur är finns det en ny CSS-pseudo-klass som kommer att ge oss precis vad vi vill i det här fallet, och den heter :fokus-inom.

Lösningen: `:fokus-inom`

Av :fokus-inom pseudo-väljaren är en del av CSS-Selektorer Nivå 4 Spec och talar om för webbläsaren att använda en stil för en förälder när något av barnen är i fokus. Så i vårt fall innebär detta att vi kan flik till Sub-One och tillämpa en :fokus-i stil med :hover stil av moderbolagets och se exakt var vi är i den vänstra rullmenyn. I vårt fall skulle det vara ul li:fokus-inom > ul:

ul li:hover > ul,
ul li:fokus-inom > ul,
ul li ul:hover {
visibility: visible;
opacitet: 1;
}

Se Pennan Enkel CSS-Meny med Muspekaren och :fokus-inom av Una Kravets (@una) på CodePen.

Söt! Det fungerar!

Nu, när vi flik till den andra punkten, vår undermeny dyker upp, och som vi flik genom undermenyn, synlighet kvar! Nu kan vi lägga till vår kod för att inkludera :fokus stater tillsammans :för muspekaren för att ge användare tangentbord samma erfarenhet som våra musen användare.

I de flesta fall, till exempel på direkta länkar, vi kan oftast bara skriva något i stil med:

a:hover,
a:focus {

}

Men i detta fall, eftersom vi kommer att använda hover stilar baserat på moderbolagets li, kan vi återigen använda sig av :fokus-inom för att få samma utseende på känsla när du tabbar genom. Detta beror på att vi inte kan verkligen fokusera på li (om vi lägger till en tabindex=”0″). Vi är faktiskt med fokus på kopplingen (a) inom det. :fokus-inom tillåter oss att fortfarande använda formatmallar för att den förälder li när man fokuserar på länken (ganska coolt!):

li:hover,
li:fokus-inom {

}

Vid denna punkt, eftersom vi tillämpar ett fokus stil, kan vi göra något som vanligtvis inte rekommenderas (ta bort styling av att en blå kant focus-ringen). Vi kan göra detta genom att:

li:fokus-inom en {
utkast: none;
}

Ovanstående kod specificerar att när vi fokuserar i listan objekt via länken (a), gäller inte en beskrivning till länken punkt (a). Det är ganska säkert att skriva det här sättet, eftersom vi uteslutande styling hover state, och med webbläsare som inte stöder :fokus-inom, länken kommer fortfarande att få en fokusring. Nu vår meny ser ut så här:

Sista meny med hjälp av :focus-inom :hover stater, och anpassa focus-ringen för att försvinna

Se Pennan Enkel CSS-Meny med Muspekaren och :fokus-inom och Fokus stater genom Una Kravets (@una) på CodePen.

Vad sägs Om ARIA?

Om du är bekant med tillgänglighet, du kanske har hört talas om ARIA etiketter och stater. Du kan använda dessa till din fördel att också skapa dessa typer av rullgardiner med inbyggd tillgänglighet på samma gång! Du kan hitta ett utmärkt exempel här Heydon Pickering. När inklusive ARIA kod, koden skulle se ut lite mer såhär:

<nav roll=”navigering”>
<ul>
<li><a href=”#”>En</a></li>
<li><a href=”#” aria-haspopup=”true”>Två</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 lägger till aria-haspopup=”true” för att moderbolaget i dropdown-menyn för att ange en alternativ stat, och inklusive aria-label=”undermeny” på själva dropdown-menyn i sig (i detta fall vår lista med class=”dropdown”.

Dessa egenskaper i sig kommer att ge dig den funktionalitet du behöver för att visa rullgardinsmenyn, men nackdelen är att de bara arbeta med JavaScript aktiverat.

Webbläsare-Stöd Varning

På tal om problem, låt oss tala om webbläsaren stöd. Samtidigt :fokus-inom har ganska bra webbläsare stöd, det är viktigt att notera att Internet Explorer och Edge inte stöds, så att dina användare på dessa plattformar kommer inte att kunna se navigeringen.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
60 47 52 Inga Inga 10.1

Mobil / Surfplatta

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

Den ultimata lösningen vore att använda både ARIA markup och CSS :fokus-inom för att säkerställa en solid dropdown upplevelse för dina användare.

Se Pennan Enkel CSS-Meny med Muspekaren och :fokus-inom och Fokus stater och ARIA av Una Kravets (@una) på CodePen.

Om du vill kunna använda den här funktionen i framtiden, vänligen upvote det på Kanten User Voice! Och upvote :focus-ringen medan du är på det, så att vi ska kunna stil som fokusringen och skapa en vacker interaktiv upplevelse på webben för alla 😀

Mer om”: fokus-inom ” och A11Y

  • Scott O ‘ Hara skrev om :fokus-inom, som belyser demos som markerade <table> rader och dropdown menyer
  • Kushagra Gour på att skapa ett fokus-instängd modal
  • Eric Bailey fokus stilar i allmänt
  • Chris på att hålla ett överordnat element synliga när barnet fokuserad
  • Alla artiklar om CSS-Tricks relaterat till :fokus-inom