Uitleg knoppen met toelichting en indicatie van huidige, bezochte en onbezochte pagina's

#checkbox-voor-smal

Het element met id="checkbox-voor-smal". Dit is een <input>-element type checkbox. Als de checkbox is aangevinkt, is het menu zichtbaar. Als de checkbox is uitgevinkt, is het menu niet zichtbaar.

Verberg de checkbox.

Verderop in de html staat label#toon-menu, dat met for aan deze checkbox is gekoppeld. Als je op dit <label> klikt of dit aanraakt, heeft dat hetzelfde effect, als wanneer je rechtstreeks deze checkbox aanklikt of aanraakt. Alleen kun je het <label> opmaken en tekst geven. Die tekst kun je wijzigen, afhankelijk van of de checkbox wel of niet is aangevinkt.

#menu

Het element met id="menu". Dit is de <nav> waarbinnen het hele menu staat.

Breedte van 0 geven. Dat is 'n beetje smal. Feitelijk zo smal, dat er helemaal geen breedte is. En dat is precies de bedoeling.

Normaal genomen zou je het menu toch zien, omdat overflow standaard op visible staat. Wat niet past binnen de breedte of hoogte, zie je toch. Dat is normaal genomen ook, wat je wilt. Mogelijk wordt de lay-out verstoord, maar je kunt in ieder geval alles zien.

In dit geval is dat niet de bedoeling. hidden zorgt ervoor dat wat niet past, ook echt niet wordt getoond. Bij een breedte van 0 zie je dus gewoon niets.

Bij #checkbox-voor-smal:checked + #menu wordt het menu zichtbaar gemaakt, door er een breedte aan te geven.

Om het menu op een bepaalde plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een relatieve, absolute of fixed positie heeft. Als die er niet is, zoals hier het geval is, wordt gepositioneerd ten opzichte van het venster van de browser.

40 px vanaf de bovenkant neerzetten. De menubalk aan de bovenkant krijgt bij #menubalk-voor-smal een hoogte van 40 px. Het menu komt hier dus precies onder te staan.

In principe is dit menu bedoeld voor kleinere touchscreens. Grotere schermen krijgen verderop een heel ander menu. Als geen bottom wordt opgegeven, wordt het menu niet hoger dan nodig is, om de tekst erin weer te kunnen geven.

Dat levert knoppen op die prima geschikt zijn voor babyvingertjes, maar waar 'n bootwerker niet echt gelukkig van wordt. Op deze manier loopt het menu door tot de onderkant van het browservenster. Bij #menu li wordt aan de knoppen van het menu een hoogte in procenten gegeven, zodat de knoppen altijd groot genoeg en netjes verdeeld zijn.

Hier staat in feite twee keer hetzelfde: transition: 0.5s; Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

Hierboven heb ik breedte van 0 opgegeven. Als ik nu bij :hover, :focus, :checked, en dergelijke een andere breedte opgeef, zorgt transition ervoor dat die breedte niet in één keer wordt veranderd bij hoveren en dergelijke, maar langzaamaan. Als de breedte van 0 wordt veranderd naar 90%, vindt die verandering geleidelijk aan plaats: geleidelijk van 0 naar 90%.

Internet Explorer 8 en 9 ondersteunen transition niet. In deze browsers vindt de verandering gewoon in één keer plaats, zonder vertraging.

Bij transition staat maar één waarde: 0.5s. Als er maar één waarde wordt opgegeven, bepaalt die over hoeveel tijd de verandering wordt uitgesmeerd. Dat is hier vrij kort: 'n halve seconde. Een eventuele tweede waarde, die hier ontbreekt, geeft een eventueel uitstel aan het begin van de verandering aan.

Het is ook mogelijk om het verloop van de verandering aan te geven met behulp van sleutelwoorden of getallen. Hiermee kun je bijvoorbeeld aangeven dat de verandering aan het eind snel of juist langzaam moet gaan. Bij een verandering die maar 0,5 seconde duurt, is het verschil nauwelijks te zien, dus dat wordt hier niet gebruikt.

transition brengt nog 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 ik bijvoorbeeld top en left beide wil veranderen bij :checked, kan ik bijvoorbeeld aangeven dat de geleidelijke verandering met behulp van transition alleen voor top geldt. left verandert dan gewoon in één keer.

Als ik niet opgeef, 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 iets heel traag zichtbaar wilt laten worden bij :hover en iets anders flitsend snel. Mogelijk wordt dat flitsend snel dan opeens ook heel traag. Daarom moet je absoluut zeker weten dat ook in de toekomst geen problemen kunnen ontstaan.

Als alle eigenschappen mogen worden vertraagd door transition, is er geen enkel risico voor de toekomst. Dat is hier het geval. Verderop bij #checkbox-voor-smal:checked + #menu verander ik de breedte. Verder verandert er niets. In dit geval mag dus alles vertraagd worden veranderd. Als dat niet zo zou zijn, zou ik moeten opgeven, voor welke eigenschappen transition geldt.

Als er bij #checkbox-voor-smal:checked + #menu eigenschappen staan die niet mogen worden vertraagd, zou ik altijd opgeven, voor welke eigenschappen transition geldt. Ook als transition nu nog niet werkt voor die andere eigenschappen, want mogelijk verandert dat in de toekomst.

Je kunt transition beperken tot bepaalde eigenschappen door die eigenschappen te noemen, gevolgd door tijdsduur en eventueel vertraging:

Nu geldt transition alleen voor width, wat er in de toekomst mogelijk ook verandert. Maar hier is dat dus niet nodig, omdat bij #checkbox-voor-smal:checked + #menu alleen width wordt gebruikt.

#menu ul

Alle ongeordende lijsten binnen een element met id="menu". Er is hier maar een <ul>, waarbinnen het menu staat.

Een hoogte in procenten is altijd ten opzichte van de ouder. Dat is hier #menu, dat bij #menu op 40 vanaf de bovenkant tot onderaan het browservenster is neergezet. De <ul> staat dus ook 40 px vanaf de bovenkant tot onderaan het venster.

De bolletjes en dergelijke die je automatisch ziet bij een <ul>, zijn hier niet welkom.

De standaardwaarden hiervan verschillen bij verschillende browsers. Door ze op 0 te zetten, zijn ze overal hetzelfde.

#menu li

Alle lijst-items binnen het element met id="menu". Dit zijn de <li>'s waarbinnen de links van het menu zitten.

Witte achtergrond. Hieronder wordt als achtergrond een gradiënt opgegeven. Maar oudere of simpele browsers die geen gradiënten kennen, negeren dit. Voor deze browsers wordt een witte achtergrondkleur opgegeven. Browsers die gradiënten wel kennen, gebruiken de regel hieronder, omdat deze later in de css staat en dus deze regel overrulet.

