Uitleg verticaal slide-outmenu. Maakt gebruik van :target

Laatst aangepast: 3 juni 2018.

Afbeelding 1: slide-outmenu in gesloten en geopende toestand

Korte omschrijving

Met een aanraking, een klik of het toetsenbord wordt een menu vanaf de linkerkant getoond of verborgen.

BELANGRIJK

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreekt bijvoorbeeld de navigatie voor de site. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n <h1> uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Normaal genomen gaat het om kleine verschillen, maar in dit geval is dat niet zo. Het voorbeeld in de download is precies hetzelfde, als wat in de uitleg wordt behandeld. Als je het hele voorbeeld downloadt (bovenaan de pagina), speelt dit dus niet.

Als je deze handleiding graag uitprint (zonde van het bos), gebruik dan de pdf in de download. Deze pagina is niet geoptimaliseerd voor printen, de pdf kan wel makkelijk worden geprint.

Alles op deze site kan vrij worden gebruikt, met drie beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

* Het kan zijn dat materiaal is gebruikt dat van anderen afkomstig is. Dat materiaal kan onder een bepaalde licentie vallen, waardoor het mogelijk niet onbeperkt gebruikt mag worden. Als dat zo is, wordt dat vermeld onder Inhoud van de download en licenties.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Alle code is geschreven in een afwijkende lettersoort en -kleur. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg onderstippeld blauw. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles vanwege de leesbaarheid in een gewone letter.)

Opmerkingen

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Dit voorbeeld is gemaakt op een systeem met Linux (Kubuntu). Daarbij is vooral gebruik gemaakt van Visual Studio Code, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Achterliggend idee

Links buiten de pagina staat een menu dat normaal genomen niet zichtbaar is.

Bovenaan de pagina staat een link (het witte blokje met het ≡-teken), die niet meescrolt met de pagina. Deze link is daardoor altijd bereikbaar. Het doel van deze link is het menu dat links buiten de pagina staat. Door bij het menu gebruik te maken van de pseudo-class :target, kan het menu zichtbaar worden gemaakt bij aanraken van of klikken op de link. De link kan ook met het toetsenbord worden bediend.

Als het menu zichtbaar is, kunnen de in het menu zittende links naar andere pagina's gewoon worden gevolgd door aanraken, klikken of toetsenbord.

In het menu zitten nog twee extra links, die nergens naartoe leiden. Zodra een van deze twee links wordt gevolgd, wordt pseudo-class :target bij het menu uitgeschakeld en sluit het menu weer.

Er zijn twee links om het menu weer te sluiten, eentje helemaal aan het begin en eentje helemaal aan het einde. Hierdoor hoeft een toetsenbordgebruiker die per ongeluk het menu heeft geopend niet alle tien externe links af te lopen, maar kan het menu gelijk weer sluiten.

Als het menu niet zichtbaar is, wordt dit door de Tab-toets genegeerd. Ook schermlezers negeren het menu, als dit niet is geopend.

Verder is nog wat extra css nodig om het menu enigszins soepel te tonen en te verbergen.

De browser slaat een bezochte link op in de geschiedenis. Om te voorkomen dat de links om het menu te openen en te sluiten in de geschiedenis worden opgeslagen, wordt wat JavaScript gebruikt. Als dat niet zou gebeuren, wordt bij het volgen van de bezochte links in de geschiedenis ook het menu getoond en verborgen.

Zonder JavaScript werkt alles gewoon, maar de geschiedenis wordt dan niet gecorrigeerd.

Semantische elementen en WAI-ARIA

Deze twee onderwerpen zijn samengevoegd, omdat ze veel met elkaar te maken hebben.

Semantische elementen

De meeste elementen die in html worden gebruikt, hebben een semantische betekenis. Dat wil zeggen dat je aan de gebruikte tag al (enigszins) kunt zien, wat voor soort inhoud er in het element staat. In een <h1> staat een belangrijke kop. In een <h2> staat een iets minder belangrijke kop. In een <p> staat een alinea. In een <table> staat een tabel (en geen lay-out, als het goed is!). Enzovoort.

Door het op de goede manier gebruiken van semantische elementen, kunnen zoekmachines, schermlezers, enzovoort de structuur van een pagina begrijpen. De spider van een zoekmachine is redelijk te vergelijken met een blinde. Het is dus ook in je eigen belang om semantische elementen zo goed mogelijk te gebruiken. Een site die toegankelijk is voor mensen met een handicap, is in de regel ook goed te verwerken door een zoekmachine en maakt dus een grotere kans gevonden en bezocht te worden.

Als het goed is, wordt het uiterlijk van de pagina bepaald met behulp van css. Het uiterlijk staat hierdoor (vrijwel) los van de semantische inhoud van de pagina. Met behulp van css kun je een <h1> heel klein weergeven en een <h6> heel groot, terwijl schermlezers, zoekmachines, en dergelijke nog steeds weten dat de <h1> een belangrijke kop is.

Slechts enkele elementen, zoals <div> en <span>, hebben geen semantische betekenis. Daardoor zijn deze elementen uitstekend geschikt om met behulp van css het uiterlijk van de pagina aan te passen: de semantische betekenis verandert niet, maar het uiterlijk wel. Voor een schermlezer of zoekmachine verandert er (vrijwel) niets, voor de gemiddelde bezoeker krijgt het door de css een heel ander uiterlijk.

(De derde laag, naast html voor de inhoud en css voor het uiterlijk, is JavaScript. Die zorgt voor de interactie tussen site en bezoeker. De min of meer strikte scheiding tussen css en html aan de ene kant en JavaScript aan de andere kant is met de komst van css3 en html5 veel vager geworden. Je kunt nu bijvoorbeeld ook met css dingen langzaam verplaatsen en met html deels de invoer in formulieren controleren.)

Html5 heeft een aantal nieuwe elementen, die speciaal zijn bedoeld om de opbouw van een pagina aan te geven. In dit voorbeeld worden hiervan <header> en <main> gebruikt. Beide gedragen zich als een gewone <div>, maar dan een <div> met een semantische betekenis. Hierdoor kunnen schermlezers, zoekmachines, en dergelijke beter zien, hoe de pagina is samengesteld. De meeste schermlezers kunnen dit soort elementen ook gebruiken om snel over de pagina te navigeren.

<header>

Bedoeld om een header in te zetten.

Een <header> mag vaker op één pagina worden gebruikt. De <header> hoort altijd bij het element, waar de <header> in staat. In dit voorbeeld wordt maar één <header> gebruikt, waarvan de ouder <body> is. Die <header> is dus de <header> voor <body>, voor de hele pagina.

Omdat deze <header> een kind van <body> is, heeft deze voor schermlezers een speciale betekenis. Deze speciale beteken is er niet, als de <header> geen direct kind van <body> is.

<main>

Hierbinnen staat de belangrijkste inhoud van de pagina (in dit voorbeeld is dat voornamelijk Latijnse flauwekultekst).

Met behulp van dit soort nieuwe semantische elementen kan bijvoorbeeld een schermlezer in één keer een heel menu passeren en gelijk naar de echte inhoud gaan. Alleen hadden deze nieuwe elementen tot voor kort één probleem: ze hadden in de praktijk nog weinig nut, omdat schermlezers en dergelijke ze nog niet herkenden. Daarom werd een zogenaamde WAI-ARIA-code toegevoegd aan deze elementen. Dat is een al veel langer bestaande code, die schermlezers en dergelijke wel herkennen. Voor <main> ziet dat er zo uit:

<main role="main">

Inmiddels is dit behoorlijk veranderd. Het advies is nu om deze speciale toevoeging niet meer te gebruiken, omdat de meeste schermlezers en dergelijke dit soort nieuwe elementen inmiddels herkennen.

WAI-ARIA-codes

WAI-ARIA wordt vaak ingekort tot ARIA. Voluit betekent het Web Accessibility Initiative – Accessible Rich Internet Applications.

Er worden in dit voorbeeld twee WAI-ARIA-codes gebruikt: aria-label en aria-hidden.

aria-label

Dit is de link, waarmee het menu zichtbaar wordt gemaakt:

<a id="open" href="#nav" aria-label="Open menu">≡</a>

Het teken ≡, het 'hamburger'-symbool, wordt vaak gebruikt om een verborgen menu mee aan te geven. (Persoonlijk vind ik dat volstrekt onduidelijk, en vele onderzoeken bevestigen dat, vandaar dat in het voorbeeld onder dat symbool ook nog 'Menu' staat.)

In werkelijkheid is dit hamburger-symbool een wiskundig symbool met de welluidende naam 'identical to'. Een schermlezer zal dit symbool dan ook met die naam voorlezen of, als de schermlezer het symbool niet herkent, negeren.

Door het gebruik van aria-label="Open menu" wordt de gewone tekst in de link (dat is hier alleen dat symbool) niet voorgelezen, maar vervangen door de tekst achter aria-label.

Voor de beide links met de sluitknoppen in het menu werkt het hetzelfde:

<li><a class="sluit" href="#_" aria-label="Sluit en skip menu">X</a></li>

<a class="sluit" href="#_" aria-label="Einde menu bereikt. Sluit menu">X</a>

In beide gevallen wordt de letter 'X' uit de links niet voorgelezen, maar vervangen door de tekst achter aria-label.

aria-hidden

Met behulp van aria-hidden="true" kan een deel van de code worden verborgen voor schermlezers en dergelijke, zodat dit niet wordt voorgelezen. Op de normale weergave op het scherm heeft dit verder geen enkele invloed.

Onder het symbool, waarmee het menu kan worden geopend, staat ook nog het woord 'Menu'. Dit woord zit niet in de link zelf, omdat bij hoveren over of focus van de link de tekst in de link vet wordt. Daardoor zou 'Menu' net te breed worden. Door het in een <span> buiten de eigenlijke link te zetten, wordt dat voorkomen.

Hierboven bij aria-label is voor schermlezers al de tekst 'Open menu' opgegeven om voor te lezen. Als het woord 'Menu' niet verborgen zou worden, zou een schermlezer 'Open menu menu' voorlezen. Daarom wordt het woord 'Menu' in de <span> voor schermlezers verborgen:

<span aria-hidden="true">Menu</span>

Tabindex en Tab-toets

Links, invoervelden in formulieren, en dergelijke kunnen met behulp van de Tab-toets (of een soortgelijke toets) één voor één worden bezocht, in de volgorde waarin ze in de html voorkomen. Shift+Tab-toets keert de volgorde van de Tab-toets om. Dit is een belangrijk hulpmiddel voor mensen die om een of andere reden de muis niet kunnen of willen gebruiken. (En het is vaak ook veel sneller dan de muis, vooral in formulieren.)

In sommige browsers en/of besturingssystemen is dit vreemd genoeg standaard uitgeschakeld en is een zoektocht in de instellingen nodig om dit aan te zetten. Maar gebruikers van de Tab-toets zullen dit al hebben gedaan.

Als je met behulp van de Tab-toets een element hebt bereikt, heeft dit 'focus': als het een link is en je drukt op Enter, wordt de link gevolgd. Bij een tekstveld kun je tekst gaan invoeren. Enzovoort.

De Tab-toets volgt normaal genomen de volgorde van de elementen in de html. Het maakt niet uit, in welke volgorde ze op het scherm staan. Als je met behulp van css de elementen van plaats verwisselt op het scherm, wordt toch gewoon de volgorde in de html gevolgd.

De volgorde van de Tab-toets kan worden veranderd met behulp van het tabindex-attribuut: <div tabindex="3">. Deze <div> zal nu als derde worden bezocht, ook al krijgt een simpele <div> normaal genomen nooit bezoek van de Tab-toets.

Normaal genomen is het gebruik van een tabindex niet nodig. Het is zeker niet bedoeld om de bezoeker als een kangoeroe op een hindernisbaan van onder via links over rechts naar boven te laten springen. Maar soms kan het handig zijn voor kleinere correcties, als de normale volgorde in de html niet optimaal is. Of om een element bereikbaar te maken voor de Tab-toets, zoals de hierboven genoemde <div>.

Schermlezers blijven altijd de volgorde van de html volgen, dus als de tabindex sterk afwijkt van de volgorde in de html, kan dat behoorlijk verwarrend zijn.

Omdat in dit voorbeeld alleen gebruik wordt gemaakt van links, zijn geen aanpassingen nodig voor de tabindex.

De eerste tab geeft de link om het menu te openen focus. Omdat het menu is verborgen, passeert een volgende tab het menu en gaat rechtstreeks naar de link 'Dit is een extra link' in de tekst.

Als je echter na de eerste tab, als de link om het menu te openen focus heeft, op Enter drukt, wordt de link naar het menu gevolgd. Omdat nu de pseudo-class :target wordt geactiveerd, wordt het menu zichtbaar. Volgende tabs gaan nu naar de links binnen het menu, omdat dit nu zichtbaar is.

De code aanpassen aan je eigen ontwerp

Als je dit voorbeeld gaat aanpassen voor je eigen site, houd het dan in eerste instantie zo eenvoudig mogelijk. Ga vooral geen details invullen.
Gebruik vooral geen FrontPage, Publisher of Word (alle drie van Microsoft). Deze programma's maken niet-standaard code die alleen goed te bekijken is in Internet Explorer. In alle andere browsers zie je grotendeels bagger, áls je al iets ziet.

Publisher en Word zijn niet bedoeld om websites mee te maken. FrontPage is zwaar verouderd en wordt al jaren niet meer onderhouden door Microsoft.

Ook OpenOffice en LibreOffice leveren een uiterst beroerd soort html af. Tekstverwerkers met al hun toeters en bellen zijn gewoon niet geschikt om websites mee te bouwen.

Je kunt beter een (goed) gratis programma gebruiken. Links naar dat soort programma's vind je op de pagina met links onder Gereedschap → wysiwyg-editor.

Maar het allerbeste is om gewoon zelf html, css, enzovoort. te leren, omdat zelfs het allerbeste programma het nog steeds zwaar verliest van 'n op de juiste manier met de hand gemaakte pagina.
Als je in een desktopbrowser met behulp van zoomen het beeld vergroot, heeft dit hetzelfde effect, als wanneer de pagina in een kleiner browservenster wordt getoond. Je kunt hiermee dus kleinere apparaten zoals een tablet of een smartphone simuleren. Maar het blijft natuurlijk wel een simulatie: het is nooit hetzelfde als testen op een écht apparaat. Zo kun je bijvoorbeeld aanrakingen alleen echt testen op een echt touchscreen.

Inmiddels hebben veel browsers in de ontwikkelgereedschappen mogelijkheden voor het simuleren van weergave op een kleiner scherm ingebouwd. Ook dit blijft een simulatie, maar geeft vaak wel een beter beeld dan zoomen.
Ik maak zelf het liefst een site in Firefox. Als je 'n site maakt in Firefox, Opera, Safari, Google Chrome of Edge, is er 'n hele grote kans dat hij in alle browsers werkt. Ik geef de voorkeur aan Firefox, omdat het de enige grote browser is die niet bij een bedrijf hoort dat vooral op je centen of je data uit is.

Google Chrome wordt ook door veel mensen gebruikt, maar ik heb dus wat moeite met hoe Google je hele surfgedrag, je schoenmaat en de kleur van je onderbroek vastlegt. Daarom gebruik ik Google Chrome zelf alleen om in te testen.
Het allereerste dat je moet invoeren, is het doctype, vóór welke andere code dan ook. Een lay-out met een missend of onvolledig doctype ziet er totaal anders uit dan een lay-out met een geldig doctype. Wát er anders is, verschilt ook nog 'ns tussen de diverse browsers. Als je klaar bent en dan nog 'ns 'n doctype gaat invoeren, weet je vrijwel zeker dat je van voren af aan kunt beginnen met de lay-out.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.
Gebruik het volledige doctype, inclusief de eventuele url, anders werkt het niet goed.

Gebruik een 'strict' doctype of (beter!) het doctype voor html5. Deze zijn bedoeld voor nieuwe sites. Het transitional doctype is bedoeld voor al bestaande sites, niet voor nieuwe.

Het transitional doctype staat talloze tags toe, die in html5 zijn verboden. Deze tags worden al zo'n tien jaar afgeraden. Het transitional doctype is echt alleen bedoeld om de puinhoop van vroeger, toen niet volgens standaarden werd gewerkt, enigszins te herstellen.

Het strict doctype staat verouderde tags niet toe. Daardoor kan met 'n strict doctype, of het nu html of xhtml is, probleemloos worden overgestapt naar html5. Met een transitional doctype en het gebruik van afgekeurde tags kun je niet overstappen naar html5. Je moet dan eerst alle verouderde tags verwijderen, wat echt ontzettend veel werk kan zijn.

Het doctype voor html5 is uiterst simpel: <!DOCTYPE html>. Omdat het doctype voor html5 in alle browsers werkt, zelfs in de gelukkig vrijwel uitgestorven nachtmerrie Internet Explorer 6, is er geen enkele reden dit uiterst simpele doctype niet te gebruiken.
Als tweede voer je de charset in. Dit vertelt de browser, welke tekenset er gebruikt moet worden, zodat letters met accenten en dergelijke overal goed worden weergegeven. Het beste kun je utf-8 nemen. Als je later van charset verandert, loop je 'n grote kans dat je alle aparte tekens als letters met accenten weer opnieuw moet gaan invoeren. In html5 is het simpele <meta charset="utf-8"> voldoende.
Test vanaf het allereerste begin in zoveel mogelijk verschillende browsers in 'n aantal resoluties (schermgroottes). Onder het kopje Getest in kun je in deze uitleg vinden, waar dit voorbeeld in is getest. Ook van Internet Explorer kun je meerdere versies naast elkaar draaien. Op de pagina met links staan onder het kopjes Gereedschap → Weergave en dergelijke testen 'n aantal links die daarbij kunnen helpen. De compatibiliteitsweergave in Internet Explorer is niet geschikt om in te testen, omdat deze enigszins verschilt van de weergave in échte browsers.

(Overigens wordt op deze site alleen nog getest in Internet Explorer 11. Oudere versies van Internet Explorer worden niet meer ondersteund en zijn daardoor per definitie uiterst onveilig. In Edge, de opvolger van Internet Explorer, wordt wel gewoon getest.)
Voor alle voorbeelden geldt: breng veranderingen stapsgewijs aan. Als je bijvoorbeeld foto's wilt laten weergeven, begin dan met het alleen veranderen van de namen van de foto's, zodat je eigen foto's worden weergegeven. Maakt niet uit als de maten niet kloppen en de teksten fout zijn. Als dat werkt, ga dan bijvoorbeeld de maten aanpassen. Dan de teksten. En controleer steeds, of alles nog goed werkt.
Als het om een lay-out of iets dergelijks gaat: zorg eerst dat header, kolommen, footer, menu, en dergelijke staan en bewegen, zoals je wilt. Ga daarna pas details binnen die blokken invullen. In eerste instantie gebruik je dus bijvoorbeeld 'n leeg blok op de plaats, waar uiteindelijk het menu komt te staan.

Als je begint met allerlei details, is er 'n heel grote kans dat die de werking van de blokken gaan verstoren. Bouw eerst het huis, en ga dan pas de kamers inrichten. Zorg eerst dat de blokken werken, zoals je wilt. Dan zul je het daarna gelijk merken, als 'n toegevoegd detail als tekst of 'n afbeelding iets gaat verstoren. Daarvoor moet je natuurlijk wel regelmatig controleren in verschillende browsers, of alles nog wel goed werkt.

Je kunt de blokken tijdens het aanpassen opvullen met bijvoorbeeld <br>1<br>2<br>3 enzovoort, tot ze de juiste hoogte hebben. Het is handig om aan het einde even iets toe te voegen als 'laatste', zodat je zeker weet dat er niet ongemerkt drie regels onderaan naar 't virtuele walhalla zijn verhuisd.

