We zien
dat IE 8 laat staan
ouder dit menu, dus deze nieuwe tag
nav (<nav>) niet
pakt! De paarse kleur wordt niet weergegeven. Ook
gaat het geheel links staan! Verder zijn
er nu 2 sub-navigaties
met <div id=NavBalkT> en <div id=NavBalkB>, in
de vorm van een balk boven- en onderaan. Pas
in IE 11 gaat
het goed! Bekijk de dynamiek
van de pagina door — met de muis — de
kanten te verschuiven. De minimale breedte wordt
bepaald door “width: 200px;” en
de padding:10px 5px 10px 70px; dus 200+5+70 pixels in
het CSS
bij <nav>.
Bij een andere opbouw kan de navigatie <nav> eventueel in <article> of <header> staan. Deze verzameling links neemt dan de vorm aan van respectievelijk het menu in de tekst of bovenaan. Uitgezonderd bij in <article> is er altijd maar één menu, dat binnen <nav> staat. Dat is het hoofdmenu! Zo kan — het is niet zo gebruikelijk — <nav> in een zeer korte pagina ook in <footer> staan. Deze opbouw is niet geschikt voor een andere positie van de hier genoemde tags, wel kan de pagina dienen als sjabloon voor oefeningen en experimenten met verdere uitbouw.
Het verdelen van het menu
Nu er inmiddels wat meer pagina zijn, heeft het zin om na te denken over een verdeling van het menu in secties. We hebben daarin al een eerste stap gezet. Een dergelijke verdeling maakt het overzichtlijker. Ook hebben de varianten van de links een kleurtje gekregen. We kunnen nu — in een eigen copie — experimenteren met de pseudo-classes rond <a>.
Het kleurenscala van de huidige links
is universeel gekozen. Dit past dus ook goed in de tekst
binnen <article>. Ook in kop- en staartmenu's
zijn deze kleuren passend. De
aanbevolen vorm voor een menu
in HTML5 is
echter de lijst. Een eerdere poging liep vast op
de CSS-opdracht,
(list-style:none;) om de
bullets doen te verbergen. Nu kan dat toch een klein foutje
zijn; zo'n foutje waar een mens overheen blijft
kijken!
- Als de opdracht in het CSS niet werkt?
- Slaap er dan een nachtje over.
- Vervolgens probeer het elders opnieuw!
Bij de korte
voorbeeldlijst (<ul id=ArtGeenBullets> [...] </ul>) hierboven
werkt het wel. We moeten dus nu kijken, of we
dit — in het menu — toch
vorm kunnen geven. Voordat we het menu aanpakken is
het verstandig nog wat meer met lijsten te
stoeien, zodat we de addertjes onder het gras
bij HTML5 leren kennen.
Ondertussen zijn we geslaagd;
de derde sectie van het menu is opgebouwd met
een lijst! Er is weinig verschil in de lay-out! De
verdeling in secties in de andere
voorbeelden (sjablonen) geeft echter een probleem. De
opdracht <ol id=GeenBullets> [...] </ol> wenst
geen padding te accepteren. De oplossing met
alinea's heeft dit probleem niet. We lossen
dit — een paar dagen later
op — met #MenuPart {background:#CCCCFF; margin:0 0 35px 0;}, ofwel
een extra box.
Wat is de echte navigatie?
Voor de oude site Natspel.nl moesten we ons afvragen, wat is vanuit de zoekrobots gezien de echte navigatie. Of anders uitgedrukt, wat willen we, dat een plaats krijgt in de index van een zoekmachine, zoals Google. In het huidige Natspel.nl in opbouw duiden we dit met de hier besproken tag <nav>.
Ook is het belangrijk bij meerdere menu's
de overbodige links voor zoekmachines, af te dekken
met het attribuut rel="nofollow". Bekijk de
diverse menu's op gebruik van dit stukje code. De
regel is maar één doorgaande link per
richting. Dus het eerder genoemde probleem met
bullets is inmiddels opgelost met een extra box (<div>) en
daarbij aanvullende info in
het CSS. Dit
relaas gaat verder in het verhaal
over <div>.