Het is wat lastig te zien, maar hier staat eigenlijk drie keer hetzelfde: background: linear-gradient (to bottom, #fff 0%, #bbb 100%);. Waarom het er drie keer staat, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-. Hieronder wordt alleen de derde vorm uitgelegd, want dat is de vorm volgens de uiteindelijke standaard.

Je kunt een gradiënt zelf uitvogelen, maar makkelijker is het om gebruik te maken van een gradiënt-editor. Ik heb gebruik gemaakt van de gradiënt-editor op colorzilla.com. Deze levert ook gelijk de oudere vormen, zodat je je daar zelf niet in hoeft te verdiepen. Hier heb ik dat niet gedaan, maar je kunt zelfs code voor oudere versies van Internet Explorer laten maken. (Nachtmerrie-code die gebruik maakt van een eigen techniek van Microsoft: filters.)

linear-gradient valt in een aantal delen uiteen.

to bottom: de kant waar de gradiënt naartoe gaat. Omdat alleen de onderkant is opgegeven, loopt de gradiënt loodrecht van boven naar onder.

Na de richting staan twee keer twee waarden, gescheiden door een komma. De eerste waarde is steeds de kleur, de tweede de plaats waar die kleur staat.

#fff 0%: de kleur #fff (wit) op 0% vanaf de bovenkant neerzetten (dat is helemaal bovenaan).

#bbb 100%: de kleur #bbb (lichtgrijs) op 100% vanaf de bovenkant neerzetten (dat is helemaal onderaan).

Er zijn twee plaatsen opgegeven die een bepaalde kleur moeten krijgen: boven- en onderaan. De overgang tussen die kleuren verloopt geleidelijk, dat regelt de browser verder. Dit is een hele simpele gradiënt, maar je kunt ook tig kleuren op tig plaatsen aangeven. En ook nog in allerlei richtingen.

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder. Dat is hier #menu. Die breedte ligt hier wat ingewikkeld, omdat de breedte van #menu niet altijd hetzelfde is. Bij #menu is een breedte van 0 gegeven. Bij #checkbox-voor-smal:checked + #menu is de breedte 90%. Deze verandering in breedte duurt 0,5 seconden, waardoor het menu vanaf de linkerkant naar binnen lijkt te schuiven.

Er moeten twee <li>'s naast elkaar komen te staan. Dus zou je hier 50% breedte op moeten geven, zou je denken. Want dan vult elke <li> steeds de helft van de breedte van #menu, hoe breed die ook is.

Zo simpel blijkt het niet te werken bij gebruik van transition om de breedte geleidelijk te veranderen. Als je hier gewoon 50% invult, komt er tijdens het openen maar één <li> op elke regel te staan. Als het menu open is, verspringt het dan naar twee <li>'s naast elkaar. Als je een hele kleine breedte aan de <li>'s geeft, komen er tijdens het openen meer dan twee <li>'s naast elkaar te staan en krijg je 'n hele serie verspringing tijdens het openen.

Een breedte van 35% blijkt beide vormen van verspringen te voorkomen. Bij #checkbox-voor-smal:checked + #menu li wordt de uiteindelijke breedte dan 49,5% (geen 50%, omdat er ook nog 'n border bij komt).

Een hoogte in procenten is altijd ten opzichte van de ouder. Dat is hier de <ul>, die bij #menu ul op 40px van de bovenkant tot aan de onderkant van het browservenster is neergezet. Elke <li> vult dus een vijfde van deze hoogte.

(Omdat er maar vier <li>'s boven elkaar staan, zou je ook 25% kunnen nemen, maar dit is groot genoeg voor vingers en ik vind het mooier.)

In iets hogere vensters worden de knoppen wel érg hoog. Daarom wordt er een maximumhoogte aan gegeven. Dit geeft bovendien de mogelijkheid om de tekst op de knoppen verticaal te centreren. Daarvoor wordt hieronder bij #menu a een regelhoogte opgegeven.

Binnen elke <li> staat een <a> met tekst. Als de tekst niet binnen de <li> past, omdat deze tijdens het openen nog te smal is, wordt de tekst toch getoond. Normaal genomen is dat ook wat je wilt. Mogelijk wordt de lay-out wat verstoord, maar in ieder geval kun je alles zien.

Hier is dat echter lelijk, omdat de tekst hier tijdens het openen korte tijd buiten de <li> staat. En uiteindelijk is de tekst gewoon zichtbaar, als het menu is geopend. Daarom wordt de tekst die niet binnen de <li> past verborgen.

Een <li> is een blok-element. Dat betekent onder andere dat elke <li> op een nieuwe regel komt te staan. Door ze naar links te floaten, komen er zoveel mogelijk op dezelfde regel te staan. Omdat elke <li> bij #checkbox-voor-smal:checked + #menu li een breedte van 49,5% krijgt, komen er twee naast elkaar te staan.

Tekst horizontaal centreren.

Als de browser geen gradiënten kent, is de achtergrond effen wit. Daardoor is de grens tussen de knoppen, en dus tussen de daarin zittende links, niet te zien. Waardoor je niet weet, waar je de knoppen precies moet aanraken of -klikken. Door een randje tussen de knoppen aan te brengen, zie je de grens van de knoppen.

Hier worden alleen kleur en stijl opgegeven, gelijk hieronder wordt de dikte opgegeven.

Hier gelijk boven zijn kleur en stijl opgegeven. Boven en links een dikte van 1 px, rechts en onder geen border.

Het apart opgeven van de dikte voorkomt hier twee volledige regels voor border-top en border-left. Hierdoor wordt wat css uitgespaard.

Bij #checkbox-voor-smal:checked + #menu li wordt, als de checkbox is aangevinkt, de breedte van 35% naar 49,5% veranderd. Deze regel zorgt ervoor dat de verandering niet in één keer, maar geleidelijk gedurende 'n halve seconde plaatsvindt. De verandering van breedte en het gebruik van transition is nodig, om te zorgen dat ook tijdens het openen en sluiten van het menu altijd twee <li>'s naast elkaar staan.

De uitleg is precies hetzelfde als bij -webkit-transition: 0.5s; transition: 0.5s;, alleen wordt de breedte hier niet naar 50%, maar naar 49,5% veranderd.

#menu a

Alle links binnen het element met id="menu". Dit zijn de links binnen het menu.

Voorgrondkleur, waaronder de kleur van de tekst, zwart. Normaal genomen krijgt tekst binnen een link een afwijkende kleur. Dat vind ik hier niet mooi.

Van zichzelf is een <a> een inline-element. Door er 'n blok-element van te maken, kunnen eigenschappen als hoogte worden gebruikt.

Een hoogte in procenten wordt altijd ten opzichte van de ouder genomen. Dat is hier de <li>, waar de link in zit. De <a> wordt hier dus even hoog gemaakt als de <li>.

Normaal genomen is alleen de tekst binnen link gevoelig voor klikken of aanraken. Door de link even hoog te maken als de <li>, wordt de hele hoogte van de <li> gevoelig voor aanraken of klikken. Dit is ook wat mensen verwachten, als ze zo'n menubalk met knoppen zien.

Omdat de <a> hierboven in een blok-element is veranderd, is het opgeven van een breedte niet nodig. Een blok-element wordt normaal genomen automatisch even breed als z'n ouder. Hier wordt de <a> even breed als de <li>.

Tekst wordt automatisch in het midden van de regelhoogte gezet. Bij #menu li is aan de <li>'s een hoogte van 50 px gegeven. Als ik de regelhoogte van deze link ook 50 px maak, staat de tekst dus automatisch verticaal gecentreerd.

Maar hieronder wordt aan de bovenkant een padding van 4 px gegeven. Als de tekst in het midden moet komen, moet ik aan de onderkant ook 4 px vrij houden. Om de tekst verticaal te centreren, moet de regelhoogte dus 50 px – 2 x 4 px = 42 px worden.

Normaal genomen worden links onderstreept. Dat is hier overbodig, omdat zo ook wel duidelijk is dat het om 'n menu met links gaat. Het is hier ook niet mooi.

Opera Mini negeert regelhoogte. Nu heeft ook deze browser 'n kleine afstand tussen de tekst van de link en de bovenkant van de knop.

#menubalk-voor-smal

Het element met id="menubalk-voor-smal". Dit is de div, waarbinnen de tekst 'Menu open' of 'Menu dicht' staat.

Witte achtergrond. Hieronder wordt als achtergrond een gradiënt opgegeven. Maar oudere of simpele browsers die geen gradiënten kennen, negeren dit. Voor deze browsers wordt een witte achtergrondkleur opgegeven. Browsers die gradiënten wel kennen, gebruiken de regel hieronder, omdat deze later in de css staat en dus deze regel overrulet.

Het is wat lastig te zien, maar hier staat eigenlijk drie keer hetzelfde: background: linear-gradient (to bottom, #fff 0%, #bbb 100%). Waarom het er drie keer staat, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-. Hieronder wordt alleen de derde vorm uitgelegd, want dat is de vorm volgens de uiteindelijke standaard.

Je kunt een gradiënt zelf uitvogelen, maar makkelijker is het om gebruik te maken van een gradiënt-editor. Ik heb gebruik gemaakt van de gradiënt-editor op colorzilla.com. Deze levert ook gelijk de oudere vormen, zodat je je daar zelf niet in hoeft te verdiepen. Hier heb ik dat niet gedaan, maar je kunt zelfs code voor oudere versies van Internet Explorer laten maken. (Nachtmerrie-code die gebruik maakt van een eigen techniek van Microsoft: filters.)

linear-gradient valt in een aantal delen uiteen.

to bottom: de kant waar de gradiënt naartoe gaat. Omdat alleen de onderkant is opgegeven, loopt de gradiënt loodrecht van boven naar onder.

Na de richting staan twee keer twee waarden, gescheiden door een komma. De eerste waarde is steeds de kleur, de tweede de plaats waar die kleur staat.

#fff 0%: de kleur #fff (wit) op 0% vanaf de bovenkant neerzetten (dat is helemaal bovenaan).

#bbb 100%: de kleur #bbb (lichtgrijs) op 100% vanaf de bovenkant neerzetten (dat is helemaal onderaan).

Er zijn twee plaatsen opgegeven die een bepaalde kleur moeten krijgen: boven- en onderaan. De overgang tussen die kleuren verloopt geleidelijk, dat regelt de browser verder. Dit is een hele simpele gradiënt, maar je kunt ook tig kleuren op tig plaatsen aangeven. En ook nog in allerlei richtingen.

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

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hierboven heb ik een achtergrondkleur opgegeven. Sommige mensen hebben zelf de kleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik 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.

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder. Dat is hier <body>, die even breed is als het venster van de browser. (Op smallere schermen zoals die van mobieltjes is dat venster even breed als het scherm.)

Deze <div>, en dus de daarin zittende menubalk, is dus even breed als het venster van de browser.

Hoogte. Ik gebruik als eenheid px en geen em. In het algemeen is het beter om voor mobiele apparaten relatieve eenheden zoals em te gebruiken. Als ik hier echter px gebruik, kan ik het hieronder staande menu exact op deze menubalk laten aansluiten. Met een relatieve eenheid als em is dat veel lastiger.

#toon-menu

Het element met id="toon-menu". Dit is het <label> dat bij de checkbox hoort. Het staat in browservensters smaller dan 740 px bovenaan de pagina.

Oudere versies van Android hebben een bug, waardoor een pseudo-class die wordt gevolgd door de selector ~ ('general sibling') niet verandert. Dit gebeurt hier bij #checkbox-voor-smal:checked ~ #menubalk-voor-smal #toon-menu:after, waar de pseudo-class :checked wordt gevolgd door een ~. Hierdoor verandert 'open' niet in 'dicht', als het menu opent.

Iets grotere letter.

Regelhoogte. Bij #menubalk-voor-smal heeft de ouder van #toon-menu een hoogte van 40 px gekregen. Tekst wordt automatisch halverwege de regelhoogte gezet. Door de regelhoogte even hoog te maken als de hoogte van #menubalk-voor-smal, wordt de tekst automatisch verticaal gecentreerd in de menubalk.

(<label> is een inline-element. De regelhoogte van een inline-element kan nooit kleiner zijn dan de regelhoogte van het blok-element, waar het in staat. Wel groter. Hier heeft het #menubalk-voor-smal, het blok-element dat de ouder van #toon-menu is, geen regelhoogte, dus hier speelt dat probleem niet.)

Tekst onderstrepen, zodat duidelijk is dat dit (een soort) link is.

Kleine afstand tussen linkerkant van de tekst en zijkant van de menubalk.

@-webkit-keyframes bugfix

Bij #toon-menu is een animatie toegevoegd om een bug in oudere versies van Android op te lossen. Hier wordt de animatie opgegeven. Als je nou denkt dat hier niets wordt uitgevoerd, omdat de padding links van 10 px in een padding links van 10 px wordt veranderd, dan heb je helemaal gelijk.

Toch neutraliseert deze flauwekul-animatie de bug in Android.

#toon-menu:after

Doe iets achter het element met id="toon-menu". Dit is de <label>, waarbinnen 'Menu ' staat. Dit <label> hoort bij de checkbox, die het tonen en verbergen van het menu regelt.

Zet 'open' achter label#toon-menu. In de html is opgegeven dat in <label> altijd het woordje 'Menu ' (met spatie erachter) moet staan. Door hierachter 'open' toe te voegen, staat er nu 'Menu open'. Omdat het hele <label> in de menubalk bovenaan de pagina staat, staat er in die menubalk nu 'Menu open'.

Hier gelijk onder wordt het woordje 'open' in 'dicht' veranderd, zodra de checkbox is aangevinkt.

Omdat oudere browsers mogelijk niet goed met content uit de voeten kunnen, moet je nooit belangrijke informatie via content genereren.

#checkbox-voor-smal:checked ~ #menubalk-voor-smal #toon-menu:after

Een wat ingewikkeld ogende selector, maar als je hem in stukjes hakt, valt het hopelijk mee.

#checkbox-voor-smal: het element met id="checkbox-voor-smal". Dit is een <input>-element type checkbox.

:checked: maar alleen als de checkbox is aangevinkt.

~: de 'general sibling' selector. Het hierop volgende element moet dezelfde ouder hebben als het voorafgaande element. De structuur van de html is, vereenvoudigd weergegeven, als volgt:

Het op ~ volgende element moet dezelfde ouder hebben als het ervoor staande #checkbox-voor-smal. Aan deze eis voldoen hier alleen nav#menu, div#sluitbalk, div#menubalk-voor-smal en div#content. Het moet dus één van deze elementen zijn. Maar anders dan wanneer je de + gebruikt, hoeft het tweede element niet direct op het eerste te volgen. Als het maar dezelfde ouder heeft.

#menubalk-voor-smal: het op de ~ volgende element moet een id="menubalk-voor-smal hebben. Dat is er maar eentje: de menubalk die bovenaan de pagina staat (en die verderop wordt verborgen in browservensters breder dan 740 px).

De selector #checkbox-voor-smal + nav#menu + div#sluitbalk + div#menubalk-voor-smal zou precies hetzelfde werken in dit geval, maar de ~ maakt het 'n stuk korter (en overzichtelijker).

#toon-menu: het element met id="toon-menu". Omdat het gelijk na #menubalk-voor-smal staat, met alleen 'n spatie ertussen, moet het binnen #menubalk-voor-smal liggen. Dit is het <label>, waarin 'Menu open' of 'Menu dicht' staat.

:after: dit pseudo-element maakt het, in combinatie met content hieronder, mogelijk tekst achter het <label> te plaatsen.

De hele selector nog 'ns in normale mensentaal:

Doe iets achter label#toon-menu, dat binnen div#menubalk-voor-smal ligt. #menubalk-voor-smal moet dezelfde ouder hebben als input#checkbox-voor-smal. En er mag alleen iets gedaan worden, als #checkbox-voor-smal is aangevinkt.

Deze constructie maakt het mogelijk om een verandering aan te brengen in 'n element dat 'n heel eind onder de checkbox staat, afhankelijk van of de checkbox is aangevinkt of niet. Waarbij het geen enkel verschil maakt dat de checkbox zelf bij #checkbox-voor-smal is verborgen.

In label#toon-menu staat altijd het woordje 'Menu ' (met 'n spatie erachter). Dat is gewoon in de html opgegeven. Als de checkbox is aangevinkt, komt daar het woordje 'dicht' achter te staan.

Bij #toon-menu:after wordt opgegeven dat normaal genomen 'open' achter 'Menu ' staat. Maar zodra de checkbox is aangevinkt, wordt dit vervangen door 'dicht'.

Bij #checkbox-voor-smal:checked + #menu wordt het menu geopend, als de checkbox is aangevinkt. Als de checkbox niet is aangevinkt, zie je het menu niet. Normaal genomen, als je het menu niet ziet, staat er dus 'Menu open' in label#toon-menu. Als de checkbox is aangevinkt en het menu zichtbaar is, staat er 'Menu dicht'. Omdat het hele <label> in de menubalk bovenaan de pagina staat, staat deze tekst ook daar.

Omdat oudere browsers mogelijk niet goed met content uit de voeten kunnen, moet je nooit belangrijke informatie via content genereren.

#sluitbalk

Het element met id="sluitbalk". Dit is op iOS nodig om de pop-ups weer te kunnen sluiten.

Dit element is alleen nodig in browservensters breder dan 740 px, dus kan het hier worden verborgen.

#checkbox-voor-smal:checked + #menu

Doe iets met het element met id="menu" dat gelijk volgt op het element met id="checkbox-voor-smal", maar alleen als #checkbox-voor-smal is aangevinkt.

Binnen #menu zit het hele menu.

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder. Dat is hier <body>, dat even breed is als het venster van de browser. (Op kleine apparaten als mobieltjes is dat gelijk de breedte van het scherm.) #menu krijgt hier een breedte van 90% van het venster.

Bij #menu is de hele opmaak van het menu al opgegeven. Er is daar een breedte van 0 aan het menu gegeven, waardoor het onzichtbaar is. Door een breedte aan het menu te geven, wordt het zichtbaar. Doordat bij deze verandering van breedte een transition van 'n halve seconde is opgegeven, lijkt het menu te openen vanaf de linkerkant.

#checkbox-voor-smal:checked + #menu li

Doe iets met de <li>'s binnen het element met id="menu", dat gelijk volgt op het element met id="checkbox-voor-smal", maar alleen als #checkbox-voor-smal is aangevinkt.

Binnen deze <li>'s zitten de links van het menu.

Bij #menu li is een breedte van 35% opgegeven, en een transition van 0,5 seconde. De verandering van breedte duurt dus 'n halve seconde.

Deze combinatie van breedtes en transition is nodig om te zorgen dat er ook tijdens openen en sluiten van het menu altijd twee <li>'s naast elkaar staan.

#content

Het element met id="content". Binnen dit element staat de gewone tekst.

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

Boven en onder geen padding, links en rechts 'n afstand tussen tekst en buitenkant van de div.

@media screen and (min-width: 740px)

De css die hier tot nu toe staat, geldt voor alle browservensters. De css die hieronder staat, geldt alleen voor vensters breder dan 740 px. Voor een deel is dit nieuwe css, voor een deel wordt hierboven staande css aangepast.

Browsers die dit niet begrijpen, gebruiken de hieronder staande css niet, maar alleen wat hierboven staat. Misschien is het resultaat daarvan niet mooi, maar het werkt in ieder geval.

@media: geeft aan dat het om css gaat die alleen van toepassing is, als aan bepaalde voorwaarden wordt voldaan. Al langer bestond de mogelijkheid, om met behulp van zo'n regel css voor bijvoorbeeld printers op te geven. css3 heeft dat uitgebreid tot bepaalde fysieke eigenschappen, zoals de breedte en hoogte van het venster van de browser.

screen: deze regel geldt alleen voor schermweergave. Als je wilt printen, is het beter een stylesheet daarvoor te baseren op de algemene css die hierboven staat.

and: er komt nóg een voorwaarde, waaraan moet worden voldaan.

(min-width: 740px): het browservenster moet minstens 740 px breed zijn. Is het venster smaller, dan wordt de css die binnen deze media-regel staat genegeerd.

Gelijk na deze regel komt een { te staan, en aan het einde van de css die binnen deze regel valt een bijbehorende afsluitende }. Die zijn in de regel hierboven weggevallen, maar het geheel ziet er zo uit:

Voor de eerste css binnen deze media-regel staat dus een extra {, en aan het eind staat een extra }.

#menu

Het element met id="menu". Dit is de <nav> waarbinnen het hele menu staat.

Voor dit element geldt ook de bij #menu opgegeven css, voor zover die hier niet wordt veranderd.

Bij #menu is een breedte van 0 opgegeven. Hier wordt de standaard-instelling weer opgegeven: auto.

In het geval van een blok-element zoals een <nav> wil dit zeggen, dat het blok-element normaal genomen even breed wordt als z'n ouder. Dat is hier <body>. Waardoor #menu even breed wordt als het venster van de browser.

Bij #menu is overflow op hidden gezet. Hier wordt het weer op de standaardwaarde gezet. Zou je dat niet doen, dan worden de pop-ups niet getoond, want die passen niet binnen #menu.

Wat ruimte tussen menu en bovenkant van het venster van de browser.

Bij #menu is een absolute positie opgegeven om het menu te kunnen positioneren. Hier gebeurt dat op een andere manier, dus de absolute positie is niet meer nodig.

De standaardinstelling van position is static, maar hieronder wordt een z-index opgegeven. En een z-index werkt alleen maar bij een absolute, fixed of relatieve positie.

Bij #menu is top: 40px; opgegeven. Dat is hier niet meer nodig.

Normaal genomen wordt latere html over eerdere heengezet. In dit geval komt de tekst van de pagina over de pop-up te staan, omdat #content na #menu komt in de html.

Door een hogere z-index te geven aan het menu, komt #menu en alles daarbinnen, waaronder de pop-ups, toch boven de andere elementen op de pagina te staan.

De tekst 'een menu met' links op de afbeelding hoort bij de tekst op de pagina zelf en staat, zonder z-index, over de pop-up. Rechts heeft #menu een z-index en staat de pop-up over de tekst op de pagina heen.

Een z-index van 1 zou ook voldoende zijn, maar nu kun je nog nummers tussenvoegen, als er later meer elementen een z-index moeten krijgen.

Een z-index werkt alleen maar, als het element absoluut, fixed of relatief is gepositioneerd. Hierboven is #menu relatief gepositioneerd, dus dat is geregeld.

#menu ul

Voor dit element geldt ook de bij #menu ul opgegeven css, voor zover die hier niet wordt veranderd.

Alle ongeordende lijsten binnen het element met id="menu". Dat is er hier maar eentje. Het menu staat erin.

In brede browservensters kan het menu heel breed worden. Daarom wordt de maximumbreedte beperkt tot 900 px.

Omdat voor onder en links geen waarde is 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 rechts geen marge, links en rechts auto, wat in dit geval betekent: evenveel. Het menu staat dus altijd horizontaal gecentreerd, ongeacht de breedte van het venster van de browser.

Deze manier van horizontaal centreren van een blok-element werkt alleen maar, als het te centreren blok-element een breedte heeft.

#menu li

Voor dit element geldt ook de bij #menu li opgegeven css, voor zover die hier niet wordt veranderd.

Alle lijst-items binnen het element met id="menu". Dit zijn de <li>'s, waarbinnen de links van het menu zitten.

Achtergrond blauw.

Hoogte.

Bij #menu li is overflow op hidden gezet. Hier wordt het weer op de standaardwaarde gezet. Zou je dat niet doen, dan worden de pop-ups niet getoond.

Bij #menu li is een border aan de <li>'s gegeven. Weghalen.

Padding aan de onderkant. De blauwe achtergrondkleur loopt, anders dan bij een marge, bij een padding gewoon door.

Onderaan de menubalk staan gekleurde strepen van 5 px hoog. De padding valt hieronder. Zonder padding zou bij inzoomen (vergroten) soms een kier tussen de blauwe achtergrondkleur en de gekleurde strepen ontstaan.

De links binnen het menu (en daarmee ook de gekleurde strepen en pop-ups) moeten worden gepositioneerd ten opzichte van #menu. Dat kan alleen als #menu zelf absoluut, relatief of fixed is gepositioneerd. Omdat er verder geen waarden bij top en dergelijke worden opgegeven, heeft dit op #menu zelf geen enkele invloed.

Waarom deze eigenschap wordt voorafgegaan door -ms-, kun je vinden bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

user-select is nog geen onderdeel van 'n standaard. Waarschijnlijk zal dat geen tien jaar meer duren, want alle browsers herkennen deze eigenschap al (voorafgegaan door het voorvoegsel dat bij de browser hoort).

user-select: none; zorgt ervoor dat de gebruiker geen tekst kan selecteren. In dit geval dus geen tekst die binnen de <li> staat. Op een touchscreen heeft Internet Explorer 10 de neiging de tekst te selecteren, waardoor de link niet in de balk wordt gezet en dus niet kan werken. Deze regel blokkeert het selecteren van de tekst, waardoor alles werkt, zoals het wordt verondersteld te werken.

Omdat dit probleem alleen in Internet Explorer 10 speelt, gebruik ik de vorm voor Opera, Firefox, enz. niet. Ook de vorm zonder het voorvoegsel -ms- gebruik ik niet, omdat niet duidelijk is, of dit probleem in toekomstige versies van Internet Explorer nog bestaat.

#menu li:nth-child(odd)

Voor dit element geldt ook de bij #menu li (voor smalle vensters) en #menu li (voor vensters breder dan 740 px) opgegeven css, voor zover die hier niet wordt veranderd.

Met de pseudo-class :nth-child() kun je een element dat op een bepaalde plaats staat selecteren: de eerste, de tweede, de derde, enz. Eventueel van achteraf geteld. Deze selector kent ook een aantal sleutelwoorden, waaronder odd, wat 'oneven' betekent.

:nth-child(odd) betekent: alle oneven elementen. De eerste, de derde, de vijfde, enz. En omdat er li voor staat, heeft het alleen effect op <li>'s. Die ook nog binnen het element met id="menu" moeten staan. Dit zijn de <li>'s waarbinnen de links van het menu staan.

In normale mensentaal: elke oneven <li> binnen het menu.

Internet Explorer 8 kent deze selector niet, maar daar speelt het hieronder beschreven afrondingsprobleem niet, dus die krijgt verderop eigen css om de <li>'s 12,5% breed te maken.

Er staan acht <li>'s met in elk een <a> binnen het menu. Als je ze allemaal even breed wilt maken, zou je ze 12,5% breed moeten maken. Dit levert echter 'n probleem op in op webkit gebaseerde browsers zoals Google Chrome, Safari en Android browser.

Als je in deze browsers bij 'n breedte in procenten decimalen gebruikt, worden deze naar beneden afgerond. Waardoor 8 x 12,5 geen 100, maar 96% wordt. In browservensters smaller dan 900 px moet de menubalk de volle breedte vullen, maar in deze browsers houd je rechts 'n lelijke kier van met een breedte van 4% over.

Inmiddels is dit gerepareerd in de desktopversies van Google Chrome en Safari, maar nog niet op iOS en Android. Om die lelijke kier te voorkomen wordt afwisselend 'n breedte van 12 en 13% gebruikt. 4 x 12 + 4 x 13 is samen ook 100%, en dit wordt niet afgerond. Als je goed kijkt, kun je zien dat de ene onderstreping iets langer is dan de andere, maar je moet wel verrekte goed kijken om dat te zien. Feitelijk denk ik dat, als je het niet weet, het gewoon helemaal niet opvalt.

#menu li:nth-child(even)

Hiervoor geldt precies hetzelfde verhaal, als gelijk hierboven staat, maar nu voor de even <li>'s.

#menu li:before

Doe iets vóór elke <li> die binnen het element met id="menu" staat. Dat 'iets doen' is hier het neerzetten van wat tekst, die bij elke <li> anders moet zijn. De tekst zelf wordt verderop apart voor elke <li> opgegeven. Maar er is 'n aantal gemeenschappelijke eigenschappen, en die kan ik hier in één keer opgeven voor alle <li>'s.

De tekst zelf is de tekst die je binnen de menubalk ziet staan, als die nog niet is aangeraakt of als je daar nog niet over hovert.

Voorgrondkleur wit, waardoor ook de tekst wit wordt.

Vette letter.

Bij #menu li hebben de <li>'s een hoogte van 34 px gekregen. Tekst wordt automatisch halverwege de regelhoogte neergezet. Door de regelhoogte even hoog te maken als de <li>, wordt de tekst automatisch verticaal gecentreerd.

Tekst horizontaal centreren.

#menu li:first-child:before

Voor dit pseudo-element geldt ook de bij #menu li:before opgegeven css, voor zover die hier niet wordt veranderd.

Doe iets vóór elke <li> die een eerste kind is en binnen het element met id="menu" staat. Omdat er maar één <ul> binnen #menu staat, is er maar één serie <li>'s, en kan er dus maar eentje 'n eerste kind zijn: de <li> waarbinnen de eerste link staat.

De pseudo-class :first-child wordt hier samen met het pseudo-element :before gebruikt, maar dat kan gewoon. Je kunt meerdere van dit soort pseudo-gevallen achter elkaar zetten.

Hieronder wordt met behulp van content tekst gegenereerd. Bij deze <li> gaat het om het woord 'Home', bij de andere <li>'s gaat het om 'Pagina 1' tot en met 'Pagina 7'.

Deze zelfde tekst staat ook in de links. Normaal genomen staan de links buiten de menubalk, pas bij aanraken van of hoveren over 'n knop wordt de link binnen de balk geplaatst. Dit is nodig om te voorkomen dat op een touchscreen bij de eerste aanraking de link wordt gevolgd.

Als de tekst op de normale manier zou worden neergezet, niet met behulp van :before en content, zouden screenreaders twee keer het woord 'Home' lezen. Maar met content gegenereerde tekst wordt door de meeste screenreaders genegeerd, waardoor dit meestal niet zal gebeuren.

Zet het woord 'Home' in de <li>.

Omdat oudere browsers mogelijk niet goed met content uit de voeten kunnen, moet je nooit belangrijke informatie via content genereren.

Deze eigenschap is nog vrij nieuw. Hij wordt nog niet gevalideerd door de css-validator. De meeste browsers, screenreaders, en dergelijke kennen hem ook nog niet, maar VoiceOver in OSX schijnt hem al te kennen.

De waarde none voorkomt voorlezen. Als een screenreader toch de door content gegenereerde tekst zou herkennen, voorkomt deze regel het voorlezen ervan.

#menu li:nth-child(2):before

tot en met

#menu li:nth-child(8):before

Deze zeven regels zijn vrijwel hetzelfde als die bij #menu li:first-child:before. Daarom is de uitleg die daar staat ook grotendeels hier van toepassing. Er zijn maar twee verschillen:

:first-child is vervangen door :nth-child(...). In plaats van :first-child zou je ook kunnen gebruiken: :nth-child(1). Het eerste kind. :nth-child(2) betekent gewoon: het tweede kind. :nth-child(3) het derde kind. Enz.

content: hierachter staat geen 'Home', maar de tekst die bij deze link hoort. Tussen 'Pagina' en het nummer van de pagina staat geen spatie, maar \0000a0. Dit is de code voor een 'vaste spatie'.

Een vaste spatie ziet eruit als een spatie, maar de woorden blijven altijd bij elkaar op dezelfde regel. In html kun je   ('no-break space') gebruiken, maar bij tekst die met behulp van content wordt gegenereerd, werkt dat niet. Hier wordt de unicode voor een vaste spatie gebruikt: 0000a0. Dit soort codes is gewoon op internet op te zoeken.

Als je echter gewoon Pagina0000a01 zou gebruiken, wordt precies dat trouwhartig op het scherm gezet. Je moet de computer laten weten dat ergens 'n unicode begint. Dat doe je met 'n zogenaamd 'escape'-teken: de \. De \ geeft aan dat de zes cijfers en letters erachter geen echte tekst zijn, maar een unicode. Waarna de unicode netjes wordt vertaald naar wat hij voor moet stellen. Hier dus een vaste spatie.

Er wordt hier 'n vaste spatie gebruikt, omdat het erg chaotisch en onduidelijk wordt, als het volgnummer van de pagina in z'n eentje op 'n nieuwe regel komt te staan. Nadeel is dat bij een heel grote lettergrootte in Safari op OSX of Firefox op de desktop het volgnummer van de pagina onder de knop rechts ervan kan verdwijnen. Maar dat gebeurt pas bij een vergroting van meer dan 170%.

Bij hoveren over of aanraken van een knop in de menubalk, moet de bijbehorende link binnen die knop worden geplaatst. Die link bevat dezelfde tekst als die in de menubalk. Daarom moet bij de tekst in de link ook een vaste spatie worden gebruikt: Pagina 1. Ongeacht de lettergrootte staat de tekst in de link nu altijd precies boven de tekst die al in de menubalk staat.

Internet Explorer 8 kent nth-child() niet, die krijgt later eigen .css.

#menu a

Voor dit element geldt ook de bij #menu a opgegeven css, voor zover die hier niet wordt veranderd.

De links die binnen het element met id="menu" zitten. Dit zijn de links van het menu.

Normaal genomen staan deze links aan de linkerkant buiten het scherm. Pas als over de menubalk wordt gehoverd, of als deze wordt aangeraakt, worden de links binnen de juiste knop geplaatst. Hierdoor kan op een touchscreen de eerste aanraking de pop-up openen, en pas de tweede aanraking de link volgen.

De tekst van de links ('Menu', 'Pagina 1', enz.) staat al binnen de menubalk. Maar deze links moeten ook tekst hebben, anders werken ze niet. Je zou ook alleen 'n vaste spatie in de links kunnen zetten of zoiets, maar als 'n browser niet uit de voeten kan met de gegenereerde tekst uit de menubalk, zie je dan helemaal geen tekst. En in browservensters smaller dan 740 px is er helemaal geen menubalk, dus ook geen tekst die daarin staat.

Daarom wordt die tekst gewoon nog 'ns herhaald binnen de links. Als de link in de menubalk wordt neergezet, komt de tekst uit de <a> exact boven de tekst in de menubalk te staan, zodat er voor het oog maar één tekst staat.

Geen achtergrondkleur. Deze links staan in li>'s die al 'n donkerblauwe achtergrondkleur hebben. Ze hoeven zelf dus geen kleur te hebben.

Hieronder geef ik een witte voorgrondkleur op. Voor het geval de gebruiker een eigen stylesheet heeft, geef ik daarom hier expliciet op dat de link geen achtergrondkleur hoeft te hebben. Dat voorkomt dat de witte tekst mogelijk op 'n gele achtergrond komt te staan, of 'n andere ongelukkige combinatie.

Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand. Tekst en achtergrond blijven dan gewoon op de door de gebruiker ingestelde kleuren staan.

Voorgrondkleur wit. Dit is onder andere de kleur van de tekst. Deze witte tekst komt op de donkerblauwe achtergrond van de <li>'s, zodat er voldoende contrast is.

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder. Dat is hier <li>, die bij #menu li:nth-child(odd) of #menu li:nth-child(even) een breedte van 12 of 13% heeft gekregen, zodat er acht <li>'s naast elkaar in de menubalk passen.

(Die 12 en 13% is ook weer ten opzichte van de ouder. De hele keten is hier: <a> → <li> → <ul> → <nav> → <body>. En omdat onderweg geen van deze elementen een breedte heeft gekregen, is uiteindelijk de breedte van <body> bepalend: de volle breedte van het browservenster. Uiteindelijk zijn die 12 en 13% dus ten opzichte van het browservenster. De enige beperking is dat de <ul> bij #menu ul een maximumbreedte van 900 px heeft gekregen.)

De tekst die al in de menubalk staat, en waar de links met tekst overheen komen te staan, is vet, dus deze moet ook vet zijn.

De tekst die al in de menubalk staat, en waar de links met tekst overheen komen te staan, heeft een regelhoogte van 34 px, dus deze regelhoogte moet ook 34 px zijn.

Bij #menu a is een padding van 4 px aan de bovenkant gegeven. Die moet weg, want de tekst die al in de menubalk staat, en waar de links met tekst overheen komen te staan, heeft ook geen padding.

Om de link op de juiste plaats te kunnen positioneren. Er wordt gepositioneerd ten opzichte van de eerste voorouder die een fixed, absolute of relatieve positie heeft. Dat is hier de <li> waar de link in staat.

Van zichzelf is een <a> een inline-element. Door het absoluut te positioneren verandert het in een soort blok-element, waardoor eigenschappen als breedte zijn te gebruiken.

Normaal genomen zou de <a> onder de tekst in de menubalk komen te staan. In dit geval moet de <a>, met de daarin zittende tekst, over de tekst in de menubalk komen te staan. Dus gelijk zetten met de bovenkant van de <li> waar de <a> in zit.

Ver links buiten het scherm parkeren. Pas als over de menubalk wordt gehoverd, of als deze wordt aangeraakt, moet de link binnen de menubalk worden geplaatst. Dat gebeurt bij #menu li:hover a, #menu li:hover a span.

Je zou ook iets van display: none; kunnen gebruiken, maar dan werkt de link niet meer in de meeste screenreaders en dergelijke, dus dit is beter.

Hier staat in feite twee keer hetzelfde: transition: left 0s 0.24s; Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

Hierboven is de link 2000px buiten de linkerkant van het scherm geparkeerd. Bij hoveren over of aanraken van de menubalk moet de link binnen de menubalk worden gezet. Hij kan daar niet voortdurend staan, omdat anders op touchscreens de link wordt gevolgd in plaats van dat de pop-up wordt geopend.

Bij de eerste aanraking wordt de pop-up geopend en wordt de echte link in de knop geplaatst. Bij de tweede aanraking wordt de link gevolgd. (Bij gebruik van een muis wordt de pop-up geopend bij hoveren, en bij klikken wordt de link gevolgd.)

Bij #menu li:hover a, #menu li:hover a span wordt left: 0; opgegeven, waardoor de link binnen de menubalk wordt neergezet. Als je dat echter zomaar doet, wordt de link zó snel geplaatst, dat de link toch wordt gevolgd, ook al stond hij buiten het scherm. Daarom moet de link met enige vertraging worden geplaatst.

Meestal wordt transition gebruikt om een verandering geleidelijk uit te voeren, maar hier niet.

Bij transition staan twee tijden: 0s en 0.24s. Bij twee tijden geeft de eerste tijd aan, hoe lang de verandering moet duren. In dit geval is dat 0 seconden, oftewel: direct, in één keer. De link met de daarin zittende tekst moet exact boven de al in de menubalk aanwezig zijnde tekst worden geplaatst. Dat moet inderdaad in één keer, het is hier geen gezicht als die tekst langzaam vanaf links naar binnen komt wandelen.

De tweede tijd geeft de vertraging aan: de verandering moet pas beginnen na 0,24 seconde. Pas 0,24 seconde na hoveren over of aanraken van de menubalk wordt de link binnen die balk geplaatst. Dat is zo snel, dat het bij hoveren en klikken nauwelijks of geen problemen oplevert. Nog sneller kan niet, want bij minder dan 0,24 seconde wordt in Android browser op Android 4.0.3 de link al bij de eerste aanraking van de menubalk geopend. 0,24 seconde is precies lang genoeg om ook in deze browser bij de eerste aanraking de pop-up te laten openen, en pas bij de tweede aanraking de link te volgen.

transition brengt nog 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 ik bijvoorbeeld top en left beide wil veranderen bij :checked, kan ik bijvoorbeeld aangeven dat de geleidelijke verandering met behulp van transition alleen voor top geldt. left verandert dan gewoon in één keer.

Als ik niet opgeef, 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 iets heel traag zichtbaar wilt laten worden bij :hover en iets anders flitsend snel. Mogelijk wordt dat flitsend snel dan opeens ook heel traag. Daarom moet je absoluut zeker weten dat ook in de toekomst geen problemen kunnen ontstaan.

Als alle eigenschappen mogen worden vertraagd door transition, is er geen enkel risico voor de toekomst. Dat is hier het geval. Verderop bij #menu li:hover a, #menu li:hover a span verander ik left. Verder verandert er niets. In dit geval mag dus alles vertraagd worden veranderd. Als dat niet zo zou zijn, zou ik moeten opgeven, voor welke eigenschappen transition geldt.

Als er bij #menu li:hover a, #menu li:hover a span eigenschappen staan die niet mogen worden vertraagd, zou ik altijd opgeven, voor welke eigenschappen transition geldt. Ook als transition nu nog niet werkt voor die andere eigenschappen, want mogelijk verandert dat in de toekomst.

Je kunt transition beperken tot bepaalde eigenschappen door die eigenschappen te noemen, gevolgd door tijdsduur en eventueel vertraging:

Nu geldt deze transition alleen voor left, wat er in de toekomst mogelijk ook verandert. Maar hier is dat dus niet nodig, omdat bij #menu li:hover a, #menu li:hover a span alleen left wordt gebruikt.

Zou je denken, want in dit geval moet ik vreemd genoeg toch left opgeven, terwijl dat de enige eigenschap is die verandert. Bij #menu a:focus wordt de link binnen de menubalk gezet, als de link focus heeft. Dat moet zonder vertraging gebeuren. Hoe dat precies werkt, staat daar beschreven. Maar om een of andere reden gebeurt het alleen zonder vertraging in Firefox, Opera en de bureaublad-versie van Internet Explorer 10 op Windows 8, als left hier wordt gebruikt.

#menu a span

De spans binnen de links die in het element met id="menu" zitten. Deze spans worden gebruikt om de gekleurde lijnen aan de onderkant van de menubalk neer te zetten. Binnen elke link zit maar één span.

Deze spans zijn helemaal leegt. Daarom hebben ze geen enkele breedte, tenzij je dat zelf opgeeft. Voor de onderstreping wordt een achtergrondkleur gebruikt. Die is alleen maar zichtbaar, als er een breedte is.

Een breedte in procenten is altijd ten opzichte van de ouder. Dat is hier de <a>, waar de span in staat. En dat komt goed uit, want de streep moet even breed zijn als de <a>. Als de span 100% van de breedte van de bijbehorende <a> heeft, is de span en dus de streep altijd even breed als de <a>, waar de span bij hoort.

Omdat de span helemaal leeg is, is er geen hoogte. Voor de onderstreping wordt een achtergrondkleur gebruikt. Die is alleen maar zichtbaar, als er een hoogte is.

Groene achtergrond. Deze achtergrondkleur zorgt voor de onderstreping onder de link. Voor bezochte links en de link die bij de huidige pagina hoort wordt deze kleur verderop veranderd.

Om de span, en dus de onderstreping, op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier de <a>, waar de span in zit.

Een span is van zichzelf een inline-element. Door de span absoluut te positioneren, verandert de span in een soort blok-element, waardoor ook eigenschappen als hoogte gebruikt kunnen worden.

34 px vanaf de bovenkant neerzetten.

De span, en dus de onderstreping, moet gelijk onder de link komen te staan. Bij #menu a hebben de <a>'s een hoogte van 100% gekregen: even hoog als de <li>'s waar ze in staan. Bij #menu li hebben deze <li>'s een hoogte van 34 px gekregen, dus de <a> is ook 34 px hoog.

Bij #menu a zijn de <a>'s, waarbinnen deze spans zitten, 2000 px naar links neergezet, ver buiten het scherm. De <a>'s moeten pas bij hoveren over of aanraken van de menubalk op het scherm worden gezet.

Maar de onderstreping moet altijd zichtbaar zijn. Door de spans 2000 px naar rechts te plaatsen, wordt de verplaatsing van de <a>'s met 2000 px naar links geneutraliseerd, en zijn de onderstrepingen dus altijd zichtbaar.

De spans moeten altijd zichtbaar zijn, zodat de onderstrepingen dat ook zijn. Hierboven zijn ze om die reden 2000 px naar rechts verplaatst. Maar als over de menubalk wordt gehoverd, of als deze wordt aangeraakt, worden de <a>'s waar de spans in zitten 2000 px naar rechts verplaatst. De spans komen aan de rechterkant ver buiten het scherm te staan.

Bij aanraken van of hoveren over de menubalk moeten de spans daarom niet meer naar 2000 px naar rechts worden verplaatst, want die correctie is niet meer nodig. Hetzelfde geldt trouwens als de <a> focus heeft. Daarom wordt bij #menu li:hover a, #menu li:hover a span en #menu a:focus span left: 0; opgegeven.

Omdat de <a> nu binnen de menubalk staat, kan de daarin zittende span gewoon op de normale plaats worden neergezet.

Bij het binnen de menubalk zetten van de <a>'s is met behulp van transition een kleine vertraging ingebouwd, waardoor de eerste aanraking op touchscreens de pop-up opent, en pas de tweede aanraking de link volgt. Deze zelfde vertraging moet worden in gebouwd bij de spans, omdat de verplaatsing van de onderstreping anders plaatsvindt, voordat de <a> is verplaatst. Waardoor de onderstreping (heel kort) rechts buiten het scherm verdwijnt.

Deze transition werkt vrijwel hetzelfde als die bij #menu a. De uitleg staat bij -webkit-transition: left 0s 0.24s, transition: left 0s 0.24s;. Het enige verschil is dat hier left niet nodig is.

#menu #hier span

Voor dit element geldt ook de bij #menu a span opgegeven css, voor zover die hier niet wordt veranderd.

De spans binnen het element met id="hier", dat weer binnen het element met id="menu" moet staan. Hier is dat maar één span, die zorgt voor de onderstreping.

De huidige pagina krijgt een grijze onderstreping. Door aan de <a> die bij deze pagina hoort een id="hier" te geven, kan aan de in die <a> zittende span een andere kleur worden gegeven.

Bij #menu a span hebben de spans een groene achtergrondkleur gekregen, wat een groene onderstreping oplevert.

Hieronder krijgen spans die bij een bezochte link horen een rode achtergrondkleur met #menu a:visited span.

Deze selector heeft meer specificiteit ('gewicht') dan de andere twee. Daardoor overrulet deze selector de andere twee selectors, ook al staat #menu a:visited span later in de css.

#menu a span en #menu a:visited span hebben beide maar één id: #menu.

Deze selector heeft twee id's: #menu en #hier. Een selector met meer id's heeft altijd meer specifiteit, meer gewicht, dan een selector met minder id's. De huidige pagina krijgt dus altijd de hieronder opgegeven grijze kleur, of de link nu is bezocht of niet.

Grijze achtergrondkleur.

#menu a:visited span

Voor dit element geldt ook de bij #menu a span opgegeven css, voor zover die hier niet wordt veranderd.

De spans binnen de links die in het element met id="menu" zitten, maar alleen als de link al is bezocht. Deze spans worden gebruikt om de gekleurde lijnen aan de onderkant van de menubalk neer te zetten. Binnen elke link zit maar één span.

Omdat het kinderlijk eenvoudig bleek om met behulp van wat JavaScript en css uit te lezen, welke sites waren bezocht, kun je bij bezochte links nog maar heel weinig veranderen met behulp van css. Eén van de dingen die nog kan worden veranderd, is de kleur van de achtergrond.

Rode achtergrondkleur.

#menu li:hover a, #menu li:hover a span

Twee selectors, gescheiden door 'n komma.

De eerste: doe iets met de links binnen de <li>'s die in het element met id="menu"zitten. Maar alleen als over die <li> wordt gehoverd, of als deze wordt aangeraakt. Dit zijn de links die binnen het menu zitten.

De tweede: deze is precies hetzelfde, maar geldt voor de spans binnen de links. Deze spans zorgen voor de onderstreping.

De opmaak voor deze elementen is al bij #menu a en #menu a span opgegeven, hier worden ze alleen op de juiste plaats gezet.

Bij #menu a zijn de links met left: -2000px; ver buiten de linkerkant van het scherm geparkeerd. Omdat de in de <a>'s zittende spans, die voor de onderstrepingen zorgen, altijd zichtbaar moeten zijn, zijn deze bij #menu a span met left: 2000px; juist 2000 px naar rechts verplaatst.

Bij hoveren over of aanraken van een knop in de menubalk, wordt de bijbehorende <a> binnen het scherm gezet. Omdat gepositioneerd wordt ten opzichte van de <li> waar de <a> in zit, kan dat heel simpel met left: 0;.

De in de <a> zittende spans waren 2000 px naar rechts geplaatst, om ze altijd zichtbaar te houden. Als de <a> binnen de <li> staat, is deze correctie niet meer nodig. De span wordt gepositioneerd ten opzichte van de <a> waar hij in zit, dus ook hier werkt het simpele left: 0;.

#menu a:focus

Voor dit element geldt ook de bij #menu a opgegeven css, voor zover die hier niet wordt veranderd.

De links binnen het element met id="menu", maar alleen als die links focus hebben.

Een link kan focus krijgen, als de gebruiker er met de Tab-toets of op soortgelijke wijze naar toe is gegaan. Meer over :focus kun je vinden bij :hover, :focus en :active voor muis, toetsenbord, touchpad en touchscreen.

Achtergrondkleur wit. Bij #menu a is een doorzichtige achtergrond opgegeven, hier wordt deze wit. Omdat de link bij focus binnen de menubalk wordt gezet, verbergt deze witte achtergrondkleur de blauwe achtergrondkleur van de <li>, waarbinnen de link zit.

Voorgrondkleur, waaronder de tekstkleur, zwart. Bij #menu a is een witte voorgrondkleur opgegeven. Hierboven is de achtergrondkleur in wit veranderd. Een witte tekst op een witte achtergrond leest mogelijk wat lastig, dus maken we hem zwart.

39 px hoog. Bij #menu a hebben de <a>'s een hoogte van 100% gekregen, even hoog als hun ouder <li>. <li> heeft bij #menu li een hoogte van 34 px gekregen, dus de <a>'s zijn ook 34 px hoog. Daar komt nog de onderstreping van 5 px aan de onderkant bij. Samen 39 px.

Door de <a> hier 39 px hoog te maken, komt de outline die hieronder wordt gegeven niet alleen om de <a>, maar ook om de onderstreping te staan. Wat ik iets mooier vind.

Dunne zwarte outline rondom de hele link. Door de outline wordt de <a> aan alle kanten 1 px groter. Daarom is een outline hier beter dan een border, want een outline wordt gewoon over de elementen ernaast heen gezet. Een border zou de elementen ernaast 1 px verplaatsen, wat een springerig effect geeft.

Bij #menu a is met behulp van transition opgegeven dat de <a> met 0,24 seconde vertraging binnen het menu wordt gezet. Dat gaat prima bij aanraken of hoveren, maar is wat verwarrend bij gebruik van de Tab-toets om de links focus te geven. Door de vertraging van 0,24 seconde duurt het even, voor je ziet, welke link focus heeft. Als je de Tab-toets snel achter elkaar indrukt, is dat verwarrend.

Als je transition gebruikt bij de eigenschap left, hoort dat alleen te werken, als je bij :focus, :hover, en dergelijke een absolute waarde in px of zo, een waarde in procenten of calc() gebruikt. Door auto te gebruiken bij :focus, wordt de hele transition en dus de vertraging genegeerd.

Tegen de specificatie in werkt dit helaas niet in Safari op OS X en in Google Chrome overal. Daar duurt het toch 0,24 seconde, voor je ziet, welke link focus heeft.

#menu a:focus span

Voor dit element geldt ook de bij #menu a span opgegeven css, voor zover die hier niet wordt veranderd. Voor bezochte links geldt ook de bij #menu a:visited span opgegeven css, voor de link die bij de huidige pagina hoort ook de bij #menu #hier span opgegeven css.

De spans binnen de links die in het element met id="menu" zitten, maar alleen als de link focus heeft. Binnen elke link zit maar één span. Deze spans worden gebruikt om de gekleurde lijnen aan de onderkant van de menubalk neer te zetten.

Een link kan focus krijgen, als de gebruiker er met de Tab-toets of op soortgelijke wijze naar toe is gegaan. Meer over :focus kun je vinden bij :hover, :focus en :active voor muis, toetsenbord, touchpad en touchscreen.

De in de <a> zittende spans waren 2000 px naar rechts geplaatst, om ze altijd zichtbaar te houden. Als de <a> binnen de <li> staat, is deze correctie niet meer nodig. Hieronder wordt de left: 2000px; dan ook veranderd in left: auto;, de standaardinstelling.

Bij #menu a span is de span absoluut gepositioneerd, waardoor deze in een soort blok-element is veranderd. 'n Soort, niet helemaal. Je kunt weliswaar breedte en zo gebruiken, maar er zijn nog restanten van z'n inline-oorsprong: hij wordt achter de tekst binnen de link gezet. Dat komt omdat gelijk hieronder left op auto wordt gezet, waardoor er in horizontale richting geen positie meer wordt opgegeven.

Op de afbeelding zou de rode streep even breed moeten zijn als de witte link, maar hij vult alleen de lege ruimte na de '2'. De lengte is wel goed, maar dat zie je hier niet omdat het deel van de rode streep rechts van de link verdwijnt onder de ernaast staande groene streep.

Om dit op te lossen zou je hier display: block; kunnen gebruiken, dan wordt het 'n echt blok-element en wordt het keurig links neergezet. Hier heb ik voor 'n andere oplossing gekozen. De lengte van de span is goed, dus als je hem vanaf rechts neerzet, en niet vanaf links, komt hij ook goed te staan.

En omdat de span exact even lang is als de link, waar hij onder moet staan, voldoet right: 0; hier prima.

Bij #menu a span is met behulp van transition opgegeven, dat de span met 0,24 seconde vertraging binnen het menu wordt gezet. Dat gaat prima bij aanraken of hoveren, omdat ook de <a> met diezelfde vertraging binnen de menubalk wordt gezet. De onderstreping komt dus zogezegd op hetzelfde moment aan als de bijbehorende <a>.

Als de link focus heeft, is er geen vertraging: de <a> wordt gelijk in de menubalk gezet. Als de onderstreping wel vertraging zou hebben, zou deze 0,24 seconde na de link aankomen. Dat ziet er niet uit.

Als je transition gebruikt bij de eigenschap left, hoort dat alleen te werken, als je bij :focus, :hover, en dergelijke een absolute waarde in px of zo, een waarde in procenten of calc() gebruikt. Door auto te gebruiken bij :focus, wordt de hele transition en dus de vertraging genegeerd. De onderstreping komt nu op hetzelfde moment aan als de bijbehorende <a>.

Tegen de specificatie in werkt dit helaas niet in Safari op OS X en in Google Chrome overal. Daar duurt het toch 0,24 seconde, voor de onderstreping op z'n plaats staat. Maar daar duurt het ook 0,24 seconde voor de link op z'n plaats staat, dus de onderstreping blijft wel voortdurend bij de bijbehorende link. Die vertraging is wel wat verwarrend, maar dat geldt voor de hele <a>, inclusief de span met onderstreping.

#menu a:after

Doe iets achter de links in het element met id="menu". Bij hoveren over of aanraken van een <li> in de menubalk moet een kleine pop-up verschijnen met meer info over de link. De inhoud van die pop-up wordt met behulp van :after en content gemaakt.

Omdat de tekst in de pop-up bij elke <a> anders is, wordt die verderop voor elke link apart opgegeven met behulp van content. De opmaak is voor alle pop-ups hetzelfde, dus die kan ik hier in één keer voor allemaal opgeven.

Gele achtergrond.

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

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hierboven heb ik een achtergrondkleur opgegeven. Sommige mensen hebben zelf de kleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik 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.

Met behulp van :after gegenereerde content is van zichzelf een inline-element. Door er een blok-element van te maken, kunnen eigenschappen als breedte en hoogte worden gebruikt.

Een breedte in procenten is altijd ten opzichte van de ouder. Dat is hier de <a>. De pop-up moet even breed worden als de link, waar hij bij hoort. Omdat hieronder rechts en links nog 3% padding wordt opgegeven, is het totaal 3 + 92 + 3 = 100% breedte. Oftewel: even breed als de link waar de pop-up bij hoort.

Omdat de onderstreping dezelfde breedte heeft, staat de pop-up netjes onder de onderstreping.

Omdat de breedte is opgegeven in procenten, kan die in smallere browservensters wat te klein worden, om alle tekst weer te kunnen geven. Om dat te voorkomen, wordt een minimumbreedte opgegeven.

Als eenheid wordt em genomen, omdat die eenheid gebaseerd is op de lettergrootte. Bij een grotere letter is de minimumbreedte daardoor breder dan bij een kleinere letter.

Helemaal geen hoogte. Bij #menu li:hover a:after wordt de hoogte veranderd in 5,8 em. Met behulp van transition duurt die verandering 1 seconde, waardoor de pop-up geleidelijk aan opent vanaf de bovenkant. (Daarvoor is ook nog een aanpassing van top nodig, die iets verderop staat.)

Standaard staat overflow op visible: als iets niet binnen het element past, laat het dan toch zien. Normaal genomen is dat ook, wat je wilt. Mogelijk wordt de lay-out verstoord, maar in ieder geval kun je alles zien.

Hier is dat niet zo. Als je alle tekst ziet, zodra de pop-up opent, ziet dat er tijdens het openen uit als op de afbeelding. De tekst is in één keer zichtbaar, de bijbehorende achtergrondkleur en border zijn pas na 'n seconde op de juiste hoogte.

Daarom wordt hier het teveel aan tekst verborgen. Zodra de pop-up helemaal open is, past de tekst erin, en is dus de volledige tekst zichtbaar.

Iets kleinere letter. Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen aanpassen.

Bij #menu a is een vette letter opgegeven. Die wordt ook gebruikt bij :after. Dat is bij zo'n kleine letter niet mooi, dus terug naar 'n normale dikte.

Bij #menu a is een regelhoogte van 34 px opgegeven. Dat is hier natuurlijk veel te veel. normal is de standaardwaarde, dat is ongeveer 1,2 em.

Bij #menu li is alle tekst binnen <li>'s horizontaal gecentreerd, dus ook de tekst van deze pop-ups. Hier wordt de tekst weer gewoon links uitgelijnd.

Randje rondom de pop-up.

De naam van deze eigenschap is wat slecht gekozen, want er worden niet alleen borders afgerond, maar ook dingen als achtergronden.

Je kunt aparte waarden opgegeven voor horizontaal en verticaal, maar dat gebeurt hier niet. Hierdoor worden deze hoeken horizontaal en verticaal even groot, als delen van een cirkel. Bij twee ongelijke waarden voor 'n hoek wordt deze ellipsvormig.

De vier waarden corresponderen met de vier hoeken, zoals gebruikelijk bij css met de klok mee: linksboven – rechtsboven – rechtsonder – linksonder. Links‑ en rechtsboven geen hoek, rechts- en linksonder een ronde hoek van 8 px.

Omdat voor links en onder geen waarde is opgegeven, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 10px 3% 10px 3% in de volgorde boven – rechts – onder – links.

Van de 10 px padding aan de bovenkant valt 5 px weg onder de onderstreping.

Links en rechts een padding van 3%. Een padding in procenten wordt altijd genomen ten opzichte van de ouder. Dat is hier de <a>. In een smaller browservenster wordt de <a> smaller, en de padding dus ook. Hierdoor houdt de padding altijd de juiste verhouding.

Aan de onderkant 10 px padding. Dat is wat veel, maar er is wat verschil in lettergrootte tussen de diverse browsers. Daardoor past in de ene browser wat minder tekst op dezelfde regel als in de andere browser. Waardoor bij een kleinere padding in sommige browsers een deel van de tekst onder de gele achtergrond en het zwarte randje komt te staan.

Dit maakt het mogelijk de pop-up te verplaatsen ten opzichte van de positie, waar hij normaal genomen zou komen te staan.

Normaal genomen wordt de pop-up gelijk onder de link gezet. Dat gebeurt hier pas bij #menu li:hover a:after, als over de <li> met de daarin zittende link wordt gehoverd, of als de <li> wordt aangeraakt.

Door de pop-up eerst hoger te zetten en pas bij hoveren over of aanraken van de menubalk gelijk onder de link te zetten, opent de pop-up gelijkmatiger. Met behulp van transition duurt die verplaatsing 1 seconde, waardoor de pop-up geleidelijk aan opent vanaf de bovenkant. (Daarvoor is ook nog een aanpassing van height nodig, die iets hierboven staat.)

Bij 'n kleinere waarde dan 17 px blijft in Safari op OSX een klein stukje van de pop-up geopend, wat dan even later met 'n schok sluit.

De pop-up komt tijdens het openen over de blauwe achtergrondkleur van de menubalk en over de onderstreping te staan. Als de pop-up helemaal open is, staat hij onder de menubalk, maar nog steeds over de onderstreping.

Een negatieve z-index plaatst de pop-up helemaal onderaan, onder de blauwe achtergrondkleur en onder de onderstreping.

Een z-index werkt alleen, als het element absoluut, fixed of relatief is gepositioneerd. Hierboven is relatief gepositioneerd, dus dat is geregeld.

Hier staat in feite twee keer hetzelfde: transition: 1s 0.24s; Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

Iets hierboven is de pop-up 17 px naar boven verplaatst en heeft een hoogte van 0 gekregen. Bij hoveren over of aanraken van de menubalk moet de pop-up worden geopend. Dat gebeurt door de pop-up 17 px naar omlaag te verplaatsen, gelijk onder de link, en door er een hoogte van 5,8 em aan te geven. Dit gebeurt bij #menu li:hover a:after.

De link waar de pop-up in zit, staat normaal genomen links buiten het scherm geparkeerd. Deze link wordt pas bij aanraken van of hoveren over de menubalk binnen het scherm gezet. Met een vertraging van 0,24 seconde. Daarom moet de pop-up ook met een vertraging van 0,24 seconde beginnen met openen. Anders is hij al gedeeltelijk open, voordat de link met de pop-up binnen het scherm staat.

Bij transition staan twee tijden: 1s en 0.24s. Bij twee tijden geeft de eerste tijd aan, hoe lang de verandering moet duren. In dit geval is dat 1 seconde.

De tweede tijd geeft de vertraging aan het begin aan: de verandering moet pas beginnen na 0,24 seconde. Pas 0,24 seconde na hoveren over of aanraken van de menubalk wordt de link binnen die balk geplaatst, en pas dan moet de pop-up beginnen te openen.

Sneller kan niet, want bij minder dan 0,24 seconde wordt in Android browser op Android 4.0.3 de link al bij de eerste aanraking van de menubalk geopend. 0,24 seconde is precies lang genoeg om ook in deze browser bij de eerste aanraking de pop-up te laten openen, en pas bij de tweede aanraking de link te volgen.

transition brengt nog 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 ik bijvoorbeeld top en left beide wil veranderen bij :checked, kan ik bijvoorbeeld aangeven dat de geleidelijke verandering met behulp van transition alleen voor top geldt. left verandert dan gewoon in één keer.

Als ik niet opgeef, 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 iets heel traag zichtbaar wilt laten worden bij :hover en iets anders flitsend snel. Mogelijk wordt dat flitsend snel dan opeens ook heel traag. Daarom moet je absoluut zeker weten dat ook in de toekomst geen problemen kunnen ontstaan.

Als alle eigenschappen mogen worden vertraagd door transition, is er geen enkel risico voor de toekomst. Dat is hier het geval. Verderop bij #menu li:hover a:after verander ik de hoogte en top. Verder verandert er niets. In dit geval mag dus alles vertraagd worden veranderd. Als dat niet zo zou zijn, zou ik moeten opgeven, voor welke eigenschappen transition geldt.

Als er bij #menu li:hover a:after eigenschappen staan die niet mogen worden vertraagd, zou ik altijd opgeven, voor welke eigenschappen transition geldt. Ook als transition nu nog niet werkt voor die andere eigenschappen, want mogelijk verandert dat in de toekomst.

Je kunt transition beperken tot bepaalde eigenschappen door die eigenschappen te noemen, gevolgd door tijdsduur en eventueel vertraging:

Nu geldt deze transition alleen voor height en top, wat er in de toekomst mogelijk ook verandert. Maar hier is dat dus niet nodig, omdat bij #menu li:hover a:after alleen height en top worden gebruikt.

Normaal genomen wordt een transition ook in omgekeerde volgorde in hetzelfde tempo afgelegd. Als er niet meer over de menubalk wordt gehoverd, of als 'n andere knop in de balk wordt aangeraakt, zou het ook weer 1 seconde duren om de pop-up te sluiten. Dat is niet echt geweldig, want als je door de menubalk beweegt begint dat 'n beetje op het Nationale Ballet te lijken. Niets tegen ballet, maar het zou hier wat druk zijn.

Geleidelijk openen is mooi (vind ik), maar het sluiten mag wel vlug gebeuren. Geen enkele reden de bezoeker te irriteren met 'n wachttijd van 0,24 seconde en dan nog 1 seconde om volledig te sluiten.

Dat gebeurt hier echter niet. De link, waar de pop-up in zit, wordt na 0,24 seconde weer links buiten het scherm geparkeerd. En daar kan de pop-up rustig sluiten, zonder dat iemand dat ziet. Het duurt dus maar 0,24 seconde voor de pop-up weer is verdwenen. Dat is zo kort, dat je de vertraging nauwelijks ziet.

Dat het sluiten inderdaad 1 seconde duurt, kun je zien als je de cursor snel heen-en-weer over de menubalk beweegt, of snel achter elkaar de verschillende knoppen aanraakt. Als je 'n voor de tweede keer over 'n knop hovert of deze aanraakt, kun je zien dat de pop-up nog niet helemaal gesloten was.

#menu li:hover a:after

Doe iets achter de <a>'s die binnen een <li> zitten, die weer binnen het element met id="menu" zitten, maar alleen als over de <li> wordt gehoverd, of als deze wordt aangeraakt.

Er wordt hier een pop-up geopend, waarvoor de opmaak al bij #menu a:after is opgegeven.

Bij #menu a:after is een hoogte van 0 opgegeven, waardoor de pop-up normaal genomen onzichtbaar is. Hier wordt er een hoogte aan gegeven. Omdat transition is gebruikt, duurt het 1 seconde voor de hoogte is bereikt, waardoor de pop-up vanaf de bovenkant opent. (Hiervoor is ook een verandering in top nodig, die hieronder wordt gegeven.)

Eenheid moet percentage, getal of calc() zijn, auto werkt niet bij transition. Dat komt hier wat ongelukkig uit, want als auto gebruikt zou kunnen worden, zou de pop-up altijd precies de juiste hoogte krijgen voor de erin zittende tekst.

Er is wat verschil in lettergrootte en zo tussen de verschillende browsers en systemen. Met een hoogte van 5,8 em past de tekst in elke browser op elk systeem binnen de pop-up.

Bij #menu a:after is top: -17px; opgegeven. In combinatie met de hierboven opgegeven verandering in hoogte, opent de pop-up hierdoor geleidelijk vanaf de bovenkant. Het geleidelijk openen gedurende 1 seconde komt door het gebruik van transition bij #menu a:after.

#menu li:first-child a:after

Voor dit pseudo-element geldt ook de bij #menu a:after en #menu li:hover a:after opgegeven css, voor zover die hier niet wordt veranderd. Bij die twee selectors is de opmaak voor de pop-ups al gegeven. Hier wordt de tekst voor de pop-up opgegeven.

Doe iets achter de <a>'s die in de <li> zitten, die een eerste kind zijn en binnen het element met id="menu" zitten. Omdat er binnen #menu maar één <ul> zit, is er ook maar één li eerste kind. Binnen deze <li> zit de eerste link van het menu.

Omdat de tekst van de pop-up voor elke link anders is, kan die niet voor alle links tegelijk worden opgegeven, zoals de rest van de opmaak.

Dit is de tekst die bij de eerste link hoort.

Omdat oudere browsers mogelijk niet goed met content uit de voeten kunnen, moet je nooit belangrijke informatie via content genereren.

#menu li:nth-child(2) a:after

tot en met

#menu li:nth-child(7) a:after

Deze zes regels zijn vrijwel hetzelfde als die bij #menu li:first-child a:after. Daarom is de uitleg die daar staat ook grotendeels hier van toepassing. Er zijn maar twee verschillen:

:first-child is vervangen door :nth-child(...). In plaats van :first-child zou je ook kunnen gebruiken: :nth-child(1). Het eerste kind. :nth-child(2) betekent gewoon: het tweede kind. :nth-child(3) het derde kind. Enz.

content: hierachter staat de tekst die bij de betreffende link hoort.

Internet Explorer 8 kent nth-child() niet, die krijgt later eigen css.

#menu li:nth-child(8) a:after

Dit deel van deze selector is precies hetzelfde als de zes selectors hier gelijk boven.

Dit is een extra regel, die bij de zeven selectors voor de eerste zeven links niet staat.

Zet de pop-up zover mogelijk naar rechts. In dit geval wordt de pop-up tegen de rechterkant van de <a> gezet.

Normaal genomen zie je daar niets van, maar wel bij een grotere letter. Bij #menu a:after is aan de pop-up een breedte van 100% gegeven (een breedte van 94% + links en rechts een padding van 3%). Daar is ook een minimumbreedte van 6,5 em gegeven.

Als de lettergrootte wordt vergroot, neemt de minimumbreedte toe, omdat em gebaseerd is op de lettergrootte. Op een gegeven moment wordt de pop-up hierdoor breder dan de <a>, waar hij bij hoort. Dat is geen probleem bij de eerste zeven pop-ups, want die worden dan gewoon iets breder dan de bijbehorende <a>.

Deze laatste pop-up zou echter rechts buiten de menubalk uit kunnen gaan steken. In een smal vensters zou de pop-up daardoor ook rechts buiten het browservenster uit kunnen steken, waardoor hij zonder scrollen niet volledig zichtbaar is.

Door de meest rechtse pop-up naar rechts te floaten, wordt hij vanaf rechts neergezet en kan dus nooit rechts buiten de <a> uitsteken. Als de pop-up breder wordt dan de <a>, steekt hij aan de linkerkant uit, waar hij gewoon zichtbaar is.

#menu #hier:after

Doe iets na het element met id="hier", dat in het element met id="menu" zit. De <a> die bij de huidige pagina hoort, heeft een id="hier". Het gaat hier dus om de link die bij de huidige pagina hoort.

Bij #menu li:hover a:after wordt opgegeven dat een pop-up moet openen bij hoveren over een <li>. Die css geldt ook voor a#hier, want ook dat is een <a> die gewoon binnen een <li> zit. Normaal genomen zou dus ook bij hoveren over of aanraken van de knop die bij de huidige pagina hoort een pop-up openen. Dat wil ik niet. Deze selector voorkomt dat.

De selector #menu li:hover a:after heeft maar één id: #menu. Deze selector heeft twee id's: #menu en #hier. Een selector met meer id's heeft altijd meer specifiteit, meer gewicht, dan een selector met minder id's. Daardoor overrulet de css hieronder die van #menu li:hover a:after.

Niets tonen. Hierdoor wordt de bij deze <a> horende pop-up niet weergegeven.

#sluitbalk

Voor dit element geldt ook de bij #sluitbalk opgegeven css, voor zover die hier niet wordt veranderd.

Het element met id="sluitbalk". Dit is een div die je niet ziet. Hij zorgt voor het tonen en verbergen van de twee erin zittende sluitkruisjes, die nodig zijn om op iOS de pop-ups te kunnen sluiten.

Bij #menu ul is opgegeven dat de menubalk een maximumbreedte van 900 px heeft. #sluitbalk moet ervoor zorgen dat de twee sluitkruisjes links‑ en rechtsonder de menubalk komen te staan. Daarom mag #sluitbalk niet breder worden dan de menubalk.

Omdat voor links en onder geen waarde is 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. Ongeacht de breedte van het venster van de browser staat #sluitbalk altijd horizontaal gecentreerd.

Deze manier van horizontaal centreren van een blok-element werkt alleen, als het te centreren blok-element een breedte heeft.

Dit maakt het mogelijk de div te verplaatsen ten opzichte van de positie, waar hij normaal genomen zou komen te staan.

38 px naar omlaag verplaatsen.

Zonder deze verplaatsing zouden de in #sluitbalk zittende sluitkruisjes niet zichtbaar zijn, omdat ze worden afgedekt door de menubalk.

Er zijn nog ongeveer 73 andere mogelijkheden om dit op te lossen, maar ik heb voor deze oplossing gekozen. #sluitbalk is een fatsoenlijke div van goede komaf. 'n rechtstreeks kind van <body>, 'n betere afkomst kun je niet hebben.

(Tja, ik kan 't ook niet helpen, maar bij css is je afkomst nou eenmaal heel belangrijk.)

Goed, #sluitbalk is dus van uitstekende komaf. Maar helaas gaat hij met de verkeerde vriendjes #menu en de daarin zittende <ul> en <li>'s om en raakt daardoor aan lager wal. Of in dit geval eigenlijk: aan hoger wal. Normaal genomen zou een div namelijk gewoon onder het element ervoor worden neergezet. Dat is hier nav#menu, waarin de menubalk staat. Dat zou precies de goede plaats zijn.

Op de afbeelding hiernaast is #sluitbalk even iets breder gemaakt en heeft 'n rode outline gekregen en 'n hoogte van 1 px, zodat hij zichtbaar wordt. Op deze manier kun je zien dat #sluitbalk niet onder nav#menu staat, maar op dezelfde hoogte.

De verklaring is wat ingewikkeld.

Een blok-element als nav#menu krijgt normaal genomen automatisch precies genoeg hoogte, om de inhoud ervan weer te kunnen geven. Die inhoud is hier de <ul>.

Die <ul> is ook een blok-element, en krijgt normaal genomen dus ook genoeg hoogte om de inhoud ervan weer te kunnen geven.

De inhoud van de <ul> bestaat uit 8 <li>'s, die elk een hoogte van 34 px en een padding onderaan van 5 px hebben, samen 39 px. Dus zou de <ul> en vervolgens nav#menu 39 px hoog moeten zijn, waardoor #sluitbalk hier netjes onder zou komen te staan.

De <li>'s zijn echter bij #menu li gefloat, en dan tellen ze niet meer mee voor de hoogte van de ouder <ul>. Waardoor <ul> dus geen hoogte heeft. En dus nav#menu ook niet.

#sluitbalk staat dus wel degelijk onder nav#menu, maar nav#menu heeft gewoon geen hoogte.

Door #sluitbalk 38 px omlaag te verplaatsen, komt deze op de goede plaats te staan, en de daarin zittende sluitkruisjes ook. Het menu heeft bij #menu li een hoogte van 34 px en een padding onderaan van 5 px gekregen, samen 39 px. Door 1 px minder naar omlaag te verplaatsen, valt de border van 1 px aan de bovenkant van de sluitkruisjes weg onder de menubalk, wat ik iets mooier vind.

.sluiten

De elementen met class="sluiten". Dit zijn de twee spans, waarin de sluitkruisjes staan die zichtbaar worden bij hoveren over of aanraken van de menubalk. Deze elementen zijn nodig om op iOS de pop-ups te kunnen sluiten.

Het zijn er twee, eentje links‑ en eentje rechtsonder de menubalk. Daardoor is er altijd minstens eentje zichtbaar, ongeacht welke pop-up is geopend.

Achtergrond wit.

Voorgrondkleur, waaronder de tekstkleur, rood.

Hoogte en breedte. Door als eenheid em te nemen, veranderen hoogte en breedte in alle browsers mee met de lettergrootte.

Het sluitkruisje is gewoon een opgeblazen letter 'X'. Deze letter is in sommige browsers iets te groot voor de span, waar hij in staat. Daarom wordt overflow op hidden gezet, waardoor wat niet binnen de span is, niet is te zien. Tekst wordt automatisch in het midden van de regelhoogte gezet.

Deze combinatie, samen met de hierboven opgegeven hoogte en breedte, leveren in alle browsers een acceptabel sluitkruisje op.

Randje rondom het sluitkruisje. Bij #sluitbalk is div#sluitbalk, waar deze spans in zitten, 38 px omlaag verplaatst. De menubalk is 39 px hoog. Hierdoor valt de border aan de bovenkant weg onder de menubalk, wat ik iets mooier vind.

Om de sluitkruisjes op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een absolute, fixed of relatieve positie heeft. Dat is hier #sluitbalk.

Een span is van zichzelf een inline-element. Door de span absoluut te positioneren, verandert deze in een soort blok-element, waardoor je eigenschappen als hoogte en breed kunt gebruiken.

De spans zijn hierboven in een soort blok-element veranderd door ze absoluut te positioneren. Een 'soort' blok-element. Het wordt namelijk nog neergezet alsof het een inline-element is: achter #sluitbalk. De hoogte is wel goed, want de span staat bovenin #sluitbalk, en die is bij #sluitbalk op de juiste hoogte gezet.

Met left: 0; wordt de span helemaal links in #sluitbalk neergezet.

Er zijn twee spans met 'n sluitkruisje. De tweede wordt hieronder aan de rechterkant neergezet.

.sluiten + .sluiten

Voor dit element geldt ook de bij .sluiten opgegeven css, voor zover die hier niet wordt veranderd.

Een element met class="sluiten" dat gelijk volgt op een ander element met class="sluiten". Er zijn maar twee elementen met class="sluiten": de spans met de sluitkruisjes. Alleen de tweede daarvan voldoet aan deze selector.

Bij .sluiten zijn de spans met left: 0; aan de linkerkant van #sluitbalk neergezet. Deze span met sluikruisje moet aan de rechterkant worden neergezet. Om dat mogelijk te maken moet left terug naar de standaardinstelling auto.

De span en dus het sluitkruisje helemaal rechts in #sluitbalk zetten.

#menu:hover + #sluitbalk

Voor dit element geldt ook de bij #sluitbalk (voor browservensters smaller dan 740 px) en #sluitbalk (voor vensters breder dan 740 px) opgegeven css, voor zover die hier niet wordt veranderd.

#menu is de <nav> waarin het hele menu zit. Bij hoveren over of aanraken van de <nav>, moet iets gebeuren met het in de html gelijk daarop volgende element met id="sluitbalk".

Op deze manier kun je iets laten gebeuren met een element, zonder dat je over dat element zelf hoeft te hoveren of het hoeft aan te raken.

Bij #sluitbalk is deze div verborgen, omdat hij geen enkele functie heeft in browservensters smaller dan 740 px. Nu mag hij bij hoveren over of aanraken van de menubalk worden getoond. Hoewel, getoond... Je ziet niets van deze div, hij wordt alleen gebruikt om de erin zittende sluitkruisjes op hun plaats te zetten, gelijk onder de menubalk.

#menubalk-voor-smal

Het element met id="menubalk-voor-smal". Dit is de menubalk die in browservensters smaller dan 740 px bovenaan de pagina staat.

In vensters breder dan 740 px heeft deze balk geen enkele functie, dus verbergen.