Om de breedte te vullen, kun je het best 'n kort woord als 'huis' duizend keer of zo herhalen. Ook hier is het handig om aan 't eind (en hier ook aan 't begin) 'n herkenningsteken te maken, zodat je zeker weet dat je de hele tekst ziet.
Zolang je in grotere dingen zoals 'n lay-out aan 't wijzigen bent, kan het helpen de verschillende delen een achtergrondkleur te geven. Je ziet dan goed, waar 'n deel precies staat. Een achtergrondkleur heeft – anders dan bijvoorbeeld een border – verder geen invloed op de lay-out, dus die is hier heel geschikt voor.
Als je instellingen verandert in de style, verander er dan maar één, hooguit twee tegelijk. Als je er zeventien tegelijk verandert, is de kans groot dat je niet meer weet, wat je hebt gedaan. En dat je 't dus niet meer terug kunt draaien.
margin, padding en border worden bij de hoogte en breedte van het element opgeteld. Hier worden vaak fouten mee gemaakt. Als je bijvoorbeeld in een lay-out 'n border toevoegt aan een van de 'hoofdvakken' (header, footer, kolommen), dan wordt deze er bij opgeteld. Bij 'n border van 2 px rondom de linkerkolom wordt deze dus plotseling 4 px breder (2 aan beide kanten), en 4 px hoger. Zoiets kan je hele lay-out verstoren, omdat iets net te breed of te hoog wordt. Je moet dan elders iets 4 px kleiner maken. Dat zal vaak zo zijn: als je één maat verandert, zul je vaak ook 'n andere moeten aanpassen.

Css geeft de mogelijkheid om met behulp van box-sizing de padding en border bínnen de breedte en hoogte van de inhoud te zetten, als je dat handiger vindt.

Met nieuwere css-eigenschappen als grid en flexbox, die speciaal zijn gemaakt om een lay-out mee te maken, spelen dit soort problemen veel minder. Maar hier moet je weer goed op de ondersteuning door browsers letten, want niet elke browser ondersteunt al alles van deze eigenschappen, en zeker niet foutloos.
In plaats van een absolute eenheid als px kun je ook een relatieve eenheid gebruiken, met name em en rem. Voordeel van em en rem is dat een lettergrootte, regelhoogte, en dergelijke in em en rem in alle browsers kan worden veranderd. Nadeel is dat het de lay-out sneller kan verstoren dan bijvoorbeeld px. Dit moet je gewoon van geval tot geval bekijken. Voor weergave in mobiele apparaten zijn relatieve eenheden als em en rem vrijwel altijd beter dan absolute eenheden als px.

(De minder bekende rem is ongeveer hetzelfde als de em. Alleen is de lettergrootte bij rem gebaseerd op de lettergrootte van het <html>-element, waardoor de rem overal op de pagina precies even groot is. Bij de em kan de lettergrootte worden beïnvloed door de voorouders van het element, bij de rem niet.)

Zoomen kan trouwens altijd, ongeacht welke eenheid je gebruikt.
Valideren, valideren, valideren en dan voor 't slapen gaan nog 'ns valideren.

Valiwie???

Valideren is het controleren van je html en css op 'n hele serie fouten. Computers zijn daar vaak veel beter in dan mensen. Als je 300 keer <h2> hebt gebruikt en 299 keer </h2> vindt 'n computer die ene missende </h2> zonder enig probleem. Jij ook wel, maar daarna ben je misschien wel aan vakantie toe.

Valideren kan helpen om gekmakende fouten te vinden. Valide code garandeert ook dat de weergave in verschillende browsers (vrijwel) hetzelfde is. En valide code is over twintig jaar ook nog te bekijken.

Valideren moet trouwens ook niet worden overdreven. Het is een hulpmiddel om echte fouten te vinden, meer niet. Het gaat erom dat je site goed werkt, niet dat je het braafste kind van de klas bent. Als de code niet valideert, maar daar is een goede reden voor, is daar niets op tegen. Zeker met nieuwere html en css wil de validator nog wel eens achterlopen, terwijl dat al prima is te gebruiken.

Op deze site is alle css en html gevalideerd. Als de code niet helemaal valide is (wat regelmatig voorkomt), staat daar onder Bekende problemen (en oplossingen) de reden van.

Je kunt je css en html valideren als 't online staat, maar ook als het nog in je computer staat.

Html kun je valideren op: validator.w3.org/nu.

Css kun je valideren op: jigsaw.w3.org/css-validator.

Toegankelijkheid en zoekmachines

De tekst in dit hoofdstukje is een algemene tekst, die voor elke pagina geldt. Eventueel specifiek voor dit voorbeeld geldende problemen en eventuele aanpassingen om die problemen te voorkomen staan bij Bekende problemen (en oplossingen).

Toegankelijkheid (in het Engels 'accessibility') is belangrijk voor bijvoorbeeld blinden die een schermlezer gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje dat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Gebruik altijd een alt-beschrijving bij een afbeelding. De alt-tekst wordt gebruikt, als afbeeldingen niet kunnen worden getoond of gezien (dat geldt dus ook voor zoekmachines). Als je iets wilt laten zien, als je over de afbeelding hovert, gebruik daar dan het title-attribuut voor, niet de alt-beschrijving.

Als een afbeelding alleen maar voor de sier wordt gebruikt, zet je daarbij alt="", om aan te geven dat de afbeelding niet belangrijk is voor het begrijpen van de tekst of zo.
Als uit de tekst in een link niet duidelijk wordt, waar de link naartoe leidt, gebruik dan een title bij de link. Een tekst als 'pagina met externe links' is waarschijnlijk duidelijk genoeg, een tekst als alleen 'links' mogelijk niet. Een duidelijke zwart-witregel is niet te geven, omdat dit ook van tekst en dergelijke in de omgeving van de link afhangt.
Accesskeys (sneltoetsen) kun je beter niet gebruiken, deze geven te veel problemen, omdat ze vaak dubbelop zijn met sneltoetsen voor de browser of andere al gebruikte sneltoetsen. Bovendien is voor de gebruiker meestal niet duidelijk, welke toetsen het zijn.

Op zichzelf zijn accesskeys een heel goed idee. Maar helaas zijn ze ook in html5 volstrekt onvoldoende gedefinieerd. Er is nog steeds geen standaard voor de meest gebruikelijke accesskeys, zoals Zoek of Home.

Er is nog steeds niet vastgelegd, hoe accesskeys zichtbaar gemaakt kunnen worden. Voor de makers van browsers zou dit 'n relatief kleine moeite zijn, voor de makers van 'n site is het bergen extra werk.

Hierdoor zijn accesskeys (vrijwel) niet te gebruiken. Misschien kunnen ze nog enig nut hebben op sites, die gericht zijn op 'n specifieke groep gebruikers. Maar voor algemene sites is het advies: normaal genomen niet gebruiken.
Met behulp van de Tab-toets (of op 'n soortgelijke manier) kun je in de meeste browsers door links, invoervelden, en dergelijke lopen. Elke tab brengt je één link, invoerveld, en dergelijke verder, Shift+Tab één plaats terug. Met behulp van het attribuut tabindex kun je de volgorde aangeven, waarin de Tab-toets werkt. Zonder tabindex wordt de volgorde van de html aangehouden bij gebruik van de Tab-toets, maar soms is een andere volgorde logischer.

In principe is het beter, als tabindex niet nodig is, maar gewoon de volgorde van de html wordt aangehouden. Bij verkeerd gebruik kan tabindex heel verwarrend zijn. Het is niet bedoeld om van de pagina een hindernisbaan voor kangoeroes te maken, waarop van beneden via links over rechts naar boven wordt gesprongen.
Als, zoals hierboven beschreven, een gebruiker van de Tab-toets bij een link, invoerveld, en dergelijke is aangekomen, heeft dit element 'focus'. Dit wordt aangegeven door de link, invoerveld, en dergelijke extra te markeren met een kadertje. Dat kadertje mag je alleen weghalen, als op een andere manier wordt duidelijk gemaakt, welk element focus heeft. Een gebruiker van de Tab-toets kan anders niet zien, waar zij of hij zit, en welk element gaat reageren op bijvoorbeeld een Enter.
In het verleden werd vaak aangeraden de volgorde van de code aan te passen. Een menu bijvoorbeeld kon in de html onderaan worden gezet, terwijl het op het scherm met behulp van css bovenaan werd gezet. Inmiddels zijn schermlezers en dergelijke zo sterk verbeterd dat dit niet meer wordt aangeraden. De volgorde in de html kan tegenwoordig beter hetzelfde zijn als die op het scherm, omdat het anders juist verwarrend kan werken.
Een zogenaamde skip-link is vaak nog wel zinvol. Dat is een link die je buiten het scherm parkeert met behulp van css, zodat hij normaal genomen niet te zien is. Zo'n link is wel gewoon zichtbaar in speciale programma's zoals tekstbrowsers en schermlezers, want die kijken gewoon naar wat er in de broncode staat. (Alleen in de schermlezer TalkBack op Android werkt zo'n buiten het scherm geplaatste link niet. TalkBack leest zo'n link wel voor, maar de link kan niet worden gevolgd, als deze buiten het scherm staat.)

Een skip-link staat bovenaan de pagina, nog boven menu, header, en dergelijke, en linkt naar de eigenlijke inhoud van de pagina. Hierdoor kunnen mensen met één toetsaanslag naar de eigenlijke inhoud van de pagina gaan.

Een skip-link is vooral nuttig voor gebruikers van de Tab-toets. Zodra de normaal genomen onzichtbare link door het indrukken van de Tab-toets focus krijgt, kun je hem op het scherm plaatsen, waardoor hij zichtbaar wordt. Bij een volgende tab wordt hij dan weer buiten het scherm geplaatst en is dus niet meer zichtbaar, zodat de lay-out niet wordt verstoord.

Op pagina's en in voorbeelden waar dat nuttig is, wordt op deze site een skip-link gebruikt. (Althans: nog niet in alle voorbeelden die daarvoor in aanmerking komen, zit een skip-link. Maar geleidelijk aan worden dat er steeds meer.)
Van oorsprong is html een taal om wetenschappelijke documenten weer te geven, pas later is hij gebruikt voor lay-out. Maar daar is hij dus eigenlijk nooit voor bedoeld geweest. Het gebruiken van html voor lay-out leidt tot enorme problemen voor gehandicapten en tot een lage plaats in zoekmachines.

De html hoort alleen inhoud te bevatten, lay-out doe je met behulp van css. Die css moet in een externe stylesheet staan of, als hij alleen voor één bepaalde pagina van toepassing is, in de <head> van die pagina.
Breng een logische structuur aan in je document. Gebruik een <h1> voor de belangrijkste kop, een <h2> voor een subkop, enzovoort. Schermlezers en dergelijke kunnen van kop naar kop springen. En een zoekmachine gaat ervan uit dat <h1> belangrijke tekst bevat.

Dit geldt voor al dit soort structuurbepalende tags.

Als een <h1> te grote letters geeft, maak daar dan met behulp van je css 'n kleinere letter van, maar blijf die <h1> gewoon gebruiken. Op dezelfde manier kun je al dit soort dingen oplossen.
<table> is fantastisch, maar alleen als die wordt gebruikt om een echte tabel weer te geven, niet als hij voor opmaak wordt misbruikt. In het verleden is dat op grote schaal gebeurd bij gebrek aan andere mogelijkheden. Een tabel is, als je niet heel erg goed oplet, volstrekt ontoegankelijk voor gehandicapten en zoekmachines. Het lezen van een tabel is ongeveer te vergelijken met het lezen van een krant van links naar rechts: niet per kolom, maar per regel. Dat gaat dus alleen maar goed bij een echte tabel, zoals een spreadsheet. In alle andere gevallen garandeert 'n tabel volstrekte ontoegankelijkheid voor schermlezers en dergelijke en als extra bonus vaak 'n lagere plaats in een zoekmachine.
Frames horen bij een volstrekt verouderde techniek, die heel veel nadelen met zich meebrengt. <iframe>'s hebben voor een deel dezelfde nadelen. Eén van die nadelen is dat de verschillende frames voor zoekmachines, schermlezers, en dergelijke als los zand aan elkaar hangen, omdat ze los van elkaar worden weergegeven. Ze staan wel naast elkaar op het scherm, maar er zit intern geen verband tussen.

Als je 'n stuk code vaker wilt gebruiken, zoals 'n menu dat op elke pagina hetzelfde is, voeg dat dan in met PHP. Dan wordt de pagina niet pas in de browser, maar al op de server samengesteld. Hierdoor zien zoekmachines, schermlezers, en dergelijke één pagina, net zoals wanneer je maar één pagina met html zou hebben geschreven.

(Je kunt ook invoegen met behulp van SSI (Server Side Includes). Maar tegenwoordig kun je beter PHP dan SSI gebruiken, omdat SSI min of meer aan het uitsterven is en PHP veel meer mogelijkheden heeft. Op deze site wordt in enkele voorbeelden nog SSI gebruikt, maar zodra die worden bijgewerkt, gaat dat vervangen worden door PHP.)
Geef de taal van het document aan, en bij woorden en dergelijke die afwijken van die taal de afwijkende taal met behulp van lang="...". Op deze site gebeurt dat maar af en toe, omdat de tekst (en vooral de code) een mengsel is van Engels, Nederlands en eigengemaakte namen. Dat soort teksten is gewoon niet goed in te delen in een taal. Maar bij enigszins 'normale' teksten hoor je een taalwisseling aan te geven.
Gebruik de tag <abbr> bij afkortingen. Doe dat de eerste keer op een pagina samen met de title-eigenschap: <abbr title="ten opzichte van">t.o.v.</abbr>. Daarna kun je op dezelfde pagina volstaan met <abbr>t.o.v.</abbr>. Doe je dit niet, dan is er 'n grote kans dat 'n schermlezer 't.o.v.' uit gaat spreken als 'tof', en 'n zoekmachine kan er ook geen chocola van maken.
Geef een verandering niet alleen door kleur aan. Een grote groep mensen heeft moeite met het onderscheiden van kleuren en/of het herkennen van kleuren. Verander bijvoorbeeld een ronde rode knop niet in een ronde groene knop, maar in een vierkante groene knop. Door ook de vorm te veranderen, is het herkennen van de verandering niet alleen van een kleur afhankelijk.
Zorg voor voldoende contrast tussen achtergrond- en voorgrondkleur, tussen background-color en color. Soms zie je heel lichtgrijze tekst op een donkergrijze achtergrond, en dan ook nog in een mini-formaat. Dat is dus voor heel veel mensen stomweg volledig onleesbaar. Een uitstekende online contrastchecker is bijvoorbeeld te vinden op snook.ca.
De spider van 'n zoekmachine, schermlezers, en dergelijke kunnen geen plaatjes 'lezen'. Het is soms verbazingwekkend om te zien hoe veel, of eigenlijk: hoe weinig tekst er overblijft op een pagina, als de plaatjes worden weggehaald. Hetzelfde geldt voor die fantastisch mooie flash-pagina's, als daarbij geen voorzieningen voor dit soort programma's zijn aangebracht. (Omdat flash wordt uitgefaseerd en op steeds minder machines is te bekijken, zijn flash-pagina's hoe dan ook geen goed idee meer.)

Op Linux kun je met Lynx kijken, hoe je pagina eruitziet zonder plaatjes en dergelijke, als echt alleen de tekst overblijft. Een installatie-programma voor Lynx op Windows is te vinden op invisible-island.net/lynx.

Ook kun je in Windows het gratis programma WebbIE installeren. WebbIE laat de pagina zien, zoals een tekstbrowser en dergelijke hem zien. WebbIE is te downloaden vanaf www.webbie.org.uk. (LET OP: kies voor 'Install WebbIE 4 Web Browser Now'. Dat is – op het moment van schrijven – de een na bovenste knop. Als je voor de bovenste download kiest, krijg je 'n hele berg hulpprogramma's erbij, waar je voor het testen niets aan hebt.)
Ten slotte kun je je pagina nog online op toegankelijkheid laten controleren op 'n behoorlijk aantal sites, zoals:

lowvision.support: laat zien hoe een kleurenblinde de site ziet. Engelstalig.

wave.webaim.org: deze laat grafisch zien, hoe de toegankelijkheid is. Engelstalig. Deze tester is ook als extensie in Firefox en Google Chrome te installeren.

Op de pagina met links kun je onder Toegankelijkheid links naar meer tests en dergelijke vinden.

Getest in

Laatst gecontroleerd op 3 juni 2018.

Onder dit kopje staat alleen maar, hoe en waarin is getest. Alle eventuele problemen, ook die met betrekking tot zoomen, lettergroottes, toegankelijkheid, uitstaan van JavaScript en/of css, enzovoort staan iets hieronder bij Bekende problemen (en oplossingen). Het is belangrijk dat deel te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!

Opmerking over Opera:

De uitvoeringen van Opera jongen als de konijnen. Voor Android bijvoorbeeld zijn er op dit moment al vijf verschillende uitvoeringen. Er wordt alleen in de hieronder vermelde uitvoering getest, want dit is niet meer bij te benen. Op Windows 10 Mobile wordt Opera Mini niet getest, omdat die bij installeren gelijk advertenties begon te spuiten, die niet waren te sluiten.

Dit voorbeeld is getest op de volgende systemen:

Desktopcomputers

Windows 7 (1280 x 1024 px, resolution 96 dpi):
Firefox, UC Browser, Google Chrome, Opera en Internet Explorer 11, in grotere en kleinere browservensters.

OS X 10.11.6 ('El Capitan') (1680 x 1050 px, resolution: 96: dpi, device-pixel-ratio: 1):
Firefox, Safari, Opera en Google Chrome, in grotere en kleinere browservensters.

Linux (Kubuntu 14.04 LTS, 'Trusty Tahr') (1280 x 1024 px, resolution: 96 dpi):
Firefox, Opera en Google Chrome, in grotere en kleinere browservensters.

Laptops

Windows 8.1 (1366 x 768 px, resolution: 96 dpi):
Bureaublad-versie: Firefox, UC Browser, Google Chrome, Opera en Internet Explorer 11, in grotere en kleinere browservensters.
Startscherm-versie: Internet Explorer 11.

Windows 10 (1600 x 900 px, resolution: 96 dpi):
Firefox, UC Browser, Google Chrome, Opera, Internet Explorer 11 en Edge, in grotere en kleinere browservensters.

Tablets

iPad met iOS 9.3.5 (1024 x768 px, device-pixel-ratio: 1):
Safari, Chrome for iOS, UC Browser, Firefox (alle portret en landschap).
Opera Mini (Opera Turbo) portret en landschap.

iPad met iOS 11.4 (2048 x 1536 px, device-pixel-ratio: 2 ('retina'):
Safari, Chrome for iOS, Firefox, Microsoft Edge (alle portret en landschap).
Opera Mini (Opera Turbo) portret en landschap.

Android 4.4.2 ('Kitkat') (1280 x 800 px, resolution: 96 dpi):
Android browser, UC Browser, Firefox en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Android 4.4.2 ('Kitkat') (2560 x 1600 px, resolution: 192 dpi):
Android browser, UC Browser, Firefox en Chrome (alle portret en landschap).
pera Mini (besparingen uitgeschakeld) portret en landschap.

Android 6.0 ('Marshmallow') (1920 x 1200 px, resolution: 144 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Android 7.0 ('Nougat') (1920 x 1200 px, resolution: 144 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox, Microsoft Edge en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Smartphones

Windows 10 Mobile (1280 x 720 px, resolution: 192 dpi):
Edge en UC browser (portret en landschap).

Android 4.1.2 ('Jelly Bean') (800 x 480 px, resolution: 144 dpi):
Chrome, Android browser, UC Browser en Firefox (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Android 7.0 ('Nougat') (1280 x 720 px, resolution: 192 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox, Microsoft Edge en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Er is op de aan het begin van dit hoofdstukje genoemde controledatum getest in de meest recente versie van de browser, die op het betreffende besturingssysteem kon draaien. Het aantal geteste browsers en systemen is al tamelijk fors, en als ook nog rekening gehouden moet worden met (zwaar) verouderde browsers, is het gewoon niet meer te doen. Surfen met een verouderde browser is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken.

In- en uitzoomen en – voor zover de browser dat kan – een kleinere en grotere letter zijn ook getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan 200%.

Er is getest met behulp van muis en toetsenbord, behalve op iOS, Android en Windows 10 Mobile, waar een touchscreen is gebruikt. Op Windows 8.1 en 10 is getest met touchscreen, touchpad, toetsenbord, muis, en – waar dat zinvol was – op een combinatie daarvan.

Als JavaScript is gebruikt, is op de desktop ook getest zonder JavaScript. (Op iOS, Android en Windows 10 Mobile is niet getest zonder JavaScript, omdat je JavaScript in een toenemend aantal mobiele browsers niet uit kunt zetten. Bovendien is een mobiel apparaat zonder JavaScript niet veel meer dan een duur en groot uitgevallen horloge.) Ook is getest zonder css en – als afbeeldingen worden gebruikt – zonder afbeeldingen.

Schermlezers en dergelijke

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA, TalkBack, VoiceOver, ChromeVox en Verteller.

Lynx is een browser die alleen tekst laat zien en geen css gebruikt. Er is getest op Linux.

WebbIE. is een browser die gericht is op mensen met een handicap. Er is getest op Windows7. (LET OP: kies voor 'Install WebbIE 4 Web Browser Now'. Dat is – op het moment van schrijven – de een na bovenste knop. Als je voor de bovenste download kiest, krijg je 'n hele berg hulpprogramma's erbij, waar je voor het testen niets aan hebt.)

NVDA is een schermlezer, zoals die door blinden wordt gebruikt. Er is getest op Windows 7 en Windows 10 in combinatie met Firefox.

(Althans: dat was de bedoeling. Maar sinds Firefox de browsers radicaal heeft verbeterd, laat de combinatie Firefox/NVDA op Windows 7 de browser voortdurend crashen. Daarom is op Windows 7 getest in combinatie met Google Chrome.)

TalkBack is een in Android ingebouwde schermlezer. Er is getest in combinatie met Chrome op Android 4.4,2, 6.0 en 7.0.

VoiceOver is een in iOS en OS X ingebouwde schermlezer. Er is getest in combinatie met Safari op iOS (9.3.5 en 11.2.6) en OS X 10.11.6.

ChromeVox is een schermlezer in de vorm van een extensie bij Google Chrome. Er is getest op een systeem met Kubuntu Linux 14.04.

Verteller (Narrator) is een in Windows 10 ingebouwde schermlezer. Er is getest in combinatie met Edge.

(Voor de bovenstaande programma's zijn links naar sites met uitleg en dergelijke te vinden op de pagina met links onder Toegankelijkheid → Blinden en slechtzienden.)

Als het voorbeeld in deze programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde.

Eventuele problemen in schermlezers (en eventuele aanpassingen om die te voorkomen) staan iets hieronder bij Bekende problemen (en oplossingen).

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld 'n Blackberry. Er is een kans dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je soms (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Samsung Internet op Android werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar geen beginnen aan.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen (en oplossingen) vermeld.

Nieuwe browsers worden pas getest, als ze uit het bèta-stadium zijn. Anders is er 'n redelijke kans dat je tegen 'n bug zit te vechten, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kunnen niet worden beantwoord, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enzovoort in wel geteste browsers: graag! Dat kan op het forum.)

Bekende problemen (en oplossingen)

Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.

Als je hieronder geen oplossing vindt voor een probleem dat met dit voorbeeld te maken heeft, kun je op het forum proberen een oplossing te vinden voor je probleem. Om forumspam te voorkomen, moet je je helaas wel registreren, voordat je op het forum een probleem kunt aankaarten.

Bij toegankelijkheid is er vaak geen goed onderscheid te maken tussen oplossing en probleem. Zonder (heel simpele) aanpassingen heb je vaak 'n probleem, en omgekeerd. Daarom staan bij toegankelijkheid aanpassingen en problemen bij elkaar.

Voor zover van toepassing wordt eerst het ontbreken van JavaScript, css en/of afbeeldingen besproken. Vervolgens problemen en aanpassingen met betrekking tot toegankelijkheid voor specifieke groepen bezoekers, zoals zoomen en andere lettergrootte, Tab-toets, tekstbrowsers en schermlezers. Als laatste volgen algemene problemen in alle of in specifieke browsers.

Als in een onderdeel één of meer problemen worden besproken, staat in een rood kadertje een korte samenvatting daarvan. Bij een onderwerp over toegankelijkheid zijn er soms geen problemen, maar alleen aanpassingen. In dat geval staat in een groen kadertje 'Geen problemen'.

Zonder JavaScript

Probleem: alles werkt, maar tonen en verbergen van het menu wordt in de browsergeschiedenis opgeslagen.

Browsers slaan bezochte pagina's op in de browsergeschiedenis. Met behulp van de Terug‑ en Vooruit-toets, of met toetscombinaties als Alt+← en Alt+→, kan door deze geschiedenis worden gebladerd.

Omdat het menu wordt getoond en verborgen met behulp van een link, worden ook deze links in de browsergeschiedenis opgeslagen. Als het menu is geopend en weer gesloten, en je gebruikt de Terug-toets of Alt+←, wordt het menu weer geopend. Want dat is de vorige gevolgde link.

Daarom wordt met behulp van JavaScript voorkomen dat links binnen de pagina worden opgeslagen in de browsergeschiedenis. Alle links naar een andere pagina worden gewoon opgeslagen, maar links naar ankers binnen de pagina met het voorbeeld niet. Omdat het menu wordt geopend en gesloten met dit soort links, worden deze links niet opgeslagen in de browsergeschiedenis.

Als JavaScript uitstaat, werkt alles nog gewoon. Alleen valt de browser dan terug op het standaardgedrag en wordt ook het openen en sluiten van het menu in de geschiedenis opgeslagen.

In Android browser, Opera en UC browser op Android 4.1.2 en 4.4.2 werkt dit script niet. In deze browsers worden bezochte links altijd in de geschiedenis opgeslagen.

Zonder css

Geen problemen.

Zonder css werkt alles, maar het uiterlijk is – uiteraard – volkomen anders.

Het menu staat boven de Latijnse tekst en is voortdurend zichtbaar. Bovendien zijn ook het teken ≡ en het daaronder staande 'Menu' zichtbaar, en de twee letters 'X' uit de sluitkruisjes. Die tekens en woorden zijn hier overbodig, maar kwaad kunnen ze verder niet.

Gebruikers Tab-toets

Geen problemen.

Omdat het menu wordt getoond en verborgen met behulp van doodgewone links, kan het met de Tab-toets worden geopend en gesloten.
Als het menu is gesloten, negeert de Tab-toets de links in het menu. Alleen als het menu is geopend, worden deze links door de Tab-toets bezocht.
Omdat het menu mogelijk per ongeluk wordt geopend, is bovenaan het menu ook een sluitmogelijkheid aangebracht. Hierdoor hoeven gebruikers van de Tab-toets niet eerst door tien links heen, voordat ze bij de sluitmogelijkheid onder het menu aankomen.
Op het scherm staan de twee sluitkruisjes links‑ en rechtsboven het menu. Bij gebruik van de Tab-toets wordt eerst het sluitkruisje linksboven bezocht, dan de tien externe links, en als laatste het sluitkruisje rechtsboven. Dit is de volgorde, zoals deze elementen in de html staan. Het lijkt ook de meest logische volgorde voor de Tab-toets, dus de volgorde is niet met tabindex aangepast.
Als een link 'focus' heeft, kan deze worden gevolgd door het indrukken van Enter. De focus wordt in alle browsers aangegeven door een kadertje. Dit kadertje is hier verwijderd, omdat het in dit menu erg onduidelijk (en lelijk) is.

Omdat het belangrijk is dat gebruikers van de Tab-toets weten, welke link focus heeft (en dus gevolgd kan worden door het indrukken van Enter), verkleurt de achtergrond van de link. Bovendien wordt de tekst in de link vet, zodat ook voor kleurenblinden duidelijk is, welke link focus heeft.

Tekstbrowsers

Geen problemen.

Lynx en WebbIE Tonen beide het menu en de tekst. Lynx toont de inhoud van aria-label niet, maar wel het teken ≡, 'Menu' en twee keer de letter 'X'. WebbIE toont dat juist niet, maar wel de inhoud van aria-label.

Schermlezers

Geen problemen.

In alle geteste schermlezers is het menu te openen en te sluiten. Als het menu niet zichtbaar is, worden de links uit het menu niet voorgelezen. Als het menu wel zichtbaar is, worden de links wel voorgelezen.

Omdat voor het verbergen van het menu visibility; hidden; is gebruikt, negeren schermlezers het menu, als dit niet zichtbaar is.

Zoomen en lettergroottes

Probleem: bij inzoomen (vergroten) vallen soms wat lijntjes in het menu weg.

Bij inzoomen (vergroten) vallen soms wat lijntjes rondom de links in het menu weg. Dit heeft te maken met het afronden door browsers. Soms valt een lijntje weg, terwijl het bij een volgende vergroting weer verschijnt.

Alles werkt verder gewoon, zoals het hoort te werken.

Probleem: bij inzoomen (vergroten) blijven de balk bovenin en het menu op Android en Windows 10 Mobile vaak niet op de juiste plaats staan.

In de meeste browsers op Android en Windows 10 Mobile blijven de balk bovenin en het menu bij inzoomen (vergroten) niet op de juiste plaatst staan. Een lijstje met de precieze afwijkingen voor elke browser is niet zo zinvol, want elke browser heeft eigen afwijkingen. Bovendien heeft dezelfde browser op 'n andere versie van Android vaak weer 'n andere afwijking.

Maar het belangrijkste: menu en dergelijke zijn gewoon bereikbaar, maar je moet soms even naar de juiste plaats terug scrollen.

Probleem: op de site staan bij een andere lettergrootte ≡ en 'Menu' niet helemaal op de juiste hoogte.

Alleen op de site: bij een andere lettergrootte staan ≡ en 'Menu' niet helemaal op de juiste hoogte. Op de site staan twee menu's onder elkaar: het menu voor de site en het menu voor het voorbeeld. Hierdoor is dit tamelijk lastig te corrigeren. Normaal genomen zul je niet op deze manier twee menu's onder elkaar hebben staan.

Omdat dit verder niet van belang is voor het voorbeeld, is hier verder niets aan gedaan.

Firefox op Android

Probleem: het sluitkruisje (de 'X') staat iets te hoog.

Firefox op Android heeft regelmatig nogal wat moeite met de juiste regelhoogte. Vermoedelijk is dat ook hier de oorzaak. Alles werkt gewoon, maar het ziet er iets minder netjes uit.

Overigens kan dat sluitkruisje probleemloos door een andere constructie worden vervangen, waardoor je dit desgewenst kunt oplossen.

UC browser op iOS

Probleem: de balk bovenin en het menu scrollen mee.

UC browser op iOS ondersteunt een fixed positie niet. Hierdoor scrollen de balk bovenin en het menu mee met de pagina. Alles werkt gewoon, maar mogelijk moet je terug naar boven scrollen om de links in het menu te kunnen gebruiken.

(Dit is trouwens wel opmerkelijk, want Apple verplicht andere browsers op iOS om de weergave-machine van Safari te gebruiken.)

Opera Mini op iOS en Android

Probleem: als je 'Menu' aanraakt in plaats van het ≡-teken, opent het menu niet.

Het woordje 'Menu' staat in een <span> buiten de link, die het menu opent. Als je het woordje 'Menu' aanraakt of -klikt, opent het menu daardoor niet. Om dit op te lossen wordt pointer-events: none; gebruikt. Nu wordt de aanraking of klik doorgegeven aan de onder de <span> zittende link en opent het menu ook bij aanraken of -klikken van 'Menu'.

Opera Mini ondersteunt pointer-events niet. Een probleem is dit echter niet, want het woordje 'Menu' is tamelijk klein, dus je moet echt verrekte goed mikken om precies dat woordje te raken en niet het ≡-teken.

Alle browsers

Probleem: links naar een anker komen te hoog te staan.

In het voorbeeld speelt dit probleem niet, omdat er geen links binnen de pagina zijn.

Een link naar een anker is een link naar een plaats in de pagina. Dat kan vanaf een andere pagina, maar ook binnen de pagina:

<a href="#anker">Naar anker</a>

<p id="anker">En ik ben het anker</p>

Bij klikken op 'Naar anker' hoort p#anker bovenaan het venster van de browser te worden gezet. En dat is ook precies, wat er gebeurt. Met andere woorden: het anker werkt gewoon, zoals het hoort te werken.

Alleen staat bovenaan het browservenster een vaste <div>, de grijze balk. Het anker komt wel netjes bovenaan het venster te staan, maar verdwijnt onder de grijze balk. Dit is heel simpel op te lossen.

In het voorbeeld is de <div> 2 rem hoog. Bij de ankers, zoals de p#anker hierboven, moet je de volgende css toevoegen:

#anker {

margin-top: -2rem;

padding-top: 2rem;

}

De negatieve marge zet p#anker 2 rem naar boven. Alleen die marge heeft geen invloed op het anker: bij klikken op 'Naar anker' komt p#anker nog steeds bovenaan het browservenster, en dus onder de header, te staan. Bovendien staat p#anker nu over het erboven zittende element heen, wat het lezen er niet makkelijker op maakt.

De negatieve marge heeft de hele p#anker 2 rem hoger gezet.

De padding van 2 rem aan de bovenkant zet de inhoud van p#anker weer 2 rem omlaag. Niet p#anker zelf. p#anker staat dus nog steeds over het element erboven heen, en onder de header. Maar de inhoud van p#anker staat nu weer 2 rem lager, en daarmee onder de header, en onder de erboven zittende elementen. Zoals vaker bij html en css word je belazerd, waar je bij staat, maar voor het oog ziet het er goed uit.

Als je 'n achtergrondkleur of zoiets in het anker gebruikt, zul je daar nog even mee moeten stoeien. Als de lettergrootte van het anker anders is dan die van de header, moet je het aantal rem mogelijk aanpassen. Maar in principe is dit altijd op te lossen met deze truc.

Probleem: bij scrollen met Spatiebalk, Shift+Spatiebalk, PgDn en PgUp wordt te veel gescrold.

Sommige mensen gebruiken niet de muis, maar de spatiebalk, Shift+Spatiebalk, PgDn en PgUp om de pagina steeds een browservenster omhoog of omlaag te scrollen. Dat kan in dit voorbeeld ook. Alleen is er dan één probleem: de pagina wordt inderdaad netjes de hoogte van een venster omlaag of omhoog gescrold. Maar dat is voor <main>, waar het eigenlijk om gaat bij scrollen, te veel. Boven <main> staat nog een grijze balk, en als <main> een volledig venster scrolt, valt daardoor een klein stukje van de tekst in <main> weg.

In dit voorbeeld speelt dit probleem niet, omdat browsers wat speling nemen: bij omlaag scrollen worden de onderste (ongeveer) drie regels bovenaan het browser nogmaals getoond. Maar als de grijze balk bovenaan het browservenster hoger zou zijn, kan dit een probleem zijn.

Dit is simpel op te lossen met een beetje JavaScript:

<script> function corrigeerScrollen(e) { var header = document.getElementsByTagName("header")[0].offsetHeight, key = e.which;
if ((key === 33) || (e.shiftKey && key === 32)) { e.preventDefault(); window.scrollBy(0, -(window.innerHeight - header – 50)); } else if (key === 34 || key === 32) { e.preventDefault(); window.scrollBy(0, window.innerHeight - header – 50); } }
document.addEventListener("keydown", corrigeerScrollen); </script>

Dit script stelt eerst de hoogte van het fixed gepositioneerde element aan de bovenkant van de pagina vast. Dat gebeurt in de vierde regel, waarbij er in dit script van wordt uitgegaan dat het fixed gepositioneerde element de id 'header' heeft. Bij een andere id moet dit uiteraard worden aangepast. (Je kunt ook naar andere dingen dan een id zoeken. Met wat kleine aanpassingen kan ook worden gezocht naar een element, een class, enzovoort.)

Als Spatiebalk, Shift+Spatiebalk, PgDn of PgUp zijn ingedrukt, wordt de pagina op de normale manier gescrold, maar de hoogte van het fixed gepositioneerde element wordt van de te scrollen afstand afgetrokken. (En nog 50 px extra, zodat het standaardgedrag zoveel mogelijk wordt benaderd.)

Dit script kun je voor helemaal onderaan gelijk voor </body> zetten of, als het op meer pagina's wordt gebruikt, installeren als extern script.

Wijzigingen

Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.

3 juni 2018:

Nieuw opgenomen.

Inhoud van de download en licenties

De inhoud van deze download kan vrij worden gebruikt, met drie beperkingen:

* Sommige onderdelen die van 'n andere site of zo afkomstig zijn, vallen mogelijk onder een of andere licentie. Dat is hieronder bij het betreffende onderdeel te vinden.

* Je gebruikt het materiaal uit deze download volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte code en dergelijke zitten. Voor eventuele schade die door gebruik van materiaal uit deze download ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Dit voorbeeld (en de bijbehorende uitleg en dergelijke) wordt regelmatig bijgewerkt. Het is daarom niet toegestaan dit voorbeeld (en de bijbehorende uitleg en dergelijke) op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

menu-125-dl.html: de pagina met het voorbeeld.

menu-125.pdf: deze uitleg (aangepast aan de inhoud van de download).

menu-125-inhoud-download-en-licenties.txt: een kopie van de tekst onder dit kopje (Inhoud van de download en licenties).

125-css-dl:

menu-125-dl.css: stylesheet voor menu-125-dl.html.

menu-125-hulp-dl.css: stylesheet voor de elf hulppagina's achter de links in menu en tekst.

125-files-dl:

De elf hulppagina's achter de links in het voorbeeld. (pagina-1-dl.html tot en met pagina‑10-dl.html horen bij de links in het menu, pagina-11-dl.html hoort bij de link in de Latijnse tekst.)

HTML

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg onderstippeld blauw. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

In de html hieronder wordt alleen de html besproken, waarover iets meer is te vertellen. Een <h1> bijvoorbeeld wordt in de regel niet genoemd, omdat daarover weinig interessants valt te melden. (Als bijvoorbeeld het uiterlijk van de <h1> wordt aangepast met behulp van css, staat dat verderop bij de bespreking van de css.)

Zaken als een doctype en charset hebben soms wat voor veel mensen onbekende effecten, dus daarover wordt hieronder wel een en ander geschreven.

<!DOCTYPE html>

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.

Gebruik het volledige doctype, inclusief de eventuele url, anders werkt het niet goed.

Het hier gebruikte doctype is dat van html5. Dit kan zonder enig probleem worden gebruikt: het werkt zelfs in Internet Explorer 6.

<html lang="nl">

De toevoeging lang="nl" bij <html> geeft aan dat de pagina in het Nederlands is. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke.

<meta charset="utf-8">

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code, dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (ä en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de <head>, omdat hij anders door sommige browsers niet wordt gelezen.

In html hoeft deze regel niet langer te zijn, dan wat hier staat.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobiele apparaten variëren enorm in grootte. En dat is een probleem. Sites waren, in ieder geval tot enkele jaren geleden, gemaakt voor desktopbrowsers. En die hebben, in vergelijking met bijvoorbeeld een smartphone, heel brede browservensters. Hoe moet je op 'n smartphone een pagina weergeven, die is gemaakt voor de breedte van een desktop? Je kunt natuurlijk wachten tot álle sites zijn omgebouwd voor smartphones, tablets, enzovoort, maar dan moet je waarschijnlijk heel erg lang wachten.

Mobiele browsers gokken erop dat een pagina een bepaalde breedte heeft. Safari voor mobiel bijvoorbeeld gaat ervan uit dat een pagina 980 px breed is. De pagina wordt vervolgens zoveel versmald dat hij binnen het venster van het apparaat past. Op een iPhone wordt de pagina dus veel smaller dan op een iPad. Vervolgens kan de gebruiker inzoomen op het deel van de pagina dat hij of zij wil zien.

Dit betekent ook dat bij het openen van de pagina de tekst meestal heel erg klein wordt weergegeven. (Meestal, want niet alle browsers en apparaten doen het op dezelfde manier.) Niet erg fraai, maar bedenk maar 'ns 'n betere oplossing voor bestaande sites.

Nieuwe sites of pagina's kunnen echter wel rekening houden met de veel kleinere vensters van mobiele apparaten. In dit voorbeeld bijvoorbeeld wordt de pagina nooit breder dan het venster.

Maar die stomme mobiele browser weet dat niet, dus die gaat ervan uit dat ook deze pagina 980 px breed is, en verkleint die dan. Dat is ongeveer even behulpzaam als de gedienstige kelner die behulpzaam de stoel naar achteren trekt, net als jij wilt gaan zitten.

Om de door de browser aangeboden hulp vriendelijk maar beslist te weigeren, wordt deze tag gebruikt. Hiermee geef je aan dat de pagina is geoptimaliseerd voor mobiele apparaten.

Een iPad in portretstand bijvoorbeeld is 768 px breed. De kreet width=device-width zegt tegen de mobiele browser dat de breedte van de weer te geven pagina gelijk is aan de breedte van het apparaat. Voor een iPad in portretstand dus 768 px.

Er staat nog een tweede deel in de tag: initial-scale=1. Sommige mobiele apparaten zoomen een pagina gelijk in of uit. Ook weer in een poging behulpzaam te zijn. Ook dat is hier niet nodig. Er is ook een instructie om zoomen helemaal onmogelijk te maken, maar die wordt niet gebruikt. De bezoeker kan zelf nog gewoon zoomen, wat belangrijk is voor mensen die wat slechter zien.

<link rel="stylesheet" href="125-css-dl/menu-125-dl.css">

Dit is een koppeling naar een externe stylesheet (stijlbestand), waarin de css staat. In html5 is de toevoeging type="text/css" niet meer nodig, omdat dit standaard al zo staat ingesteld. Je moet uiteraard de naam van en het pad naar de stylesheet aanpassen aan de naam en plaats, waar je eigen stylesheet staat.

Voordeel van een externe stylesheet is onder andere dat deze geldig is voor alle pagina's, waaraan deze is gelinkt. 'n Verandering in de lay-out hoef je dan maar in één enkele stylesheet aan te brengen, in plaats van in elke pagina apart. Op een grotere site kan dit ontzettend veel werk schelen. Bovendien hoeft de browser zo'n externe stylesheet maar één keer te downloaden, ongeacht hoeveel pagina's er gebruik van maken. Zou je de css in elke pagina opnieuw aanbrengen, dan worden de te downloaden bestanden veel groter.

In dit voorbeeld heeft een extern stylesheet eigenlijk geen nut, omdat er maar één pagina is die dit stylesheet gebruikt. In dit geval kun je de css beter in de <head> van de html-pagina zelf zetten. Voor de omvang maakt het hier niets uit, want de css wordt hoe dan ook altijd precies één keer gedownload, en nooit vaker. Voor het onderhoud maakt het ook geen verschil, want ook hier hoef je de css maar op één plaats te wijzigen. Maar het scheelt wel een extra aanroep naar de server, omdat geen apart stylesheet hoeft te worden gedownload.

Dat opnemen in de <head> gaat heel simpel: je kopieert gewoon het hele stylesheet en zet die bovenin de <head>, tussen <style> en </style>:

<style> body {color: black;} (...) rest van de css (...) div {color: red;} </style>

Maar zodra een stylesheet op meerdere pagina's wordt gebruikt, wat meestal het geval zal zijn, is een extern stylesheet beter.

(De reden dat er toch externe stylesheets zijn, terwijl hierboven omstandig wordt beweerd dat dat in dit voorbeeld eigenlijk geen nut heeft: overzichtelijkheid. Nu kun je html en css los van elkaar bekijken.)

De hulppagina's achter de knoppen hebben een gezamenlijke stylesheet menu-125-hulp-dl.css. Deze wordt hier verder niet besproken, omdat hij uiterst simpel is. Op de site is deze met de stylesheet voor het voorbeeld zelf (en nog andere pagina's) gecombineerd tot één gezamenlijke stylesheet.

<a id="open" href="#nav" aria-label="Open menu">≡</a>

In deze link zit het teken ≡, waarmee het menu kan worden geopend. Dit teken is eigenlijk een wiskundig symbool met de naam 'identical to'. Schermlezers zouden 'identical to' voorlezen, wat een ietwat vreemde tekst is voor een link, waarmee je 'n menu opent. Om dat te voorkomen wordt aan de link de WAI-ARIA-code aria-label toegevoegd met daarin de te tekst 'Open menu'. Nu wordt door schermlezers de tekst in de link (hier alleen het teken ≡) genegeerd en in plaats daarvan 'Open menu' voorgelezen.

(Niet alle schermlezers herkennen het symbool. In dat geval is er een kans dat helemaal niets wordt voorgelezen, of de inhoud van href '#nav'. Wat niet ook niet echt geweldig is.)

Voor de weergave op het scherm maakt dit verder niets uit, alleen schermlezers gebruiken het aria-label.

<span aria-hidden="true">Menu</span>

In deze <span> zit het woordje 'Menu' dat onder het teken ≡ staat. Normaal genomen zou je dit woordje ook binnen de link die het menu opent zetten. Maar bij hoveren over de link wordt de inhoud ervan vet, en daardoor wordt dit woordje net te breed.

Door 'Menu' in een <span> buiten de link te zetten wordt het niet vet bij hoveren over de link.

Hier gelijk boven is met de WAI-ARIA-code aria-label al de tekst 'Open menu' opgegeven voor schermlezers. Daarom wordt met behulp van aria-hidden het woordje 'Menu' hier verborgen, want anders zouden schermlezers 'Open menu menu' voorlezen.

<nav id="nav">

De <nav> heeft een id nodig, omdat in het menu wordt geopend met behulp van een link naar de <nav>. En zo'n link binnen de pagina werkt alleen, als het doel-element een id heeft.

<li><a class="sluit" href="#_" aria-label="Sluit en skip menu">X</a></li>

De 'X' in deze link is het grote rode sluitkruisje linksboven het menu. Schermlezers zouden de letter 'X' voorlezen, wat niet echt duidelijk is. Om dat te voorkomen wordt aan de link de WAI-ARIA-code aria-label toegevoegd met daarin de te tekst 'Sluit en skip menu'. Nu wordt door schermlezers de tekst in de link (hier lleen de letter 'X') genegeerd en in plaats daarvan 'Sluit en skip menu' voorgelezen.

Voor de weergave op het scherm maakt dit verder niets uit, alleen schermlezers gebruiken het aria-label.

Als bestemming voor de link wordt '#_' opgegeven. Een '#' aan het begin van de bestemming geeft aan dat de link binnen de pagina zit. Achter de '#' zit dan normaal genomen de id van het element, waar de link naar toe leidt (het 'anker'). In dit geval zou dat '_' zijn.

Op deze pagina is helemaal geen element met een id="_" aanwezig, dus de link leidt nergens heen. Maar het toevoegen van '_' aan de '#' voorkomt dat de pagina terug naar boven springt, wat wel zou gebeuren, als de link als doel alleen '#' heeft.

Je zou ook '#-ik-ben-verliefd-op-je-zus' als doel kunnen nemen, als het maar een niet bestaand doel is.

(Er is een andere manier om een link uit te schakelen met behulp van preventDefault() in JavaScript. Dat schakelt de link echter helemaal uit, waardoor het menu niet meer zou sluiten. Bovendien is deze manier met het niet bestaande anker '#_' uiterst simpel en effectief.)

<a class="sluit" href="#_" aria-label="Einde menu bereikt. Sluit menu">X</a>

In deze link zit de 'X' van het sluitkruisje rechtsboven het menu. Het verhaal voor deze link is precies hetzelfde als voor de link gelijk hierboven, alleen is de tekst bij aria-label iets anders.

Deze link is, in tegenstelling tot de link met het sluitkruisje hier gelijk boven, niet binnen de <ul> met de rest van het menu gezet. Sommige schermlezers kunnen in één keer de rest van een <ul> passeren en naar het eerste element na </ul> gaan. Deze schermlezers zouden hierdoor de link om het menu te sluiten missen, als deze binnen de <ul> zou staan.

Door dit tweede sluitkruisje onder </ul> te zetten, wordt dit voorkomen.

<main lang="la">

Als opvultekst is Latijnse tekst gebruikt. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke. Daarom wordt met lang="la" aangegeven dat de tekst binnen deze <p> Latijn is. (En tot mijn niet geringe verbazing blijkt een schermlezer als NVDA dat dan, voor zover ik dat kan beoordelen, op de juiste manier voor te lezen.)

<p lang="nl"><a href="125-files-dl/pagina-11-dl.html">Dit is een extra link</a></p>

Deze <p> zit binnen de hier gelijk boven beschreven <main>. Bij die <main> is opgegeven dat de taal Latijn is. Die taal geldt voor alle nakomelingen van <main>. De taal binnen deze <p> is echter Nederlands, daarom wordt dat met lang="nl" voor deze <p> (en alles daarbinnen) weer even teruggedraaid.

CSS

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code) is in de hele uitleg onderstippeld blauw. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

Technisch gezien is er geen enkel bezwaar om de css in de stylesheet allemaal achter elkaar op één regel te zetten:

div#header-buiten {position: absolute; right: 16px; width: 100%; height: 120px; background: yellow;} div p {margin-left 16px; height: 120px; text-align: center;}

Maar als je dat doet, garandeer ik je hele grote problemen, omdat het volstrekt onoverzichtelijk is. Beter is het om de css netjes in te laten springen:

              div#header-buiten {
		position: absolute;
		right: 16px;
		width: 100%;
		height: 120px;
		background: yellow;
	}

	div p {
		margin-left: 16px;
		height: 120px;
		text-align: center;
	}

Hiernaast is het heel belangrijk voldoende commentaar (uitleg) in de stylesheet te schrijven. Op dit moment weet je waarschijnlijk (hopelijk...), waarom je iets doet. Maar over vijf jaar kan dat volstrekt onduidelijk zijn. Op deze site vind je nauwelijks commentaar in de stylesheets, maar dat heeft een simpele reden: deze uitleg is in feite één groot commentaar.

Op internet zelf is het goed, als de stylesheet juist zo klein mogelijk is. Dus voor het uploaden kun je normaal genomen het beste het commentaar weer verwijderen. Veel mensen halen zelfs alles wat overbodig is weg, voordat ze de stylesheet uploaden. Inspringingen bijvoorbeeld zijn voor mensen handig, een computer heeft ze niet nodig.

Je hebt dan eigenlijk twee stylesheets. De uitgebreide versie waarin je dingen uitprobeert, verandert, enzovoort, met commentaar, inspringingen, en dergelijke. Dat is de mensvriendelijke versie. Daarnaast is er dan een stylesheet die je op de echte site gebruikt: een gecomprimeerde versie.

Dat comprimeren kun je met de hand doen, maar er bestaan ook hulpmiddelen voor. Op de pagina met links kun je onder het kopje Gereedschap → Snelheid, testen, gzip, comprimeren (inclusief theorie) links naar sites vinden, waar je bestanden kunt comprimeren.

(Stylesheets op deze site zijn niet gecomprimeerd. Omdat het vaak juist om de css gaat, kunnen mensen dan zonder al te veel moeite de css bekijken.)

/* menu-125-dl.css */

Om vergissingen te voorkomen is het een goede gewoonte bovenaan het stijlbestand even de naam neer te zetten. Voor je het weet, zit je anders in het verkeerde bestand te werken.

body

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de nakomelingen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

background: #ff9;

Achtergrondkleurtje.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

width: 800px;

Breedte.

max-width: 100%;

Hier gelijk boven is een breedte van 800 px opgegeven. In browservensters die smaller dan 800 px zijn, zou je horizontaal moeten scrollen om de hele pagina te zien. Daarom wordt hier een maximumbreedte opgegeven.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. De ouder van <body> is <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser. Hierdoor wordt <body>, en daarmee de hele pagina, nooit breder dan het venster.

font-family: Arial, Helvetica, sans-serif;

Als Arial is geïnstalleerd op de machine van de bezoeker, wordt deze gebruikt, anders Helvetica. Als die ook niet wordt gevonden, wordt in ieder geval een schreefloze letter (zonder dwarsstreepjes) gebruikt.

margin: 0 auto;

Omdat voor onder en links geen waarden zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven – rechts – onder – links.

Boven en onder geen marge, links en rechts auto, wat hier hetzelfde betekent als evenveel. Hierdoor staat <body> altijd horizontaal gecentreerd binnen z'n ouder <html>, ongeacht de breedte van <html>.

Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser. Uiteindelijk staat <body> hierdoor altijd horizontaal gecentreerd binnen het venster.

padding: 0;

Mogelijk is dit niet meer nodig, maar in het verleden verschilde de standaard-padding tussen browsers. Het is simpeler om dit gewoon te blijven gebruiken dan om een uitgebreide test uit te gaan voeren om te kijken, of dit nog wel nodig is.

(Bovendien zijn de meeste mensen aartsconservatief als het om gewoontes gaat, en volgens horen zeggen ben ik ook min of meer een mens, dus ben ik aartsconservatief en heb het altijd zo gedaan en daarom dus en zo.)

header div

Alle <div>'s binnen een <header>. Er is maar één <header>, waarin maar één <div> zit. Die <div> zorgt voor de grijze bovenaan het browservenster. In de <div> zitten de link om het menu te openen en de <span> met het woordje 'Menu'.

background: #ddd;

Grijze achtergrond. Dit is de grijze balk die bovenin het venster van de browser staat.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Dit is ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin, als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

box-sizing: border-box;

De achtergrond van deze <div> vormt de grijze balk bovenin het browservenster. Die balk mag niet breder worden dan de rest van de pagina. Bij body is de pagina 800 px breed gemaakt. Daarom mag ook deze <div> niet breder dan 800 px worden.

Gelijk hieronder krijgt de <div> een breedte van 800 px. Maar nog iets lager wordt aan de <div> aan alle kanten een border van 1 px breed gegeven. Een border wordt normaal genomen bij de breedte opgeteld, waardoor de totale breedte 1 + 800 + 1 = 802 px wordt, net 2 px te veel.

Door deze regel komt de border binnen de breedte van 800 px te staan, waardoor de <div> niet breder wordt dan <body>.

width: 800px;

Breedte.

max-width: 100%;

<body> heeft bij body een maximumbreedte van 100% van het browservenster gekregen, zodat in vensters smaller dan 800 px niet horizontaal gescrold hoeft te worden. Als de pagina genoeg inhoud heeft, staat aan de rechterkant van het venster soms een scrollbalk (dit is afhankelijk van besturingssysteem en browser). In smallere vensters staat deze scrollbalk tegen de pagina aan.

Afbeelding 2: de pagina in een iets smaller browservenster. Links ontbreekt `max-width: 100%;`, waardoor er rechtsboven geen verticale border is te zien. Rechts is `max-width: 100%;` wel aanwezig, en daardoor ook de verticale border rechtsboven.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element, maar niet bij een fixed positie, zoals deze <div> iets hieronder krijgt. Bij een fixed positie is een breedte in procenten ten opzichte van het venster van de browser. Net zoals bij <body> het geval is.

Hierdoor staat de rechterborder van de <div> (dat is de rechterborder van de grijze balk bovenin het browservenster) netjes tegen de scrollbalk aan, wat net iets mooier is dan wanneer de grijze balk helemaal tot de rand van het venster door zou lopen. Dit zie je alleen in vensters die smaller dan ongeveer 820 px zijn, want in bredere vensters staat de scrollbalk – als die aanwezig is – niet tegen de pagina aan.

height: 2rem;

Hoogte.

De <div> zorgt voor de grijze balk bovenin het venster van de browser. Gelijk onder die balk komt <main> met de erin zittende tekst te staan. De <div> en <main> moeten dus goed op elkaar aansluiten: niet over elkaar heen, maar ook geen kier ertussen.

In werkelijkheid klopt dit niet helemaal, want de <div> staat binnen <header>. En <main> staat weer onder <header>. Feitelijk moeten dus <header> en <main> goed op elkaar aansluiten.

Omdat <header> een blok-element is, krijgt dit normaal genomen precies genoeg hoogte om de inhoud ervan weer te kunnen geven. Normaal genomen zou <main> daar dan weer precies onder komen te staan. Hier is dat echter niet zo.

Omdat de <div> fixed is gepositioneerd, bestaat deze als het ware niet voor andere elementen. Daarom heeft de <div>, en alles wat daar weer in zit, geen invloed op de hoogte van z'n ouder <header>. (Naast de <div> zit alleen <nav> in <header>, maar ook <nav> is fixed gepositioneerd, dus ook <nav> heeft geen invloed op de hoogte van <header>.)

Omdat de <div> fixed is gepositioneerd, wordt de <div> zelf ook door alle andere elementen genegeerd, alsof de <div> helemaal niet bestaat.

Boven <main> zit dus alleen een <header> zonder hoogte, en de <div> zelf wordt genegeerd. Hierdoor zou <main> helemaal bovenin het venster van de browser komen te staan, onder de <div> met de balk. Daardoor zou het bovenste deel van de tekst in <main> verdwijnen onder de <div> met de grijze balk.

Dit wordt voorkomen door <main> bij main een padding van 2 rem aan de bovenkant te geven. <main> zelf staat dan nog steeds onder de <div> met de grijze balk, maar dat maakt niets uit, omdat de tekst in <main> 2 rem lager begint.

De hoogte van de <div> met de grijze balk en de hoogte van de padding aan de bovenkant van <main> moeten altijd even groot zijn, om de inhoud van <main> altijd op de juiste afstand van de grijze balk neer te kunnen zetten. Die afstand moet ook nog 'ns enigszins flexibel zijn, want mensen kunnen de lettergrootte veranderen.

Als iemand de lettergrootte verhoogt, worden het in de <div> zittende ≡-teken en het woordje 'Menu' groter, waardoor ook de grijze balk hoger wordt. De padding aan de bovenkant van <main> moet daardoor ook groter worden.

Voor de hoogte van de <div> en voor de padding aan de bovenkant van <main> wordt daarom een relatieve eenheid gebruikt: de rem. Deze werkt ongeveer hetzelfde als de bekendere eenheid em.

De em is gebaseerd op de lettergrootte van het element. Als in de <div> de lettergrootte meer is dan in <main>, is 1 em in de <div> ook groter dan 1 em in <main>. Bovendien wordt de em ook beïnvloed door de voorouders van het element. Hierdoor kun je makkelijk fouten maken als je twee (of meer) elementen op elkaar aan moet laten sluiten. Als één van de voorouders van de <div> ooit een andere lettergrootte zou krijgen en je vergeet de lettergrootte in de <div> aan te passen, gaat het mis.

De rem is ook op de lettergrootte gebaseerd, maar altijd op de lettergrootte van <html>. Daardoor is de rem altijd overal even groot, ongeacht de lettergrootte van het element zelf. En ongeacht eventuele afwijkende lettergroottes in voorouders van het element. Als de bezoeker de lettergrootte verandert, wordt in feite de lettergrootte van <html> veranderd. Hierdoor verandert ook de grootte van de rem, maar die verandering is overal op de pagina precies hetzelfde.

Als twee of meer elementen ten opzichte van elkaar neergezet moeten worden, een bepaalde grootte ten opzichte van elkaar moeten hebben, en dergelijke, is de eenheid rem vrijwel altijd beter dan de eenheid em. (Even los van nieuwere mogelijkheden als flexbox en grid, maar die worden hier niet gebruikt.)

border: black solid 1px;

Zwart randje.

border-top: none;

Aan de bovenkant geen border. De <div> staat tegen de bovenkant van de browser, en daar zit al iets van 'n rand.

position: fixed;

De <div>, en daarmee de grijze balk, vastzetten ten opzichte van het venster van de browser. Bij scrollen van de pagina scrolt de <div> niet mee.

top: 0;

Vastzetten aan de bovenkant van het venster van de browser.

Mogelijk is dit niet meer nodig, want als je top niet opgeeft, staat de <div> ook op deze plaats. Maar in het verleden hadden mobiele browsers nogal 'ns moeten met een fixed gepositioneerd element. Kwaad kan het niet, dus voor de zekerheid wordt dit voorlopig nog gebruikt.

#open

Het element met id="open". De link die zorgt voor het openen van het menu. Zichtbaar als het witte blokje met het ≡-teken linksboven op de pagina.

background: white;

Witte achtergrond.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

display: inline-block;

Een <a> is van zichzelf een inline-element. Hierdoor zijn eigenschappen als breedte en hoogte niet te gebruiken. Een inline-block is een soort kruising tussen een inline- en een blok-element. Het komt niet op een nieuwe regel te staan, maar eigenschappen als hoogte en breedte zijn wel te gebruiken.

width: 1.7rem; height: 1.95rem;

Breedte en hoogte. Met deze hoogte vult de <a> precies de grijze balk bovenin het browservenster.

Als eenheid wordt rem genomen, waardoor breedte en hoogte mee veranderen met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

font-size: 1.2rem;

Tekstgrootte iets groter dan normaal. De tekst is hier alleen het ≡-teken. Met deze grootte blijft er nog genoeg ruimte over om onder het teken nog het woordje 'Menu' neer te kunnen zetten.

Als eenheid wordt rem genomen, waardoor de lettergrootte kan worden veranderd. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

line-height: 1.45rem;

Regelhoogte.

Tekst komt automatisch halverwege de regelhoogte te staan. Met deze regelhoogte staat het ≡-teken precies op de juiste hoogte.

Als eenheid wordt rem genomen, waardoor de regelhoogte mee verandert met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

text-align: center;

Tekst horizontaal centreren binnen de <a>

text-decoration: none;

Standaard wordt tekst in een <a> onderstreept. Dat is hier niet de bedoeling.

border-right: black solid 1px;

Zwart lijntje aan de rechterkant.

header div span

Alle <span>'s die in een <div> zitten, die weer in een <header> zit. Hier is maar één <header>, waarin maar één <div>, en in die <div> zit slechts één <span>. In die <span> zit het woordje 'Menu' dat linksboven in het witte blokje staat.

Normaal genomen zou het makkelijker zijn om het woordje 'Menu' gewoon in de <a> te zetten, net als het ≡-teken. Maar bij hoveren over of focus van de <a> wordt de tekst vet, en daardoor iets groter. Het woord 'Menu' past hierdoor net niet meer binnen de <a>, binnen het witte blokje. Door 'Menu' buiten de <a> te zetten wordt dit voorkomen.

display: block;

Een <span> is van zichzelf een inline-element. Daardoor zijn eigenschappen als breedte en hoogte niet te gebruiken. Door de <span> te veranderen in een blok-element kunnen dit soort eigenschappen wel worden gebruikt.

Bovendien wordt een blok-element op een nieuwe regel gezet. Hier komt dat goed uit, want nu komt 'Menu' onder het ≡-teken te staan.

width: 1.7rem;

Breedte. Dit is dezelfde breedte als de <a> met het ≡-teken heeft.

Als eenheid wordt rem genomen, waardoor de breedte mee verandert met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

font-size: 0.6rem;

Met deze lettergrootte past het woordje 'Menu' in alle geteste browsers net in het witte blokje.

text-align: center;

Tekst horizontaal centreren.

pointer-events: none;

(Deze css-eigenschap moet niet worden verward met Pointer Events uit JavaScript. Hier is heel handig dezelfde naam voor gekozen, maar dit heeft helemaal niets te maken met deze css-eigenschap.)

Als het witte blokje linksboven wordt aangeraakt of -geklikt, moet het menu worden getoond. Het moet niet uitmaken, waar je het blokje precies aanraakt of -klikt. Maar dat doet het wel: als je het woordje 'Menu' aanraakt of -klikt, werkt de link niet en opent het menu niet.

Op de afbeelding is de achtergrond van de <span> met 'Menu' zwart gemaakt, en het woordje 'Menu' wit.

De <a> waarmee het menu wordt geopend is even groot als het blokje, dus het maakt niet uit, waar je het blokje aanraakt of -klikt: de link werkt overal. Probleem is alleen dat de <span> met 'Menu' niet binnen de <a> zit, maar daar wel bovenop wordt gezet. Op het onderste zwarte deel van de afbeelding, waar de <span> staat, werkt de link daardoor niet meer, want die wordt afgedekt door de <span>

Met deze regel wordt een klik of aanraking van de <span> genegeerd en doorgegeven aan het element daaronder (en hetzelfde geldt voor hoveren over de <span>). En dat element onder de <span> is de <a>. Nu werkt de link ook, als je de <span> met 'Menu' aanraakt.

position: relative;

Om de <span>, en daarmee het woordje 'Menu', op de juiste plaats neer te kunnen zetten.

bottom: 0.75rem;

Iets naar boven verplaatsen.

Als eenheid wordt rem genomen, waardoor de verplaatsing mee verandert met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

nav

Alle <nav>'s. Dat is er hier maar één, waarin het slide-outmenu zit.

background: rgba(221, 221, 221, 0.7);

Vaak wordt voor 'n kleur de hexadecimale notatie gebruikt, iets als color: #33ab01;. Daarbij worden niet alleen cijfers, maar ook letters gebruikt. 0 tot en met 9 werken precies hetzelfde als altijd, maar na de 9 komen nog A, B, C, D, E en F.

Als je telt, is 't dus: 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12, enzovoort. Daarbij is A gelijk aan het tientallige 10, B aan 11, enzovoort. Op deze manier kun je met twee cijfers en/of letters 256 mogelijkheden aangeven: van 00 tot en met FF.

De eerste drie getallen bij rgba() geven de kleur aan. Deze lopen van 0 tot en met 255, dus ook hiermee kun je 256 mogelijkheden aangeven. En omdat er drie getallen zijn levert dat 256 x 256 x 256 = 16.777.216 mogelijke kleuren op, net iets meer dan het aantal kleurpotloden in de gemiddelde kleurdoos van 'n kind.

De notatie bij rgba() geeft dus precies evenveel mogelijkheden als de hexadecimale.

Het eerste getal staat voor rood, het tweede voor groen en het derde voor blauw (feitelijk de Engelse namen, maar de eerste letter is toevallig in het Nederlands hetzelfde). Uit deze drie kleuren zijn alle kleuren op een monitor opgebouwd.

255 wil zeggen volledig aanwezig, 0 wil zeggen helemaal ontbrekend.

255, 255, 255 levert wit op, 0 , 0 , 0 zwart.

In plaats van getallen mag je ook percentages gebruiken, bijvoorbeeld: rgba(10%, 20%, 100%, 0.3).

Omdat in dit voorbeeld drie keer 221 is opgegeven, levert dit een lichtgrijze kleur op.

Het vierde getal staat voor het alfa-kanaal. Hiermee wordt de doorzichtigheid aangegeven. Dit getal loopt van 0 naar 1. Volledig doorzichtig is 0, volledig ondoorzichtig is 1.

Het getal voor het alfa-kanaal wordt als decimale breuk aangegeven, dus bijvoorbeeld 0.5 wil zeggen halfdoorzichtig. Let erop dat je 'n punt gebruikt, de Amerikaanse manier om breuken aan te geven. Als je 'n komma gebruikt, denkt de browser dat er twee verschillende getallen staan.

In dit voorbeeld is deze achtergrondkleur enigszins doorzichtig: 0.7. Hierdoor zie je de tekst nog enigszins door de achtergrond heen. Alleen de <nav> heeft een doorzichtige achtergrond. De in de <nav> zittende links zelf krijgen bij nav a een ondoorzichtige witte achtergrond, dus de leesbaarheid wordt niet minder door deze doorzichtigheid.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

width: 0;

Breedte.

Een breedte van 0 px betekent: onzichtbaar. De <nav> (en alles erin) is nog gewoon aanwezig, alleen zie je er niets meer van. En omdat de <nav> geen breedte heeft, is het onmogelijk om 'n link aan te klikken of zoiets, want een onzichtbare link kun je niet aanraken.

(Schermlezers lezen de <nav> en de links daarbinnen nog gewoon voor, en in de meeste schermlezers kunnen de links ook gewoon worden gevolgd. Ook bij gebruik van de Tab-toets worden de links nog gewoon bezocht. Daarom wordt iets verderop de <nav> ook nog voor schermlezers en Tab-toets verborgen met visibility: hidden;.)

Zodra de link met het ≡-teken wordt aangeraakt of -geklikt (of door gebruikers van de Tab-toets met Enter wordt geactiveerd), wordt bij #nav:target een breedte aan de <nav> gegeven. Hierdoor wordt het in de <nav> zittende menu zichtbaar. (Ook visibility: hidden; wordt daar veranderd in visibility: visible;, omdat het menu er anders wel is, maar nog steeds onzichtbaar.)

overflow: auto;

De <nav> met het menu is fixed gepositioneerd tussen de balk aan de bovenkant van het browservenster en de onderkant van het venster. In een heel laag venster kan het menu in de <nav> te hoog zijn voor het venster. Aan de onderkant valt een deel van het menu dan weg.

Door overflow op auto te zetten, kan de <nav> met het menu in dat geval worden gescrold. Afhankelijk van browser en besturingssysteem kan daarbij aan de rechterkant van de <nav> een scrollbalk verschijnen.

text-align: center;

Tekst in de <nav> horizontaal centreren.

border-right: black solid 1px;

Rechts zwarte rand.

position: fixed;

De <nav>, en daarmee het hele erin zittende menu, vastzetten ten opzichte van het venster van de browser. Bij scrollen van de pagina scrolt de <nav> niet mee.

top: 2rem;

2 rem vanaf de bovenkant van het venster van de browser neerzetten, dat is tegen de <div> met de grijze balk aan.

Als eenheid wordt rem genomen, waardoor de afstand tot de bovenkant mee verandert met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

bottom: 0;

Aan de onderkant van het browservenster vastmaken.

transition: width 0.5s, visibility 0.5s;

Iets hierboven is met width: 0; een breedte opgegeven. Een breedte van 0 px, dus onzichtbaar, maar het blijft een breedte. Gelijk hieronder wordt de <nav> met visibility: hidden; verborgen.

(De <nav> en alles wat erin zit wordt dus eigenlijk op twee manieren verborgen. Op zich is alleen een breedte van 0 px voldoende voor het verbergen, alleen lezen schermlezers het menu in de <nav> dan nog steeds voor, en ook de Tab-toets bezoekt de links nog. Met visibility: hidden; negeren schermlezers en Tab-toets de links in het menu.)

Bij #nav:target wordt dit veranderd in width: 400px; visibility: visible;, waardoor de <nav> en het erin zittende menu zichtbaar worden. (De selector #nav:target reageert op aanraken of -klikken van de link met het ≡-teken, of als Enter wordt ingedrukt als de link focus heeft.)

De eigenschap transition zorgt ervoor dat de verandering van breedte en zichtbaarheid niet in één keer plaatsvindt, maar geleidelijk. Als width van 0 px wordt veranderd naar 400px, vindt die verandering geleidelijk aan plaats: geleidelijk van 0 px naar 400px. (Bij width zelf staat alleen width: 0;, omdat je 'px' weg mag laten bij '0'.)

transition wordt op twee plaatsen gebruikt: bij #nav:target, als het menu wordt geopend, en hier. De waarden bij transition bij #nav:target worden gebruikt als het menu wordt geopend, als de breedte van 0 naar 400 px gaat. De waarden die hier staan, worden gebruikt als het menu weer wordt gesloten.

Meestal wordt transition alleen bij de verandering opgegeven. De tijdsduur van beginstand naar verandering, en weer terug van verandering naar beginstand, is dan in beide richtingen hetzelfde. Maar dat hoeft niet. Door verschillende tijden op te geven, kun je een menu bijvoorbeeld sneller sluiten dan openen. Dat is wat hier gebeurt.

Er worden twee eigenschappen veranderd: width en visibility. De eigenschappen worden gezamenlijk opgegeven achter transition, gescheiden door een komma.

(Je kunt de te veranderen eigenschappen, vertraging, en dergelijke ook volledig apart opgeven met behulp van transition-property, transition-delay, en dergelijke, maar het is veel duidelijker om de te veranderen eigenschap, vertraging, en dergelijke bij elkaar te houden.)

De twee eigenschappen width en visibility apart:

width: 0.5s: als er slechts één tijd is opgegeven, zoals hier het geval is, is dat de tijdsduur van de verandering (een eventuele tweede tijd geeft een vertraging aan het begin aan). Het veranderen van de breedte van het menu van 400 px naar 0 px duurt 0,5 seconde (met 'n punt voor de decimalen, want css gebruikt de Amerikaanse notatie).

Bij #nav:target staat transition: width 1s;. Hierdoor duurt het openen van het menu, de verandering van width: 0; naar width: 400px;, één seconde. Het openen van het menu duurt dus iets langer dan het sluiten. Omdat 400 px tamelijk breed is, is één seconde een mooie tijd om het menu rustig te openen. Maar als het menu weer moet worden gesloten, is dat wat irritant lang. Vandaar dat het sluiten sneller gebeurt dan het openen.

Je kunt ook nog het verloop van de wijziging opgeven, bijvoorbeeld snel aan het begin en langzaam aan het eind. Hier wordt niets opgegeven, waardoor de standaardwaarde ease wordt gebruikt: langzaam aan het begin, sneller halverwege en weer langzaam aan het einde.

visibility 0.5s: bij #nav:target wordt de <nav> met het menu met visibility: visible; zichtbaar gemaakt. Daar staat geen visibility achter transition. Dat betekent dat de <nav> met het menu zonder enige vertraging in één keer van visibility: hidden; naar visibility: visible; gaat.

visibility: hidden; wordt alleen gebruikt om het menu voor schermlezers en gebruikers van de Tab-toets te verbergen. Op het ogenblik dat het menu wordt getoond, is dat niet langer nodig en kan het menu gelijk, zonder vertraging, worden getoond.

Omgekeerd is dat niet het geval. Het duurt 'n halve seconde om de breedte van 400 px terug te brengen tot 0 px. Als het menu zonder vertraging onzichtbaar wordt gemaakt, zie je die verandering in breedte niet: het menu verdwijnt in één keer. Het is veel rustiger, als dat geleidelijk gebeurt.

Daarom wordt hier over het onzichtbaar wel 'n halve seconde gedaan.

Toch is dit niet precies, wat er gebeurt. Als je heel nauwkeurig kijkt, zou je zien dat het onzichtbaar worden helemaal niet geleidelijk aan gebeurt, maar in één keer, na 'n halve seconde. Dat komt omdat visibility alleen maar een begin- en een eindstand kent: visible en hidden. Bij visibility heeft die halve seconde tijdsduur hetzelfde effect als 'n halve seconde vertraging.

(Als je de zichtbaarheid geleidelijk aan zou willen veranderen, moet je opacity gebruiken. Dat kent wel tussenliggende waarden tussen doorzichtig en ondoorzichtig. Maar als je iets met opacity onzichtbaar maakt, moet je daarnaast ook nog steeds visibility gebruiken, want anders negeren schermlezers en de Tab-toets het niet.)

De waarden bij transition zijn gewoon gevonden door uitproberen. Mocht je ingewikkelder dingen willen uitproberen, dan zijn op de pagina met links onder het kopje CSS → Online uitproberen, code genereren en dergelijke sites te vinden, waarop je gereedschap vindt om je te helpen met de meer ingewikkelde onderdelen van transition. (Als je 'Alles' uitvinkt, kun je 'Transition' aanvinken en krijg je alleen sites met gereedschap voor transition te zien.)

transition brengt een geheel eigen risico met zich mee. In de specificatie staat, welke eigenschappen met behulp van transition kunnen veranderen. Je kunt eventueel bij transition opgeven, voor welke eigenschappen het geldt. Als je bijvoorbeeld top en left beide wilt veranderen bij :checked, kun je bijvoorbeeld aangeven dat de geleidelijke verandering met behulp van transition alleen voor top geldt. left verandert dan gewoon in één keer.

Als je niet opgeeft, voor welke eigenschappen transition geldt, geldt het voor álle eigenschappen die bij :hover, :focus, :checked, en dergelijke worden veranderd. Als daar 'n eigenschap bij zit die op dit moment niet door transition kan worden vertraagd, verandert die gewoon in één keer. Maar als de specificatie of een van de browsermakers de geest krijgt en plotsklaps die eigenschap ook onder transition laat vallen, kan dat tot heel onverwachte resultaten leiden.

Stel dat je een bepaalde eigenschap heel traag wilt veranderen bij :hover en een andere eigenschap flitsend snel. Mogelijk wordt dat flitsend snel dan opeens ook heel traag, als transition in de toekomst die eigenschap ook gaat ondersteunen. Daarom moet je absoluut zeker weten dat ook in de toekomst geen problemen kunnen ontstaan. Bij twijfel: geef aan welke eigenschap(pen) transition mag aansturen.

In dit voorbeeld speelt dit risico niet, omdat bij transition de afzonderlijke eigenschappen zijn opgegeven, waarvoor transition geldt. Daardoor blijft transition, wat er eventueel ooit nog gaat veranderen, hoe dan ook alleen voor deze twee eigenschappen gelden.

visibility: hidden;

De <nav> met het menu verbergen.

Zodra de link met het ≡-teken wordt aangeraakt of -geklikt (of door gebruikers van de Tab-toets met Enter wordt geactiveerd), wordt dit bij #nav:target veranderd in visibility: visible;, zodat het menu zichtbaar is.

Iets hierboven heeft de <nav> met het menu bij width: 0; een breedte van 0 px gekregen. Hierdoor is de <nav> al onzichtbaar. Maar schermlezers lezen het menu nog gewoon voor, en de links worden ook door de Tab-toets nog gewoon bezocht. Door het menu ook nog te verbergen met visibility: hidden; negeren schermlezers en Tab-toets de links in het menu.

(Normaal genomen zou je het menu eerder voor schermlezers en Tab-toets verbergen met display: none;, maar dat kan niet worden gebruikt in combinatie met de eigenschap transition. Hierdoor zou het menu zonder enige vertraging pats-boem verschijnen en verdwijnen.)

#nav:target

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav {background: rgba(221, 221, 221, 0.7); color: black; width: 0; overflow: auto; text-align: center; border-right: black solid 1px; position: fixed; top: 2rem; bottom: 0; transition: width 0.5s, visibility 0.5s; visibility: hidden;}

Als het element met id="nav" een 'target' is.

Bovenin de pagina staat een link naar '#nav':

<a id="open" href="#nav" aria-label="Open menu">≡</a>

Zo'n link binnen de pagina werkt alleen, als het doel-element een id heeft, een 'anker'. Daarom heeft de <nav> een id:

<nav id="nav">

Je zou hier als selector kunnen volstaan met nav:target, maar dan zou deze css voor álle <nav>'s op de pagina gelden. In het voorbeeld in de download is maar één <nav> aanwezig, maar op de site bijvoorbeeld zijn er al meerdere <nav>'s in het voorbeeld aanwezig. Om te voorkomen dat per ongeluk meerdere <nav>'s onder deze selector vallen, kun je het best een id gebruiken in de selector. En de <nav> heeft toch al 'n id, dus waarom zou je die dan niet gebruiken.

nav#nav, de <nav> met id="nav", is het doel, de 'target', van de link bovenin. Op het moment dat de link bovenin wordt gevolgd, wordt deze selector geactiveerd, omdat nav#nav op dat moment het doel is.

(Zodra een andere link binnen de pagina wordt gevolgd, is nav#nav niet meer het doel en werkt deze selector niet meer. Dat is de truc die wordt gebruikt om het menu weer te sluiten: een andere link met een ander doel.)

width: 400px;

Bij nav heeft de <nav> een breedte van 0 px gekregen, waardoor deze onzichtbaar is. Hier wordt de <nav> 400 px breed gemaakt, zodat de <nav> en het erin zittende menu zichtbaar worden.

(De <nav> wordt bij nav ook nog verborgen met visibility: hidden; en iets hieronder zichtbaar gemaakt met visibility: visible;. Dat is nodig omdat schermlezers en Tab-toets de links in de <nav> gewoon voorlezen en bezoeken. Door de <nav> ook met visibility: hidden; te verbergen wordt de <nav> genegeerd door schermlezers en Tab-toets.)

max-width: 80%;

Hier gelijk boven heeft de <nav> een breedte van 400 px gekregen. In heel smalle browservensters kan dat breder zijn dan de breedte van het venster, waardoor horizontaal gescrold zou moeten worden om het hele menu te zien. Dit wordt met een maximumbreedte voorkomen.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier de <div>, waarin de grijze balk bovenin het venster van de browser zit. Die <div> heeft bij header div een breedte van 800 px gekregen, maar mag nooit breder dan het venster worden. Omdat de <nav> maximaal 80% van deze breedte krijgt, kan de <nav> dus nooit breder worden dan maximaal 80% van de breedte van het venster.

transition: width 1s;

Als het menu niet is geopend, heeft dit een breedte van 0 px. Als het menu is geopend, is de breedte 400 px. Deze eigenschap zorgt ervoor dat de verandering van 0 px naar 400 px 1 seconde duurt, waardoor het menu van links naar binnen lijkt te schuiven. Hoe deze eigenschap precies werkt is te vinden bij nav onder transition: width 0.5s, visibility 0.5s;.

visibility: visible;

Bij nav is de <nav> met het menu met visibility: hidden; onzichtbaar gemaakt. De <nav> heeft daar ook al een breedte van 0 px gekregen, waardoor deze ook daardoor al onzichtbaar is. Schermlezers en Tab-toets zien de links echter nog steeds, ook al zijn ze op het scherm niet meer te zien. Met visibility: hidden; worden ze ook door schermlezers en Tab-toets genegeerd.

Maar bij openen van het menu moet de onzichtbaarheid uiteraard weer veranderen in zichtbaarheid, want aan een onzichtbaar geopend menu heb je niet zoveel.

nav ul

Alle <ul>'s die binnen een <nav> zitten. Hier is maar één <nav> aanwezig, waarin maar één <ul> zit: de <ul> met het menu.

list-style-type: none;

De balletjes en dergelijke die je standaard ziet bij de <li>'s in een <ul> zijn hier niet welkom.

margin-top: 20px;

Kleine marge aan de bovenkant.

padding: 0;

Standaard verschilt de padding in verschillende browsers. Nu is die overal hetzelfde.

nav li

Alle <li>'s binnen een <nav>. Hier is maar een <nav> aanwezig, waarbinnen de <li>'s van het menu zitten.

width: 80%;

Breedte.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Die ouder is hier <ul>, een blok-element. Een blok-element wordt normaal genomen automatisch even breed als z'n ouder. De ouder van de <ul> is hier <nav>, die bij #nav:target een breedte van 400 px en een maximumbreedte van 80% van het venster van de browser heeft gekregen. Uiteindelijk zijn de <li>'s weer 80% van die breedte.

height: 2em;

Hoogte.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij gebruik van een absolute eenheid zoals px de regelhoogte niet mee verandert met de lettergrootte.

Iets hieronder wordt ook een regelhoogte van 2 em opgegeven. Normaal genomen zou de hoogte hier dan niet nodig zijn, omdat – bij gebrek aan een hoogte – de regelhoogte voldoende is. Maar gelijk hieronder wordt overflow: hidden; gebruikt, en dat werkt alleen, als ook een hoogte aanwezig is.

overflow: hidden;

Afbeelding 4: links staat de tekst in het menu over elkaar heen

Als de <nav> met het menu wordt geopend, verandert de breedte van 0 px naar 400 px. Die verandering duurt 1 seconde. De <li>'s, waarin de links zitten, hebben iets hierboven een breedte van 80% van de <nav> gekregen.

Daardoor zijn de <li>'s bij het begin van de verandering te smal om de erin zittende links weer te kunnen geven. Op de afbeelding zijn beide menu's 100 px breed. In de bovenste link staat 'Pagina een'.

Bij de linkerafbeelding ontbreekt overflow: hidden;. Omdat het woord 'een' niet op de regel past, komt dit op de volgende regel te staan, door 'Pagina twee' heen. De 'twee' daarvan komt weer door 'Pagina drie' heen te staan. Enzovoort.

Op de afbeelding rechts is overflow: hidden; gebruikt. Hierdoor wordt het deel van de link dat niet past gewoon verborgen.

Hoewel het openen van het menu maar één seconde duurt, is het door elkaar heen staan van de links toch duidelijk te zien, als een soort inktvlek.

line-height: 2em;

Regelhoogte.

Tekst wordt automatisch halverwege de regelhoogte neergezet, waardoor de tekst in de links verticaal wordt gecentreerd.

Als eenheid wordt em genomen, omdat bij een absolute eenheid als px de regelhoogte niet mee verandert met de lettergrootte. Zoomen kan altijd, welke eenheid ook wordt gebruikt.

margin: 0 auto;

Boven en onder geen marge. Links en rechts auto, wat hier hetzelfde betekent als evenveel. Hierdoor staan de <li>'s, en de daarin zittende links, altijd horizontaal gecentreerd binnen hun ouder, ongeacht de breedte ouder van die ouder.

Die ouder is hier <ul>, een blok-element. Een blok-element wordt normaal genomen automatisch even breed als z'n ouder. De ouder van de <ul> is hier <nav>. De <li>'s staan dus altijd horizontaal gecentreerd binnen de <nav>.

nav a

Alle <a>'s binnen een <nav>. Er is maar één <nav> aanwezig, waarbinnen het menu zit. Dit zijn de links binnen dat menu. Het zijn ook de link met het ≡-teken en de twee rode sluitkruisjes, waarmee het menu geopend en gesloten wordt.

background: white;

Witte achtergrond.

color: black;

Van zichzelf heeft tekst in een link een kleurtje. Dat is hier niet nodig, omdat het zo al duidelijk genoeg is dat dit links zijn.

display: block;

Van zichzelf is een <a> een inline-element. Daardoor wordt de <a> niet breder dan nodig is om de tekst erin weer te geven en werkt de link alleen, als precies die tekst wordt aangeraakt of -geklikt.

Door de <a> te veranderen in een blok-element, wordt de <a> even breed als z'n ouder. Die ouder is de <li>, waar de <a> in zit. Bij nav li hebben de <li>'s een breedte van 80% van de <nav> gekregen. Omdat de <a> nu even breed is als de <li>, maakt het nu niet meer uit, waar de <a> wordt aangeraakt of -geklikt: de link zal overal werken.

text-decoration: none;

Tekst in een <a> is onderstreept. Dat is hier niet nodig, het is zo al duidelijk genoeg dat dit links zijn.

border: black solid 1px;

Zwart randje rondom.

.sluit

Voor deze elementen is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav a {background: white; color: black; display: block; text-decoration: none; border: black solid 1px;}

Alle elementen met class="sluit". De twee <a>'s met de sluitkruisjes, waarmee het menu weer gesloten kan worden.

background: white;

Witte achtergrond.

color: red;

Rode voorgrondkleur. Dit is onder andere de kleur van de tekst. Die tekst bestaat hier alleen uit de letter 'X'.

width: 1.7rem; height: 1.7rem;

Breedte en hoogte.

De hier gebruikte breedte en hoogte zorgen ervoor dat de sluitkruisjes even groot zijn als het blokje met het ≡-teken, waardoor het linkersluitkruisje netjes aansluit op het blokje met het ≡-teken.

Bovendien zorgen deze maten ervoor, in combinatie met de iets hieronder opgegeven lettergrootte en regelhoogte, dat het sluitkruisje er in alle browsers (ongeveer) hetzelfde uitziet.

overflow: hidden;

Het rode sluitkruisje is niets anders dan een grote letter 'X'. Om deze letter in alle browsers enigszins netjes weer te kunnen geven, moet er nogal wat worden gestoeid met een combinatie van lettergrootte, regelhoogte, breedte en hoogte. Daardoor wordt soms de letter groter dan het vakje, waar hij in moet passen. Door deze regel worden eventuele buiten het hokje uitstekende delen verborgen.

font-size: 2.4rem; line-height: 1.75rem;

Lettergrootte en regelhoogte.

Deze maten zorgen ervoor, in combinatie met de iets hierboven opgegeven breedte en hoogte, dat het sluitkruisje er in alle browsers (ongeveer) hetzelfde uitziet.

text-decoration: none;

Standaard wordt een link onderstreept. Dat is hier niet nodig.

border: black solid 1px;

Zwart randje.

border-top: none;

Aan de bovenkant staan de sluitkruisjes tegen de <div> met de grijze balk aan. Die heeft al een border aan de onderkant. Daardoor zou hier een dubbele border komen te staan. Dit voorkomt dat.

position: absolute;

Om de sluitkruisjes op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een positie heeft. Dat is hier <nav>, die bij nav fixed is gepositioneerd.

top: 0; left: 0;

In de linkerbovenhoek zetten. Nu staan beide sluitkruisjes over elkaar heen, maar het tweede sluitkruisje wordt later bij nav > .sluit naar de rechterbovenhoek verplaatst.

nav li:nth-of-type(2) a

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav a {background: white; color: black; display: block; text-decoration: none; border: black solid 1px;}

Binnen <nav> zit een <ul>, en binnen die <ul> zitten weer elf <li>'s, met in elk een <a>. De eerste <li> hoort bij het eerste sluitkruisje, de andere tien <li>'s horen bij de links naar de achterliggende pagina's.

Kinderen van dezelfde ouder kunnen worden geteld, net zoals dat bij kinderen uit een gezin het geval is: eerste kind, tweede kind, derde kind, enzovoort. Je kunt ook alleen 'n bepaald soort element tellen, net zoals je alleen kinderen van jonger of ouder dan zes jaar kunt tellen. Met de selector :nth-of-type() worden alleen elementen van een bepaald soort geteld.

(Dat ul in de selector ontbreekt, is geen probleem. De selector zou daardoor onnodig lang worden, en de <li>'s blijven gewoon kinderen van dezelfde <ul>, of die nu wordt genoemd in de selector of niet.)

nav: alle <nav>'s. Dat is er hier maar een, de <nav> met het menu.

li: alle <li>'s binnen nav.

:nth-of-type(2): het element met een bepaald volgnummer. Het volgnummer staat tussen de haakjes. In dit geval is het volgnummer twee. Het gaat hier dus om de tweede <li> binnen de <ul>.

Omdat voor :nth-of-type(2) een li staat, worden alleen <li>'s geteld.

In deze <li> zit de <a> naar de eerste achterliggende pagina, de <a> met 'Pagina een'. Dit is de bovenste link uit het menu. (De eerste <li> binnen de <ul> hoort bij het sluitkruisje linksboven.)

a: de <a>'s binnen die tweede <li>. Dat is er maar één: de link naar de eerste achterliggende pagina.

In normale mensentaal: de <a> binnen de tweede <li> binnen de <nav>. (Of eigenlijk: de <a> binnen de tweede <li> binnen de <ul> binnen de <nav>, maar de <ul> is hier dus overbodig.)

De selector nth-of-type() (of de bijzondere vormen :first-of-type en :last-of-type voor het eerste en laatste element uit een serie) kan onverwachte bijwerkingen hebben. In dit geval is er maar één serie <li>'s in het voorbeeld. Maar als ergens anders ook nog een serie <li>'s zou zitten, (zoals op de site daadwerkelijk het geval is), zou deze selector ook voor de tweede <li> binnen die serie <li>'s gelden. (Op de site is dit opgelost door de selector te veranderen in #nav li:nth-of-type(2) a. Er is maar één <nav> met id="nav". Op een soortgelijke manier kunnen al dit soort conflicten worden opgelost.)

border-radius: 10px 10px 0 0;

Linker- en rechterbovenhoek rond maken. Omdat er maar één waarde is opgegeven, worden de hoeken horizontaal en verticaal even groot. Hierdoor ontstaan twee cirkelvormige hoeken met een hoogte en breedte van 10 px.

nav li:last-child

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav li {width: 80%; height: 2em; overflow: hidden; line-height: 2em; margin: 0 auto;}

Kinderen van dezelfde ouder kunnen worden geteld, net zoals dat bij kinderen uit een gezin het geval is: eerste kind, tweede kind, derde kind, enzovoort. Je kunt elementen selecteren op basis van het volgnummer binnen zo'n reeks kinderen. In dit geval wordt geen echt volgnummer gebruikt, maar :last-child: het laatste kind.

nav: alle <nav>'s. Dat is er hier maar een, de <nav> met het menu.

li: alle <li>'s binnen nav.

:last-child: nou, toch niet alle <li>'s. Alleen de <li> die het laatste kind is. Binnen deze <li> zit de link naar de laatste achterliggende pagina, het is de onderste link uit het menu.

In normale mensentaal: de laatste <li> binnen de <ul>.

De selector :last-child kan onverwachte bijwerkingen hebben.

Binnen de <nav> bijvoorbeeld zit een <ul>, met daarin een <li> die het laatste kind van de <ul> is. Maar onder de <ul> zit nog een <a>, en die is ook een laatste kind: het laatste kind van de <nav>. Daarom staat er een li voor :last-child het laatste kind móét een <li> zijn. Hierdoor wordt de laatste <a> in de <nav> niet aangesproken. Zou je de li voor :last-child weglaten, dan blijken er opeens veel meer laatste kinderen te zijn en verandert de lay-out in een ouderwets gezellige familie-reünie met alle laatste kinderen: een puinhoop.

Ook moet je zeker weten dat het te selecteren element inderdaad het laatste kind is. Dat is hier echt het geval: de <li> met de link naar de laatste achterliggende pagina is altijd het laatste kind van de <ul>. Maar als later aan de html nog een <li> toegevoegd zou worden na die <li> met de link naar de laatste achterliggende pagina, is die <li> ineens geen laatste kind meer.

(Op de site speelt een soortgelijk probleem: er zijn meerdere <nav>'s met daarbinnen een <ul> met <li>'s. Er zijn dus meerdere <li>'s laatste kind. Op de site is dit opgelost door de selector te veranderen in #nav li:last-child. Er is maar één <nav> met id="nav". Op een soortgelijke manier kunnen al dit soort conflicten worden opgelost.)

height: 2.15 em;

Bij nav li hebben alle <li>'s een hoogte en een regelhoogte van 2 em gekregen. De regelhoogte wordt geërfd door de nakomelingen van de <li>, dus de in de <li> zittende <a> heeft een regelhoogte van 2 em.

Een <a> met een regelhoogte van 2 em past prima in een <li> met een hoogte van 2 em. Maar de <a> is iets hoger, want bij nav a hebben de <a>'s een border van 1 px breed aan alle kanten gekregen. Daardoor is de <a> nu eigenlijk 2 px te hoog voor de <li>. En omdat bij nav li ook nog overflow: hidden; staat, worden die 2 px niet weergegeven. Hierdoor valt de border aan de onderkant van de <a> weg.

Tussen twee <a>'s in is dat geen probleem, omdat elke <a> ook een border aan de bovenkant heeft. En die zie je wel. Bij de onderste <a> in het menu moet die border echter niet wegvallen, want dan mist de border aan de onderkant van het menu. Daarom wordt bij de laatste <li> de hoogte iets hoger gemaakt. Nu past de border aan de onderkant van de <a> binnen deze laatste <li> net binnen de <li>, en is daardoor zichtbaar.

nav li:last-child a

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav a {background: white; color: black; display: block; text-decoration: none; border: black solid 1px;}

De <a> binnen de laatste <li> binnen de <ul>. Deze selector werkt precies hetzelfde als beschreven wordt bij nav li:last-child, alleen gaat het nu om de <a> binnen de laatste <li>.

border-radius: 0 0 10px 10px;

Rechter- en linkeronderhoek rond maken. Omdat er maar één waarde is opgegeven, worden de hoeken horizontaal en verticaal even groot. Hierdoor ontstaan twee cirkelvormige hoeken met een hoogte en breedte van 10 px.

nav > .sluit

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav a {background: white; color: black; display: block; text-decoration: none; border: black solid 1px;}

.sluit {background: white; color: red; width: 1.7rem; height: 1.7rem; overflow: hidden; font-size: 2.4rem; line-height: 1.75rem; text-decoration: none; border: black solid 1px; border-top: none; position: absolute; top: 0; left: 0;}

Alle elementen met class="sluit" binnen een <nav>. Het teken > geeft aan, dat het alleen elementen mogen zijn die een direct kind van de <nav> zijn. Onderstaande a.sluit is een direct kind van <nav>:

<nav> <a class="sluit">(...)</a> </nav>

De eerste a.sluit hieronder is geen direct kind van <nav>, omdat er een <ul> tussen a.sluit en de <nav> zit. De tweede a.sluit is wel een direct kind van <nav>:

<nav> <ul> <a class="sluit">(...)</a> </ul> <a class="sluit">(...)</a> </nav>

In dit voorbeeld is er maar één a.sluit die een direct kind van <nav> is. Binnen deze <a> zit het tweede sluitkruisje, dat rechtsboven in het menu staat.

border-right: none;

De eerder bij .sluit opgegeven border is aan de rechterkant niet nodig, want daar staat het sluitkruisje tegen de rechterkant van de <nav>, en die heeft al een border.

right: 0;

Helemaal rechts in de <nav> zetten.

left: auto;

Eerder is bij .sluit left: 0; opgegeven. Het sluitkruisje kan niet gelijktijdig helemaal rechts en helemaal links staan. Bij zo'n onmogelijke opdracht 'wint' de waarde voor left van de waarde bij right. Om dat te voorkomen wordt bij left de standaardwaarde opgegeven. Nu werkt de hierboven opgegeven right: 0; wel.

#open:focus, #open:hover, header a:focus, header a:hover, main a:focus, main a:hover

Voor een deel van deze elementen is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

#open {background: white; color: black; display: inline-block; width: 1.7rem; height: 1.95rem; font-size: 1.2rem; line-height: 1.45rem; text-align: center; text-decoration: none; border-right: black solid 1px;}

nav a {background: white; color: black; display: block; text-decoration: none; border: black solid 1px; none;}

nav > .sluit {border-width: 0 0 1px 1px; right: 0; left: auto;}

Een hele serie selectors, zes in totaal. Maar de zes selectors zelf zijn allemaal redelijk simpel. Eerst het deel voor de dubbele punt, het deel voor de pseudo-class.

#open: het element met id="open". De link die zorgt voor het openen van het menu en die is te zien als het witte blokje linksboven met het ≡-teken.

Deze link valt ook onder de selector gelijk hieronder header a, want het is een link binnen <header>. Maar #open heeft eerder bij #open een witte achtergrond gekregen. En een selector met een id zoals #open heeft meer specificiteit, meer 'gewicht' dan een selector zonder id. De selector gelijk hieronder header a heeft geen id en kan daarom nooit 'winnen' van de eerdere selector #open: de achtergrond blijft gewoon wit. Dat #open eerder in de css staat dan de selector hieronder, maakt niets uit. Volgorde is alleen van belang, als de selectors dezelfde specificiteit, het zelfde 'gewicht', hebben.

Door ook hier de selector #open te gebruiken, werkt de css wel voor a#open.

header a: alle <a>'s binnen een <header>. Er is maar één <header> in het voorbeeld aanwezig. De <a>'s in die <header> zijn de links die zorgen voor openen en sluiten van het menu, en de links naar de achterliggende pagina's in dat menu.

main a: de links in <main>. Dat is er maar eentje: de link met de tekst 'Dit is een extra link' binnen de Latijnse tekst.

Elk van deze drie selectors komt twee keer voor, één keer met :focus achter de selector, en één keer met :hover erachter.

:focus: sommige mensen gebruiken niet de muis, maar de Tab-toets om links, tekstvelden, knoppen, en dergelijke langs te gaan. Als een link wordt bezocht met de Tab-toets, heeft de link 'focus'. Als Enter wordt ingedrukt, wordt de link gevolgd.

Voor gebruikers van de Tab-toets is het belangrijk te weten, welke link focus heeft, welke link kan worden gevolgd. Daarom geeft elke browser met behulp van een kadertje aan, welke link, tekstelement, knop, en dergelijke focus heeft. Maar in dit menu werkt dat niet goed, het is te onduidelijk. Bovendien is het in dit menu ook nog 'ns foeilelijk.

Daarom wordt dat standaardkadertje hier vervangen door een andere manier om de focus aan te geven. Dat gebeurt bij a#open (de link om het menu te openen), bij header a (de links naar de achterliggende pagina's en de links met de sluitkruisjes in nav), en in main a (de link in de Latijnse tekst).

Normaal genomen zou die link in de Latijnse tekst hier niet onder vallen, maar in dit geval lijkt dat wel nuttig, omdat zo duidelijk wordt dat – als het menu gesloten is – de focus inderdaad rechtstreeks van a#open naar de link in <main> gaat.

:hover: precies hetzelfde verhaal als hierboven bij :focus staat, maar nu als je met de muis over één van de genoemde links hovert.

Het hele verhaal in normale mensentaal: als een link in het menu of in <main> focus heeft, of als over een link in het menu of in <main> wordt gehoverd, doe dan iets met die link.

background-color: #0afdfd;

Achtergrondkleur veranderen in een subtiel knalblauw. (Eh, ja, ik heb dus absoluut geen kleurgevoel....)

font-weight: bold;

Omdat sommige mensen moeite hebben kleuren te onderscheiden, wordt de tekst in de links vet gemaakt. (Bij de link om het menu te openen is dat alleen het ≡-teken, want 'Menu' staat buiten de link.)

Als de gebruikte lettersoort een vette variant heeft, wordt die gebruikt. De meeste lettersoorten hebben wel een vette variant, soms zelfs meerdere. Een vette variant wordt speciaal ontworpen, het is iets anders dan 'alle lijntjes wat dikker maken'. Sommige letters kunnen er zelfs heel anders uitzien.

Als de lettersoort geen vette variant heeft, maakt de browser de letter vet. Dat wil zeggen dat de browser gewoon alle lijntjes wat dikker maakt. Dat kan mooi zijn, maar vaak is het foeilelijk. Het is heel iets anders dan een speciaal ontworpen font. Elke rechtgeaarde typograaf gruwt hiervan.

outline: none;

Het standaardkadertje bij focus verwijderen.

main

Alle <main>'s. Er is maar één <main> aanwezig. Hier zitten de Latijnse flauwekultekst en de link met de tekst 'Dit is een extra link' in.

background: white;

Witte achtergrond.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

border: black solid 1px;

Zwart randje.

display: block;

Oudere browsers kennen <main> niet. Een onbekend element is standaard een inline-element. Voor die oudere browsers wordt dat hier gecorrigeerd.

padding: 2rem 5px 5px;

Omdat voor links geen waarde is ingevuld, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 2rem 5px 5px 5px in de volgorde boven – rechts – onder – links.

Rechts, onder en boven een kleine afstand tussen buitenkant van en tekst in <main>

Boven een padding van 2 rem. <main> zelf staat bovenaan het venster van de browser, maar daar staat ook de <div> met de grijze balk. Door aan de bovenkant een padding te geven, wordt de tekst in <main> iets lager gezet en verdwijnt deze niet onder de grijze balk.

JavaScript

Bij de uitleg van deze code zijn allerlei haakjes en dergelijke grotendeels weggelaten, want dat voert hier te ver. Als je je in dat soort dingen wilt verdiepen, kun je beter naar sites gaan die meer voor JavaScript zijn bedoeld.

Als je onderstaande code ergens aanraakt of ‑klikt, ga je rechtstreeks naar de bijbehorende uitleg.

<script> (function () { "use strict";
var links, aantal, i, pad = location.pathname + "#";
links = document.getElementsByTagName("a");
aantal = links.length; for (i = 0; i < aantal; i++) { if (links[i].href.indexOf(pad) > 0) { links[i].addEventListener("click", geenHistory); } }
function geenHistory (e) { location.replace(e.target.href); }
}) (); </script>

Als je bovenstaande code ergens aanraakt of ‑klikt, ga je rechtstreeks naar de bijbehorende uitleg.

Met behulp van dit JavaScript wordt voorkomen dat het openen en sluiten van het menu in de geschiedenis van de browser wordt opgeslagen. Hiermee wordt voorkomen dat je, bij gebruik van de Terug-toets, Vooruit-toets of een toetscombinatie als alt+← of alt+→, tussen open en gesloten menu heen en weer gaat. Omdat het openen en sluiten van het menu met behulp van een link gebeurt, wordt die link bij volgen standaard in de geschiedenis van de browser opgeslagen.

<script> en </script>

Dit is gewone html: het zijn de openings- en sluittag voor het script. In html5 is de toevoeging type="text/javascript" niet meer nodig.

Als je het script op meer pagina's wilt gebruiken, kun je er heel simpel een extern script van maken. Je zet het hele script (behalve <script> en </script>, want dat is html en geen JavaScript) in een gewoon tekstbestand met de extensie '.js'. In de <script>-tag komt het pad naar en de naam van dat bestand te staan:

<script src="pad-naar-script/script.js"></script>

Normaal genomen wordt het verwerken van de html onderbroken, zodra de browser een script tegenkomt. Het script zou immers nodig kunnen zijn voor de opbouw van de pagina.

Daarom staat het script hier helemaal onderaan de html, gelijk boven </body>. Dit script is niet nodig voor de opbouw van de pagina. Door het onderaan te zetten, wordt voorkomen dat het vertragend werkt.

Een andere mogelijkheid is om het wel bovenaan in de <head> te zetten. Veel sitebouwers zetten scripts en dergelijke graag bij elkaar, voor de overzichtelijkheid. In dat geval kun je hetzelfde bereiken met:

<script src="pad-naar-script/script.js" async></script>

Door het toevoegen van het sleutelwoord async weet de browser dat dit script niet nodig is voor de opbouw van de pagina. Het script wordt nu gedownload, terwijl de html gewoon verder wordt verwerkt. Zodra het script is gedownload, wordt het verwerkt, waarbij het verwerken van de html alsnog wordt onderbroken. Maar deze onderbreking is zo kort dat je dat nauwelijks merkt.

(function () {

function: het sleutelwoord waarmee het begin van een functie wordt aangegeven. Een functie is een stukje bij elkaar horende code. (Het haakje helemaal aan het begin wordt iets verderop beschreven.)

(): achter een functie moeten twee haakjes staan. Behalve dat het gewoon zo hoort, kun je hier ook van alles in stoppen om door te geven aan de code in het binnenste van de functie, maar bij deze functie gebeurt dat niet.

{: geeft het begin van de code binnen de functie aan. Aan het eind van de functie, dat is in dit geval helemaal onderaan in de laatste regel van het script, staat een bijbehorende }.

In die laatste regel staat in dit geval nog meer dan alleen de } die het einde van de code aangeeft: }) ();

}: dit is de eerder genoemde afsluitende }, waarmee het einde van de code in de functie wordt aangegeven.

): dit afsluitende haakje is de tegenhanger van het haakje dat voor de functie staat. Samen zorgen ze ervoor dat de hele functie, met alles erop en eraan, tussen haakjes staat. De reden van deze haakjes wordt iets hieronder besproken.

(): dit is weer gewoon een taalregel van JavaScript. In dit geval moeten er achter de }) nog twee haakjes staan. Een computer is gewoon niet zo slim, anders weet de ziel niet wat er moet gebeuren.

;: met de puntkomma wordt in JavaScript een regel afgesloten. Het is te vergelijken met een gewone punt in een tekst.

We hebben hier een script, waarin alle code binnen een functie is geplaatst. Alle code staat tussen { en }, zodat de computer het begin en einde van de functie kan herkennen.

Een functie is een stukje bij elkaar horende code dat je, zo vaak als je wilt, kunt uitvoeren. Als je de tafel van twaalf op het scherm wilt zetten, hoef je niet twaalf vermenigvuldigingen in JavaScript te schrijven, maar schrijf je 'n functie voor één vermenigvuldiging, die je vervolgens tien keer (op steeds iets andere wijze) uitvoert.

Een functie heeft echter één probleem: de code in de functie wordt pas uitgevoerd, als de functie wordt aangeroepen. Dat aanroepen kan op allerlei manieren gebeuren, bijvoorbeeld als de gebruiker 'n toets indrukt, als de pagina is geladen, als het 13:13 is op vrijdag de dertiende, noem maar op. Maar zonder te worden aangeroepen doet een functie helemaal niets.

In dit script is dat ook zo. Er zit een functie in die reageert op het volgen van een link. Om die functie goed te laten werken, moet de computer wat voorbereidend werk verrichten. Daarvoor moet het script worden gelezen. Maar dat hele script zit in een functie, en die functie doet dus pas wat, als die wordt aangeroepen.

Om te zorgen dat de buitenste functie, die waar alle code in zit, toch vanzelf wordt uitgevoerd, zet je er een ( voor. En helemaal aan het eind, achter de afsluitende }, zet je de tegenhanger ). Nu wordt de functie automatisch uitgevoerd, zonder dat deze hoeft te worden aangeroepen. En kan de code in het script worden gelezen, waardoor het benodigde voorbereidende werk kan worden uitgevoerd.

