Navigatie
Bronnen
Staphanie Lin, The rules for Modern Navigation, 31/01/2017
Webydo, A Look into Navigation in Web Design. A retrospective on navigation patterns and an examination of where we’re heading in 2017, 31/01/2017
HTML
Een navigatiebalk vertrekt van een geordende HTML lijst. Zowel de horizontale als de vertikale navigatiebalk in ons voorbeeld maken gebruik van een ol element met daarin li elementen. De lijst staat in een nav element. De hoofdnavigatie staat in het header element dat direct na het body element komt en de subnaviatie staat in een aside element.
Hoofdnavigatie
<body>
<header>
<nav>
<ol>
<!-- Misschien moet je de href attributen aanpassen! -->
<li><a href="#">Marsman</a></li>
<li><a href="#">Creedence Clearwater Revival</a></li>
</ol>
</nav>
<h1> Jef's website</h1>
</header>
Subnavigatie
<aside>
<nav>
<ol>
<li><a href="#gedicht1">De hand van de dichter</a></li>
<li><a href="#gedicht2">Voor het inslapen</a></li>
<li><a href="#gedicht3">De liefde slaapt in haar hart</a></li>
<li><a href="#gedicht4">Jaloezie</a></li>
<li><a href="#gedicht5">De vreemdeling</a></li>
<li><a href="#gedicht6">Polderland</a></li>
<li><a href="#gedicht7">Twee vrienden</a></li>
<li><a href="#gedicht8">Aan de dood</a></li>
</ol>
</nav>
</aside>
CSS
We beginnen met de cijfers uit de lijst te verwijderen. Dat doen we voor beide navigatiebalken:
nav ol {
list-style-type: none;
/* hebben we al met de universele selector gedaan
margin: 0;
padding: 0; /*
}
De kantlijn en het opvulsel zetten we op 0. In het voorbeeld hebben we dat met de universele selector gedaan. Maar je zou dat ook hier kunnen doen. Sommigen beweren dat je de uiversele selector beter niet gebruikt omdat die door zijn algemeenheid het toepassen van de CSS vertraagt.
We verwijderen het onderlijnen van de hyperlinks in beide navigatiebalken en zetten de kleur van de tekst in een bijna zwarte kleur:
nav a {
text-decoration: none;
color: #242424; /* Intellektuelle black */
}
In een horizontaal navigatiemenu staan de menukeuzes naast elkaar en niet onder elkaar zoals in een geordende of ongeordende lijst. We plaatsen die op de zelfde regel door:
body > header nav ol li {
display: inline-block;
}
In de horizontale navigatie zetten we een streepje voor het eerste item en een streepje na elk item. We zorgen ervoor dat evenveel witruimte voor en na elk item staat:
/* een streepje voor het eerste item */
header nav ol li:first-child {
border-left: solid 0.1em;
}
header nav ol li {
/* een streepje na elke item */
border-right: solid 0.1em;
/* wit voor en na elk item, zorg dat er geen spaties
tussen de items staat */
padding: 0 0.5em 0 0.5em;
}
En als de bezoeker over een item zweeft, kleuren we de achtergrond in vaalrood:
header nav a:hover {
background-color: #E75D49;
}
Het vertikale menu maken we evenbreed als het aside element en we kleuren de achtergrond geelachtig:
article aside nav ol {
/* even breed als het aside element */
width: 100%;
/* achtergrond om het menu te laten uitkomen */
background-color: #FFCC00; /* orange yellow tangerine */
}
De hyperlink in elk item van de lijst geven we weer als een blokelement. Een hyperlink is standaard een inline element dus forceren we het naar een block element. Doen we dit niet, wordt het kleuren van de achtergrond beperkt tot de breedte van de tekst die in de link staat. We tekenen een lijn tussen elk item van het menu en een dikke streep ervoor. Tenslotte zetten we witruimte boven en voor elke item in het menu.
article aside nav ol li a {
/* een hyperlink is standaard een inline element
dus forceren we het naar een block element, doen
we dit niet, wordt het kleuren van de achtergrond
beperkt tot de breedte van de tekst die in de link staat */
display: block;
/* een lijn tussen de items van het menu */
border-top: solid 0.1em;
/* een streep voor elk item in het menu */
border-left: solid 0.6em #979AAA; /* Manatee (Lamentijn) */
padding: 0.2em 0 0 0.4em;
}
Als de gebruiker over het item zweeft met de cursor kleuren we achtergrond blauw en tekst wit:
article aside nav a:hover {
background-color: #666699;
/* blue kimberly */
color: #EEEEE0;
/* Lead White (Ivory) */
}