Opgelost Met CSS! Dropdown Menu ‘ S

0
15

Deze post is de tweede in een serie over de kracht van CSS.

Serie Artikelen:

  1. Inkleuren SVG-Achtergronden
  2. Dropdown Menu ‘ s (deze post)

CSS wordt steeds krachtiger, en met functies zoals een CSS grid en aangepaste eigenschappen (ook bekend als CSS-variabelen), we zien wat echt creatieve oplossingen ontstaan. Sommige van deze oplossingen richten zich in niet alleen het maken van het web mooier, maar het toegankelijker te maken, en het maken van styling toegankelijk ervaringen beter. Ik ga het zeker hier!

Een gemeenschappelijke UI patroon dat we zien op het web zijn dropdown menu ‘ s. Ze zijn gebruikt voor het weergeven van gerelateerde informatie in stukjes, zonder overweldigend de gebruiker met knoppen, tekst en opties. Ergens zien we deze veel is aan de binnenkant van de kop-of navigatie-gebieden op websites.

Een Google-zoekopdracht voor “dropdown-menu” levert vele voorbeelden

Laten we kijken of we het kunnen maken van één van deze menu ‘ s met CSS alleen. We maken een lijst van links in een nav component als volgt:

<nav role=”navigatie”>
<ul>
<li><a href=”#”>Een</a></li>
<li><a href=”#”>Twee</a></li>
<li><a href=”#”>Drie</a></li>
</ul>
</nav>

Nu zeggen we willen een sub-dropdown menu op de tweede navigatie-item. We kunnen hetzelfde doen en er zijn een lijst van links in de lijst item:

<nav role=”navigatie”>
<ul>
<li><a href=”#”>Een</a></li>
<li><a href=”#”>Twee</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=”#”>Drie</a></li>
</ul>
</nav>

We hebben nu onze twee-gelaagde navigatie systeem. Om de inhoud verborgen en weergegeven als we willen dat het zichtbaar is, moeten we toepassen wat CSS. Alle stijl-eigenschappen zijn verwijderd uit het volgende voorbeeld voor de duidelijkheid op interactie:

li {
display: block;
overgang-duur: 0,5 s;
}

li:hover {
cursor: pointer;
}

ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
overgang: alle 0,5 s gemak;
margin-top: 1rem;
links: 0;
}

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

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

Zie de Pen Eenvoudige CSS Dropdown Menu met de Muisaanwijzer door Una Kravets (@una) op CodePen.

Nu, het submenu dropdown is verborgen, maar zal worden blootgesteld en worden zichtbaar wanneer we de muisaanwijzer over de correlatie van de ouders in de navigatiebalk. Door styling ul li ul, hebben we toegang tot de submenu, en door styling ul li ul li, hebben we de toegang tot de afzonderlijke items in de lijst binnen.

Het Probleem

Dit begint te lijken op wat we willen, maar we zijn nog lang niet klaar op dit punt. De toegankelijkheid van websites is een belangrijk onderdeel van uw product ontwikkeling, en nu zou de perfecte gelegenheid om dit te brengen. Het toevoegen van rol=”navigatie” is een goed begin, maar om voor een navigatie-balk om toegankelijk te zijn, moet men in staat zijn om de tab-toets door het (en de focus op het juiste item in een zinvolle volgorde), en hebben ook een scherm lezer nauwkeurig lezen hardop wat is vooral gericht op.

Kunt u de muisaanwijzer over een van de items in de lijst en duidelijk zien wat er zweefde over, maar dit is niet waar voor het tabblad navigatie. Ga je gang en probeer de tab-toets door het voorbeeld hierboven. U verliest wanneer de focus wordt zichtbaar Als u met de tab naar Twee in het hoofdmenu zie je een focus-indicator ring, maar wanneer u met tab naar het volgende item (een van de submenu items), dat de focus verdwijnt.

Nu, het is belangrijk op te merken dat het theoretisch u gericht is op een ander item, en dat een scherm lezer in staat zou zijn om te verwerken dat het lezen van Sub-One, maar het toetsenbord gebruikers zullen niet in staat zijn om te zien wat er aan de hand en zal de weg kwijt zijn.

De reden dat dit gebeurt is omdat, terwijl we het stylen van het zweven van het bovenliggende element, zodra wij de overgang van aandacht van de ouder op één van de items in de lijst binnen die ouder, verliezen we dat de styling. Dit maakt het gevoel van een CSS-standpunt, maar het is niet wat we willen.

Gelukkig is er een nieuwe CSS pseudo-class, dat geeft ons precies wat we willen in dit geval, en het heet :focus-in.

De Oplossing: `:focus-in`

De :focus-in pseudo selector is een deel van de CSS Selectors Level 4 Spec en vertelt de browser om een stijl toepassen op een ouder als enige van haar kinderen in focus. Dus in ons geval betekent dit dat we kunnen tabblad Sub-One en toepassing van een :focus-in stijl, samen met de :hover stijl van de ouder en zie precies waar we zijn in de dropdown navigatie. In ons geval zou ul li:focus-in > ul:

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