(Je kunt de code ook in een niet alles omvattende functie zetten. Dan wordt de code gelijk uitgevoerd. Maar dat brengt belangrijke risico's met zich mee. In dit script worden namen voor variabelen gebruikt als 'links' en 'aantal'. Als nou een ander JavaScript toevallig dezelfde namen zou gebruiken, gaat het gruwelijk mis. Door het hele script in een functie te stoppen, voorkom je dat. Als je hier meer over wilt weten, kun je op internet zoeken naar 'name conflict' of 'name clash'.)

"use strict";

Deze regel zorgt ervoor dat bepaalde slordigheden in de code, die makkelijk tot grote problemen kunnen leiden, niet meer mogen. Een validator (die controleert op fouten in de code) is nu strenger en keurt meer dingen af.

Een klein aantal oudere browsers ondersteunt dit niet, maar die hebben er verder geen last van, omdat ze de regel gewoon negeren.

var links, aantal, i,
pad = location.pathname + "#";

In dit deel van de code worden een paar dingen voorbereid. Het écht uitvoerende deel van het script, waarin bijvoorbeeld een aanraking daadwerkelijk wordt herkend, volgt later.

Het is gebruikelijk dit soort voorbereidende zaken bovenin het script te zetten.

Deze regel valt in twee delen uiteen, die worden gescheiden door een komma. Het eerste deel begint met var. Dit sleutelwoord var wordt automatisch ook voor het tweede deel geplaatst, omdat dit tweede deel op een komma volgt. Door die komma weet het script dat het hier om twee bij elkaar horende delen van één regel gaat.

Na het tweede deel staat een puntkomma. Dit is het echte einde van deze regel code. In gewone tekst zou je hier een punt gebruiken.

Het is gebruikelijk zo'n tweede, derde, ... deel op een nieuwe regel te laten beginnen en iets in te laten springen. Zo zie je in één oogopslag dat het sleutelwoord var voor alle twee de delen geldt, dat hier vier variabelen worden aangemaakt: drie in de eerste regel, en één in de tweede regel.

Pardon? Variwiewatwaar? Ha, leuk dat je het vraagt.

var links, aantal, i,: met het sleutelwoord var wordt aangegeven dat elk van de erop volgende woorden de naam van een 'variabele' is. Een variabele is een soort portemonnee: er kan van alles in zitten, en de inhoud kan veranderen.

Gelijk na var volgen de namen van de variabele. Als er meerdere variabelen zijn, zoals hier het geval is, worden die gescheiden door een komma. Hier zijn de variabelen 'links', 'aantal' en 'i' (op 'pad' wordt later teruggekomen).

In 'links', 'aantal' en 'i' wordt dus iets opgeborgen. Omdat de variabele een naam heeft, kan de rest van het script de variabele aanroepen bij deze naam. Net zoals je iemand die 'Marie' heet kunt aanroepen met 'Marie', ongeacht of Marie aardig, onaardig, muzikaal of arrogant is, ongeacht de 'inhoud' van Marie.

Wat er precies in die variabelen wordt opgeslagen, kun je hier opgeven of elders in het script. In dit geval gebeurt dit elders.

Omdat de regel met een komma eindigt, geldt var ook nog voor de erop volgende regel: pad = location.pathname + "#";

pad: in deze regel wordt iets opgeslagen in de variabele 'pad'. Omdat het hier om iets heel simpels gaat, wordt dat gelijk hier gedaan. Meer ingewikkelde dingen worden later gedaan, omdat de code daardoor overzichtelijker blijft. (Hoewel dat grotendeels een kwestie van voorkeur is.)

=: hiermee geef je in JavaScript aan dat in de voor het isgelijkteken staande variabele het resultaat van wat achter het isgelijkteken staat moet worden opgeslagen.

location: als een pagina wordt geopend, wordt allerlei informatie in de browser opgeslagen. Die informatie kan door onder andere JavaScript gebruikt worden. De informatie is overzichtelijk opgeslagen in allerlei afdelingen en onderafdelingen, die in JavaScript 'object' heten.

Een van die objecten is het 'window' object. Daarin zit allerlei informatie, die betrekking heeft op de pagina. De informatie in 'window' is weer opgesplitst in allerlei kleinere objecten. Een van die objecten is 'location'. Hierin zit alles dat met het adres van de pagina te maken heeft: protocol, domeinnaam, naam van de pagina, noem maar op.

(Eigenlijk zou je dus window.location moeten gebruiken, maar omdat 'window' zo vaak voorkomt, mag je dat weglaten: de browser vult dat automatisch aan.)

pathname: van het 'location' object wordt de informatie in het onderdeel 'pathname' gebruikt. Hierin zit het volledige pad naar en de naam van de pagina. Als je de pagina met het voorbeeld op de site bekijkt, is het volledige adres "https://www.css-voorbeelden.nl/menu/statisch/verticaal/menu-125.html". Het pad hierin is "/menu/statisch/verticaal/menu-125.html": het adres min het protocol en de naam van het domein. Eventuele toevoegingen na dit pad (zoals '#nav') staan niet in dit pad.

Dit pad wordt in de variabele met de fantasievolle naam 'pad' opgeslagen. Je kunt nu overal in dit script de variabele 'pad' gebruiken, zodat je niet steeds overal '/menu/statisch/verticaal/menu-125.html' hoeft in te typen.

Maar het belangrijkste voordeel van een variabele: als je dit script op een pagina op een andere site dan www.css-voorbeelden.nl gebruikt, wordt het pad van die andere site gebruikt. Zonder dat je iets aan het script hoeft te veranderen.

+: aan het pad, dat gelijk hierboven is gevonden, wordt nog iets toegevoegd.

"#": dit is, wat wordt toegevoegd. Het staat tussen aanhalingstekens, omdat de computer anders niet weet dat het 'n letterteken is. (Computers zijn (nog) niet zo slim. Ze kunnen wel ongelooflijk snel dom zijn, en dat líjkt slim. Zoiets als de tweets van Trump.)

Op de site zou dit alles bij elkaar opleveren: '/menu/statisch/verticaal/menu-125.html#'. (Op een andere site zou het eerste deel, het pad, uiteraard iets anders zijn.) Deze string (in JavaScript heet een stuk tekst een 'string') geeft een mogelijkheid om links binnen de pagina te onderscheiden van links naar buiten de pagina. Elke link binnen de pagina móét dit stukje binnen z'n adres hebben staan. En het adres van een link naar een andere pagina of site, kan dit stukje tekst nooit bevatten.

Mogelijk zou alleen het pad zonder de "#" al voldoende zijn. Maar het zou kunnen dat iemand een of andere exotische link heeft gemaakt, waarin dat pad voorkomt, en die toch geen link binnen de pagina is. Of mogelijk wordt zoiets exotisch in de toekomst ooit bedacht. De combinatie pad + "#" is gereserveerd voor links binnen een pagina, dus hiermee sluit je elk (toekomstig) risico uit.

links = document.getElementsByTagName("a");

links: in deze regel wordt iets opgeslagen in de al eerder bij var links, aantal, i, ... aangemaakte variabele 'links'. Dat had ook daar kunnen gebeuren, maar het is wat overzichtelijker daar alleen de heel simpele dingen af te handelen. Hoewel dat grotendeels een kwestie van voorkeur is.

Deze regel maakt een lijstje van alle <a>'s op de pagina. Om met dat lijstje te kunnen werken, moeten ze ergens in worden opgeborgen. Dat gebeurt in de variabele 'links'. Niet alleen het <a>-element zelf wordt opgeslagen, dat zou wat zinloos zijn. Er worden ook allerlei gegevens van <a> opgeslagen, zoals de hoogte, de breedte, de bestemming van de link, enzovoort. Er wordt een <a>-'object' opgeslagen: een hele serie gegevens.

=: hiermee geef je in JavaScript aan dat in de voor het isgelijkteken staande variabele het resultaat van wat achter het isgelijkteken staat moet worden opgeslagen.

document: dit geeft aan, waaraan de code van de rest van deze regel gekoppeld moet worden. In document is de hele pagina opgeslagen op een voor JavaScript toegankelijke manier.

getElementsByTagName: zoek bepaalde elementen op aan de hand van de naam van de tag. Het maakt niet uit, hoeveel of hoe weinig van die elementen er zijn, ze worden allemaal opgezocht en in links opgeslagen.

("a"): de tag waarnaar wordt gezocht, tussen aanhalingstekens. De in de html gebruikte < en > worden weggelaten, alleen de naam van de tag wordt gebruikt.

De hele regel nog eens in gewone mensentaal: haal alle <a>'s op de pagina op en berg die op in de variabele links.

Elk in links opgeslagen <a>-object heeft een eigen volgnummer, zodat je elk <a>-object apart kunt opvragen, wijzigen, enzovoort. Omdat computers dol zijn op het getal '0', heeft het eerste <a>-object als volgnummer '0'. In dit voorbeeld zijn veertien <a>'s aanwezig, dus er zitten veertien <a>-objecten in links. Het eerste object kan worden opgevraagd met links[0], het tweede met links[1], het derde met links[2] en het veertiende en laatste met links[13].

(Op de site zelf zitten meer dan veertien <a>'s in de pagina, want daar is ook de navigatie voor de site nog aanwezig. Maar in het voorbeeld in de download zitten precies veertien <a>'s.)

aantal = links.length;

aantal: de volgende variabele, waarin wat wordt opgeslagen. In deze variabele wordt het aantal <a>'s opgeslagen. Dit is een redelijk simpele handeling en had ook al bij het aanmaken van de variabele bij var links, aantal, i, ... kunnen gebeuren, maar toen was variabele links nog niet klaar, want die wordt pas gelijk hierboven ingelezen. En die variabele links is hier nodig, om deze variabele te kunnen maken.

=: hiermee geef je in JavaScript aan dat in de voor het isgelijkteken staande variabele het resultaat van wat achter het isgelijkteken staat moet worden opgeslagen.

links: dit is de variabele die bij links = document.getElementsByTagName("a"); is gevuld met alle <a>'s op de pagina.

length: de lengte van links. Er zitten veertien <a>'s in de pagina met het voorbeeld, en in links zit voor elke <a> een apart object. De lengte van links is dus veertien.

Bij een bepaalde bewerking verderop in het script moet iets voor elke <a> worden gedaan. Tijdens die bewerking moet elke keer opnieuw worden gekeken, hoe lang links is. Dat kan wel, maar het is efficiënter om dat hier één keer te doen, die lengte op te slaan in variabele aantal en dan die variabele gebruiken.

Tot nu toe is alleen een aantal noodzakelijke gegevens opgevraagd. Vanaf nu gaat het script echt beginnen.

for (i = 0; i < aantal; i++) {

for: doe iets met iets, zolang iets waar is. Nou, is dat lekker vaag of niet? Wat er waarmee moet gebeuren, komt later. Dat staat tussen de {} aan het eind van de regel. (In de echte code staat de laatste } lager, achter wat er waarmee moet gebeuren.)

Hier eerst het deel dat ervoor zorgt dat elk eerder gevonden <a>-object netjes aan de beurt komt.

(: met dit haakje opent het deel dat ervoor zorgt dat elk <a>-object aan de beurt komt. Aan het eind van de regel staat de bijbehorende ), waardoor het script weet dat dit het einde van dit deel van de code is.

i = 0;:: hiermee geef je in JavaScript aan dat in de voor het isgelijkteken staande variabele het resultaat van wat achter het isgelijkteken staat, moet worden opgeslagen. In dit geval is dat resultaat heel simpel: het is het getal 0.

De variabele heet hier 'i'. De variabele is eerder al aangemaakt bij var var links, aantal, i, ..., maar wordt nu pas echt gebruikt. i wordt gebruikt als een teller (waarover later meer), en bij dit soort tellers is het gebruikelijk ze de korte naam 'i' te geven. Dat soort gewoontes maakt het voor mensen een stuk makkelijker elkaars code te lezen en te begrijpen.

Omdat i een variabele is, kan de waarde ervan veranderen, variëren. Wat later in de regel ook gaat gebeuren: elke keer als er een <a>-object is afgehandeld, wordt i met 1 verhoogd. Dat gebeurt in het laatste deel van de regel.

De ; geeft aan dat dit stukje code, waarin de variabele i z'n beginwaarde krijgt, hier eindigt.

i++: eerst het laatste deel van de regel, het middelste deel komt gelijk hieronder.

Elke keer als een in links zittend <a>-object is afgehandeld, 1 optellen bij i. Omdat programmeurs liederlijk lui zijn, wordt 'er 1 bij optellen' ingekort tot ++.

Als i 0 is, betekent i++: i wordt 0 + 1 ('1' dus).

Als i 1 is, betekent i++: i wordt 1 + 1 ('2' dus).

Als i 2 is, betekent i++: i wordt 2 + 1 ('3' dus).

Als i 13 is, betekent i++: i wordt 13 + 1 ('14' dus).

En meer dan 14 wordt het niet, vanwege redenen die gelijk hieronder staan.

(Op een pagina met een ander aantal <a>'s dan veertien zal eerder of later worden gestopt met het verhogen van i.)

i < aantal;: het middelste deel van de regel. In aantal is eerder het aantal <a>-objecten in links opgeslagen. Omdat er in dit voorbeeld veertien <a>'s op de pagina staan, is de waarde van aantal 14.

i bevat een getal. Voordat het eerste <a>-object is verwerkt, is dat getal 0, want dat is hierboven opgegeven.

Het teken < betekent: kleiner dan.

De ; aan het einde geeft aan, dat dit stukje code, de voorwaarde waaraan moet worden voldaan, hier eindigt.

In gewone mensentaal staat hier: zolang teller i kleiner is dan aantal.

Als niet meer aan deze voorwaarde wordt voldaan, als teller i niet meer kleiner is dan aantal, stop dan met het uitvoeren van de code die tussen de {} van de for-lus staat. Omdat aantal even groot is als het aantal <a>-objecten in links, geeft dit een mogelijkheid om elk <a>-object precies één keer te verwerken. En er, als ze allemaal verwerkt zijn, mee te stoppen.

): dit haakje hoort bij de ( gelijk achter for. Tussen deze twee haakjes staat de code die ervoor zorgt dat elk <a>-object aan de beurt komt.

{: het laatste teken op de regel. Hiermee geef je aan dat hierna de code volgt die uitgevoerd moet worden. Tot nu toe is alleen gezorgd dat er bij elk <a>-object íéts moet gebeuren, maar nog niet wát. Dat wát volgt na deze {. Na de code die moet worden uitgevoerd staat nog een afsluitende }. Hiermee geef je aan dat het uitvoerende deel van de code bij de for-lus hier stopt.

Dat uitvoerende deel is op een nieuwe regel gezet, net zoals de afsluitende }. Dat soort dingen zijn informele afspraken, omdat het de code voor mensen leesbaarder maakt. Wat de computer betreft zou je alles ook achter elkaar kunnen zetten op één onwijs lange regel. Alleen is niet alleen die regel dan onwijs, ook de gemiddelde programmeur zou heel snel bijzonder onwijs worden, als alles op één lange regel wordt gezet.

Elke keer als een <a>-object is behandeld (met het stukje code tussen de {}, wat hieronder aan de beurt komt), wordt i door middel van i++ met 1 verhoogd.

Aan het begin heeft i de waarde 0. Na de eerste ronde heeft i de waarde 1. Na de tweede ronde heeft i de waarde 2. Na de derde ronde heeft i de waarde 3. Na de veertiende ronde heeft i de waarde 14. Waarmee i niet meer kleiner is dan aantal, dan het aantal <a>-objecten.

Omdat niet meer aan de voorwaarde i < aantal wordt voldaan, wordt gestopt met het behandelen van de <a>-objecten. En dat komt goed uit, want alle <a>-objecten zijn precies allemaal één keer aan de beurt gekomen. Niet meer, niet minder. Bij allemaal is de tussen de {} staande code één keer toegepast.

De code tussen de haakjes in gewone taal: zet teller i op 0 als de for de eerste keer wordt uitgevoerd. Herhaal de for zolang teller i lager is dan het aantal <a>-objecten. Verhoog teller i elke keer als de for wordt uitgevoerd met 1.

if (links[i].href.indexOf(pad) > 0) {

Deze regel zit binnen een for-lus en wordt voor elke <a> in de pagina één keer uitgevoerd.

if: de hierop volgende code wordt alleen uitgevoerd, als aan één of meer voorwaarden is voldaan. Die voorwaarden staan tussen de haakjes achter if. Hier gaat het maar om één voorwaarde: links[i].href.indexOf(pad) > 0.

links[i]: in de variabele links zijn bij links = document.getElementsByTagName("a"); alle <a>'s in de pagina ingelezen. Voor elke <a> is één zogenaamd object in links opgeslagen. In dat object zit allerlei informatie over die betreffende <a>, zoals de breedte en hoogte van de link, de bestemming, enzovoort. Van een deel van die informatie wordt in deze regel gebruik gemaakt.

Achter links. staat nog iets: [i]. De teksthaken geven alleen maar aan dat het hier om een soort teller gaat, die hebben verder geen functie. i is weer een variabele, waarin het volgnummer van de <a> zit, die aan de beurt is. Elke keer als een <a> is bekeken, verhoogt de for-lus, waar deze regel in zit, i met 1, net zolang tot alle <a>'s zijn behandeld.

De eerste keer staat hier dus eigenlijk links[0] voor de eerste <a>, (een computer begint meestal met '0' te tellen, waar mensen met 1 beginnen), de tweede keer links[1] voor de tweede <a>, enzovoort, tot alle <a>'s zijn bekeken.

href: dit is zo'n stukje informatie dat in het hierboven genoemde object zit. In href zit de volledige bestemming van de link, inclusief protocol, domein, enzovoort. Ook al heb je zelf in de html een kortere bestemming ingetypt, in href zit toch het volledige adres.

In de html van het voorbeeld is de link om het menu te openen <a href="#nav">. In de href uit het object dat bij deze <a> hoort, staat echter: 'https://www.css-voorbeelden.nl/menu/statisch/verticaal/menu-125.html#nav'. Daar hoef je zelf niets voor te doen, dat regelt de browser. (Dit is de inhoud van de href op de site. Op een andere site zal de href er anders uitzien.)

indexOf(pad): dit is een in JavaScript ingebouwde functie. Een functie is een stukje bij elkaar horende code, dat je makkelijk kunt uitvoeren. Je roept de naam van de functie (hier 'indexOf()'), en het beestje begint te werken.

Je kunt zelf functies maken, maar JavaScript bevat ook al een groot aantal ingebouwde functies voor handelingen die vaak voorkomen. indexOf() is zo'n ingebouwde functie.

De haakjes achter de naam geven aan dat het om een functie gaat. Tussen die haakjes staat vaak informatie die de code in de functie kan gebruiken. Dat is hier ook het geval: aan de functie wordt de variabele pad doorgegeven. In die variabele pad is bij pad = location.pathname + "#"; het pad naar en de naam van de pagina opgeslagen, plus het teken '#'. Op de site is de inhoud van pad '/menu/statisch/verticaal/menu-125.html#'. (Op een andere site zal het deel voor de '#' er anders uitzien.)

Functie indexOf() kan nu iets doen met de inhoud van pad: kijken of die inhoud in de href van de <a> voorkomt:

links[i].href.indexOf(pad)

Dit moet je van links naar rechts lezen:

links[i]: de <a> die aan de beurt is.

href: het volledige adres van die <a>.

indexOf(pad): kijk of de inhoud van pad in het adres in die href zit.

Als de inhoud van pad in het adres van de link zit, kan het niet anders, dan dat het om een link binnen de pagina gaat.

indexOf() laat met behulp van een getal weten, of de inhoud van pad wel of niet in het adres in href zit. Als (op de site) '/menu/statisch/verticaal/menu-125.html#' in de href zit, wordt het volgnummer van de letter waar '/menu/statisch/verticaal/menu-125.html#' begint in het adres in href geretourneerd door indexOf(). Als de inhoud van pad niet in het adres van href zit, wordt -1 geretourneerd door indexOf().

>: met het hierboven door indexOf() geretourneerde getal, kan iets worden gedaan. In dit geval wordt met behulp van het groterdanteken > gekeken, of dat getal groter is dan een ander getal, dat gelijk op dit teken volgt.

0: als de inhoud van pad niet in het adres van href zat, retourneert indexOf() het getal -1. Als het geretourneerde getal groter is dan 0, móét de inhoud van pad dus ergens in het adres van href zitten. Soms is het handig om te weten, waar iets precies zit, maar dat is hier niet van belang. Het gaat er hier alleen maar om, óf de inhoud van pad in het adres van href zit.

{: de code die eventueel moet worden uitgevoerd, staat tussen twee accolades {}. Het gaat hier maar om één regel code, maar dat maakt niets uit. Aan het eind van de bij de if horende code staat de bijbehorende }.

In gewone mensentaal staat hier: als in de bestemming van de <a> die wordt bekeken het pad naar de pagina (plus het teken '#') staat, voer dan de code tussen de {} bij de if uit, want dan is aan de voorwaarde van de if voldaan.

Omdat alleen aan die voorwaarde is voldaan, als het om een interne link in de pagina gaat, wordt de bij de if horende code dus alleen uitgevoerd voor links binnen de pagina. Alle andere links blijven werken, zoals ze altijd werken. (In dit geval houdt dat in dat alle andere links gewoon in de geschiedenis van de browser worden opgeslagen.)

links[i].addEventListener("click", geenHistory);

Dit deel van het script wordt alleen uitgevoerd, als aan deze eerder gestelde voorwaarde is voldaan:

– de bestemming van de <a> die wordt bekeken moet '/menu/statisch/verticaal/menu-125.html#' bevatten. (Dit is het pad op de site met het voorbeeld, op een andere site zal het deel voor de '#' er anders uitzien.)

links[i]: in de variabele links zijn bij links = document.getElementsByTagName("a"); alle <a>'s op de pagina opgeslagen. (Feitelijk is voor elke <a> een object opgeslagen, waarin allerlei informatie over de <a> zit, zoals de bestemming van de link. Van die informatie wordt later nog gebruik gemaakt.)

De teksthaken [] geven aan dat hierin een teller zit. Die teller is hier de variabele i. In de for-lus, waarbinnen deze regel staat, heeft i het volgnummer gekregen van de <a> die aan de beurt is.

addEventListener: er wordt een zogenaamde 'eventlistener' gekoppeld aan het voor de punt staande deel. Dat is hier links[i], de <a> die aan de beurt is.

Een eventlistener luistert naar een gebeurtenis. Die gebeurtenis, de 'event', kan van alles zijn: het indrukken van een toets, klikken, scrollen, de video is afgespeeld, van alles. Tussen de haakjes van addEventListener() staat, naar welke soort gebeurtenis moet worden geluisterd, en wat er moet gebeuren, als die gebeurtenis zich voordoet. Zeg maar 'n soort rampenplan: áls gebeurtenis is 'doodsmak', dán handeling 'bel 112'.

"click": tussen aanhalingstekens, zodat het script weet dat dit een letterlijke naam is (dit is gewoon een van de taalkundige regels van JavaScript). Dit is de naam van de gebeurtenis, waarnaar wordt geluisterd, waarop wordt gewacht: 'click'. Er wordt geluisterd of op de <a> wordt geklikt, of dat de <a> wordt aangeraakt. Als de <a> door gebruik van de Tab-toets focus heeft gekregen, geldt het indrukken van Enter ook als een klik. (Toen dit werd bedacht, kon je alleen klikken, dus de naam 'click' loopt wat achter.)

geenHistory: deze naam staat niet tussen aanhalingstekens, omdat het hier niet om een letterlijke naam of zo gaat. De naam verwijst naar een 'functie', iets wat moet gebeuren. Die functie staat iets hieronder bij function geenHistory (e) { en voorkomt dat de <a>, als deze wordt gevolgd, wordt opgeslagen in de geschiedenis van de browser. Hierdoor wordt de <a> genegeerd bij gebruik van de Terug- of Vooruit-toets van de browser, en bij gebruik van toetscombinaties als alt+←.

(Probeer op dit moment vooral niet de logica van wel of geen aanhalingstekens te begrijpen. Het makkelijkste is om dat soort dingen maar gewoon te accepteren. Nederlands heeft ook zo z'n eigenaardigheden...)

;: aan het eind van elke regel staat een puntkomma. Daarmee geef je aan dat de regel is afgelopen. In een gewoon boek zou je hier een punt gebruiken, om aan te geven dat een nieuwe zin begint.

De hele regel nog eens in gewone mensentaal: als een <a> wordt gevolgd, voer dan functie 'geenHistory ()' uit.

Eerder is bij if (links[i].href.indexOf(pad) > 0) { een voorwaarde voor het uitvoeren van deze code opgegeven: in het adres moet '/menu/statisch/verticaal/menu-125.html#' voorkomen. Hierdoor wordt deze regel alleen uitgevoerd voor links binnen de pagina zelf. Alleen bij links binnen de pagina, wordt functie geenHistory () aangeroepen.

function geenHistory (e) {

Ook deze functie is, zoals elke functie, weer een stukje bij elkaar horende code. Maar anders dan de buitenste functie, wordt deze niet automatisch uitgevoerd. (Waarom de buitenste functie wel automatisch wordt uitgevoerd, is te vinden bij (function () {.)

De code in deze functie wordt alleen uitgevoerd, als de functie wordt aangeroepen. Dat aanroepen gebeurt, als een link wordt aangeklikt of -geraakt. (Of, als de link focus heeft, door het indrukken van Enter.) Het luisteren naar een aanraking of klik wordt geregeld bij links[i].addEventListener("click", geenHistory);.

De code in deze functie voorkomt dat de gevolgde link in de geschiedenis van de browser wordt opgeslagen.

function: het sleutelwoord waarmee het begin van een functie wordt aangegeven.

geenHistory: de naam van de functie. Als het beestje geen naam heeft, kun je het ook niet aanroepen en heb je er dus niets aan. (Dit klopt niet helemaal. JavaScript kent ook equivalenten van 'hé!', 'hé, jij daar!', 'hé, jij daar in die zwarte jas', en dergelijke, maar die worden hier niet gebruikt. En het is zo al ingewikkeld genoeg.)

(e): die haakjes horen nou eenmaal zo na de naam van een functie. Behalve dat het gewoon zo hoort, kun je hier ook van alles in stoppen om door te geven aan de code in het binnenste van de functie. Zoals de plaats waar het scherm is aangeraakt of -geklikt. In dit geval wordt e doorgegeven.

e is een zogenaamd object. In een object zitten allerlei gegevens over hoe de functie is aangeroepen (over dat aanroepen later meer). In dit geval wordt deze functie aangeroepen door het klikken op of aanraken van een <a>. In e zit bijvoorbeeld de hoogte en breedte van de <a>. En of toevallig ook Shift is ingedrukt. En nog 'n waanzinnige hoop andere informatie, waarvan het overgrote deel hier verder niet wordt gebruikt.

Heel formeel is e eigenlijk geen object, maar is e een parameter, iets dat wordt doorgegeven aan de functie, zodat het binnen die functie gebruikt kan worden. e is de naam van het object, en de inhoud van e is een object. Om het object iets te kunnen vragen, of het iets te laten doen, moet het beestje 'n naam hebben: e.

De naam e voor het object is niet verplicht, maar 'n soort afspraak, zodat code makkelijker door anderen is te begrijpen. Maar als je het object niet e, maar 'hetIsStervenskoud' wilt noemen, is daar technisch geen enkel bezwaar tegen. Het is dan wel verstandig een cursus zelfverdediging te volgen, voor het geval iemand anders ooit je code moet bekijken.

(e is een afkorting van 'event', gebeurtenis. De functie reageert op een gebeurtenis, in dit geval het volgen van een <a>. In e zit het object dat bij díé gebeurtenis hoort. Bij bijvoorbeeld een muisklik krijg je een ander object met andere informatie dan bij het indrukken van een toets.)

{: geeft het begin van de code binnen de functie aan. Aan het eind van de functie staat een bijbehorende }.

location.replace(e.target.href);

Deze regel is onderdeel van function geenHistory (e)

In deze ene regel gebeurt eigenlijk alles. De rest van het script was alleen voorbereiden, de juiste <a>'s eruit filteren, en dergelijke. Maar Hier Gebeurt Het. Dus.

Als een link wordt gevolgd, wordt deze normaal genomen opgeslagen in de geschiedenis van de browser. Met de Terug- en Vooruit-toets van de browser, en met toetscombinaties als Alt+← en Alt+→, kun je door die geschiedenis bladeren. Op die manier kun je snel eerder bezochte pagina's terugvinden.

Op deze pagina zijn veertien <a>'s aanwezig, waarvan er drie een link zijn om het menu te openen of te sluiten. Het is tamelijk zinloos om die drie links in de geschiedenis op te slaan. Je zou dan, als je het menu hebt geopend en gesloten en naar 'n vorige pagina wilt, eerst het menu nogmaals één of meer keren openen en sluiten, voordat je bij 'n vorige pagina aankomt.

Deze regel zorgt ervoor dat de links om het menu te openen en te sluiten wel worden gevolgd, maar dat deze niet in de geschiedenis terecht komen. (Je kunt er nog wel gewoon 'n favoriet (of bookmark, of hoe het beestje ook heet) van maken. Ook zit het adres nog gewoon in de lijst met bezochte adressen. Maar dat lijkt bij deze links wat nutteloos.)

(Eigenlijk zou je dus window.location.pathname moeten gebruiken, maar omdat 'window' zo vaak voorkomt, mag je dat weglaten: de browser vult dat automatisch aan.)

De informatie die in location zit, kan worden gewijzigd. Als dat gebeurt, verschijnt er een nieuw adres in de adresbalk van de browser, en de browser zal naar het nieuwe adres gaan.

replace: dit is een in JavaScript ingebouwde functie, een stukje bij elkaar horende code. Dat het een functie is, kun je weer zien aan de () achter de functie. De code in deze functie wordt uitgevoerd: vervang ('replace') het adres met het adres dat tussen de haakjes achter replace staat.

Je kunt het adres op meerdere manieren veranderen. In dit geval is het voordeel van replace() dat het nieuwe adres niet in de geschiedenis van de browser wordt opgeslagen. Je kunt er nog wel gewoon 'n favoriet (of bookmark, of hoe het beestje ook heet) van maken. Ook zit het adres nog gewoon in de lijst met bezochte adressen.

(e.target.href): dit is het nieuwe adres, alleen is het zo op het oog niet echt herkenbaar als een adres. Het adres zit verstopt in een variabele.

e: dit is de e die tussen de haakjes bij function geenHistory (e) stond. e is een object met een hele berg aan informatie over de link, die is aangeraakt of -geklikt. Deze informatie is beschikbaar voor de code binnen de functie en kan hier dus worden gebruikt.

Omdat een browser niet zo slim is, moet je hem wel even vertellen dat hij in e moet zoeken, vandaar dat e aan het begin staat.

target: dit is de specifieke <a>, en alle bij die <a> horende informatie, die is aangeraakt of -geklikt. In e zit nog meer informatie, zoals waar precies op het scherm is geklikt. Maar in target zit de informatie die bij de <a> hoort. (De <a> was het 'target' van de muisklik of aanraking.)

href: in href zit het adres van de <a>. Bij <a href="#nav"> (de link om het menu te openen) is dat bijvoorbeeld 'https://www.css-voorbeelden.nl/menu/statisch/verticaal/menu-125.html#nav'. In de html staat als doel in de href alleen '#nav", maar de browser maakt daar automatisch een volledig adres van. (Dit adres hoort natuurlijk bij de site met dit voorbeeld. Op een andere site zul je 'n ander adres krijgen.)

e.target.href: bij elkaar: het doel van de <a>, aangevuld tot het volledige adres.

De hele regel in normale mensentaal: vervang het adres van de pagina door het adres van de link, waarop is geklikt (of die is aangeraakt, of op 'n andere manier is gevolgd). Als gevolg hiervan zal de browser naar het nieuwe adres gaan. In dit geval is het adres eigenlijk geen echt adres, maar een link binnen de pagina waarmee het menu wordt geopend of gesloten. Dit nieuwe adres wordt ook zichtbaar in de adresbalk bovenin de browser. (Niet alle browsers tonen het volledige adres.)

Hoewel dit adres niet in de geschiedenis van de browser wordt opgeslagen, kan er gewoon een favoriet of bookmark (of hoe het beestje verder ook heet) van worden gemaakt. Ook staat het adres gewoon in de lijst met bezochte pagina's.

Uitleg verticaal slide-outmenu. Maakt gebruik van :target

Korte omschrijving

BELANGRIJK

Opmerkingen

Achterliggend idee

Semantische elementen en WAI-ARIA

Semantische elementen

<header>

<main>

WAI-ARIA-codes

aria-label

aria-hidden

Tabindex en Tab-toets

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Getest in

Desktopcomputers

Laptops

Tablets

Smartphones

Schermlezers en dergelijke

Bekende problemen (en oplossingen)

Zonder JavaScript

Zonder css

Gebruikers Tab-toets

Tekstbrowsers

Schermlezers

Zoomen en lettergroottes

Firefox op Android

UC browser op iOS

Opera Mini op iOS en Android

Alle browsers

Wijzigingen

Inhoud van de download en licenties

125-css-dl:

125-files-dl:

HTML

<!DOCTYPE html>

<html lang="nl">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="125-css-dl/menu-125-dl.css">

<a id="open" href="#nav" aria-label="Open menu">≡</a>

<span aria-hidden="true">Menu</span>

<nav id="nav">

<li><a class="sluit" href="#_" aria-label="Sluit en skip menu">X</a></li>

<a class="sluit" href="#_" aria-label="Einde menu bereikt. Sluit menu">X</a>

<main lang="la">

<p lang="nl"><a href="125-files-dl/pagina-11-dl.html">Dit is een extra link</a></p>

CSS

/* menu-125-dl.css */

body

header div

#open

header div span

nav

#nav:target

nav ul

nav li

nav a

.sluit

nav li:nth-of-type(2) a

nav li:last-child

nav li:last-child a

nav > .sluit

#open:focus, #open:hover, header a:focus, header a:hover, main a:focus, main a:hover

main

JavaScript

<script> en </script>

(function () {

"use strict";

var links, aantal, i,pad = location.pathname + "#";

links = document.getElementsByTagName("a");

aantal = links.length;

for (i = 0; i < aantal; i++) {

if (links[i].href.indexOf(pad) > 0) {

links[i].addEventListener("click", geenHistory);

function geenHistory (e) {

location.replace(e.target.href);

var links, aantal, i,
pad = location.pathname + "#";