Zie de Pen Eenvoudige CSS Dropdown Menu met Hover en :focus-binnen door Una Kravets (@una) op CodePen.

Lief! Het werkt!

Nu, als we tab naar het tweede item, onze submenu verschijnt, en als we de tab-toets door de submenu, de zichtbaarheid blijft! Nu kunnen we toevoegen van deze code zijn :focus staten naast :hover geven toetsenbord gebruikers dezelfde ervaring als de muis-gebruikers.

In de meeste gevallen, zoals op directe links, we zijn meestal net iets te schrijven als:

a:hover,
a:focus {

}

Maar in dit geval, omdat wij passen de muisaanwijzer stijlen gebaseerd op de bovenliggende li, kunnen we weer gebruik maken van :focus-in dezelfde kijk op het gevoel wanneer de tab-toets door. Dit is omdat we kunnen eigenlijk niet richten op de li (tenzij voegen we een tabindex=”0″). We zijn eigenlijk gericht op de koppeling (a) binnen. :focus-in stelt ons in staat om nog steeds van toepassing stijlen aan de ouder li bij het scherpstellen op de link (pretty darn cool!):

li:hover,
li:focus-in {

}

Op dit punt, want wij zijn het aanbrengen van een focus stijl, kunnen we iets doen dat doorgaans niet aanbevolen (verwijder de styling van dat blauwe contour focus ring). Dit kunnen We doen door:

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

De bovenstaande code geeft aan dat wanneer we ons richten binnen de items in de lijst via de link (a), zijn niet van toepassing een overzicht aan de koppeling punt (a). Het is vrij veilig om te schrijven het op deze manier, omdat we uitsluitend styling van de muisaanwijzer staat, en met browsers die het niet ondersteunen :focus-in, zal de link nog steeds een focus ring. Nu onze menu ziet er zo uit:

Laatste menu met de :focus-in, :hover staten, en het aanpassen van de focus-ring om te verdwijnen

Zie de Pen Eenvoudige CSS Dropdown Menu met Hover en :focus-binnen en Focus staten door Una Kravets (@una) op CodePen.

Wat Over ARIA?

Als je vertrouwd bent met de toegankelijkheid, je hebt misschien gehoord van de ARIA labels en de lidstaten. U kunt deze gebruiken om uw voordeel om ook deze soorten dropdowns met ingebouwde toegankelijkheid op hetzelfde moment! U vindt hier een uitstekend voorbeeld hier door Heydon Pickering. Wanneer ARIA markup, wordt de code ziet er een beetje meer zoals dit:

<nav role=”navigatie”>
<ul>
<li><a href=”#”>Een</a></li>
<li><a href=”#” aria-haspopup=”true”>Twee</a>
<ul class=”dropdown” aria-label=”submenu”>
<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=”#”>Drie</a></li>
</ul>
</nav>

U bent het toevoegen van aria-haspopup=”true” toe aan de ouder van het dropdown menu om aan te geven een alternatief staat, en met aria-label=”submenu” op de werkelijke dropdown menu zelf (in dit geval onze lijst met class=”dropdown”.

Deze eigenschappen van zichzelf zal geven u de functionaliteit die u nodig hebt om de dropdown menu, maar het nadeel is dat ze alleen werken met JavaScript.

Browser Ondersteuning Addertje Onder Het Gras

Het spreken van waarschuwingen, laten we praten over de steun van de browser. Terwijl :focus-binnen heeft wel een behoorlijk goede steun van de browser, het is belangrijk te weten dat Internet Explorer en Edge worden niet ondersteund, zodat uw gebruikers op deze platformen zal niet in staat zijn om de navigatie.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
60 47 52 Geen Geen 10.1

Mobiele / Tablet

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

De ultieme oplossing zou zijn om het gebruik van beide ARIA markup en CSS :focus-in om te zorgen voor een solide dropdown-ervaring voor uw gebruikers.

Zie de Pen Eenvoudige CSS Dropdown Menu met Hover en :focus-binnen en Focus staten en ARIA door Una Kravets (@una) op CodePen.

Als u wilt om gebruik te kunnen maken van deze functie in de toekomst, neem dan upvote het op de Rand van de Gebruiker Stem! En upvote :focus-ring, terwijl u bij het bent, zodat we in staat zijn om de stijl die focus ring en maak een mooie interactieve web-ervaring voor alle 😀

Meer over `:focus-in` en A11Y

  • Scott O ‘Hara schreef :focus-in, met de nadruk demo’ s zoals gemarkeerd in de <table> – rijen en dropdown-menu ‘ s
  • Kushagra Gour op het creëren van een focus-gevangen modal
  • Eric Bailey op focus stijlen in het algemeen
  • Chris op het houden van een bovenliggend element zichtbaar als kind gericht
  • Alle artikelen over CSS-Tricks in verband met :focus-binnen