In het hoofdmenu rechtsboven zie je dat de link 'Zelfstudiehandboek' die hoort bij deze pagina, duidelijk herkenbaar is. Hetzelfde geldt voor 'Voorbeeldbestanden' in het horizontale submenu. In een statische website kan je eenvoudig per pagina de link die hoort bij die speciale pagina een ID geven en zo een aparte vormgeving toekennen. Maar als je je menu onderhoudt met een template (met optional regions) en niet per pagina afzonderlijk, dan is de volgende aanpak een eenvoudige oplossing. Ook als je je site onderhoudt in Contribute (hoofdstuk 18) en werkt met een included menu (pag. 325), kan je deze aanpak gebruiken.
Hier volgt de uitleg hoe je met alleen CSS, dus zonder javascript of andere programmeertaal, kunt laten welke links gekoppeld zijn aan de pagina waar de lezer zich op dat moment bevindt. Dit is een update bij hoofdstuk 19 - pagina 338.
Geef de body van de pagina een ID zodat je deze kunt gebruiken in de speciefieke kiezer die alleen voor die pagina gaat gelden. In deze pagina is de waarde van de ID boekvoorbeelden (afgeleid van de sublink Voorbeeldbestanden die valt onder de hoofdlink Zelfstudiehandboek).
<body id="boekvoorbeelden">
Geef alle lijstitems in beide menu's een ID. Ook deze ga je gebruiken in de specifieke kiezer die alleen voor deze pagina gaat gelden. In deze pagina zijn de gebruikte waardes voor het vertikale hoofdmenu een, twee, drie enz. De HTML van de menu's gaat er dan zo uitzien:
<ul id="navigatie">
<li id="een"><a href="#">WaalWeb</a></li>
<li id="twee"><a href="#">Webdesign</a></li>
<li id="drie"><a href="#">Trainingen</a></li>
<li id="vier"><a href="#">Zelfstudiehandboek</a></li>
<li id="vijf"><a href="#p">Contact</a></li>
</ul>
Voor het horizontale submenu zijn de letters a, b, c enz. gebruikt voor de ID's.
<ul id="sub-navigatie">
<li id="a"><a href="#">Zelfstudiehandboek</a></li>
<li id="b"><a href="#">Inhoudsopgave</a></li>
<li id="c"><a href="#">Voorbeeldbestanden</a></li>
<li id="d"><a href="#">Tips en aanvullingen</a></li>
<li id="e"><a href="#">Errata</a></li>
</ul>Maak een nieuwe CSS-regel aan met de samengestelde kiezer en de door jou gewenste vormgeving. Voor het vertikale hoofdmenu op deze pagina ziet dat er zo uit:
#boekvoorbeelden li#vier a {
color: #F60;
background: #FFF;
}
De samengestelde kiezer geeft aan dat de link in het lijstitem met de ID vier (zie hierboven in het hoofdmenu) die staat in de pagina waarin de body de id boekvoorbeelden heeft, een oranje tekst krijgt met een witte achtergrond.
Voor het horizontale submenu ziet het er zo uit:
#boekvoorbeelden li#c a {
color: #000;
text-decoration: none;
border-bottom: solid 2px #000;
}
Je geeft hiermee aan dat de link in het lijstitem met de ID c (zie hierboven in het submenu) die staat in de body met de id boekvoorbeelden, een oranje tekst krijgt met een witte achtergrond.
Voor de uiteindelijke site wordt de kiezer langer. Want de nu gemaakte kiezer werkt alleen in de pagina Voorbeeldbestanden. Maar er zijn meer pagina's in de site. We beginnen met de andere pagina's die, net als Voorbeeldbestanden, vallen onder Zelfstudiehandboek. Dat zijn: Zelfstudiehandboek, Inhoudsopgave, Tips en aanvullingen en Errata (kijk maar in het submenu). En de body's van die pagina's geven we, om dit systeem te laten werken, eerst ook ieder een eigen ID: boek, boekinhoud, boektips, boekerrata. En die namen gebruik je weer in de kiezer. Deze komt er dan zo uit te zien:
#boek li#vier a, #boekinhoud li#vier a, #boekvoorbeelden li#vier a, #boektips li#vier a, #boekerrata li#vier a {
color: #F60;
background: #FFF;
}
Voor het horizontale submenu wordt het zot:
#boek li#a a, #boekinhoud li#b a, #boekvoorbeelden li#c a, #boektips li#d a, #boekerrata li#e a {
color: #000;
text-decoration: none;
border-bottom: solid 2px #000;
}
Maar je bent er nog niet want er zijn ook nog meer hoofdlinks naast 'Zelfstudiehandboek': 'WaalWeb', 'Webdesign', 'Trainingen' en' Contact' moeten er ook nog bij. En die hebben waarschijnlijk ook ieder meerdere pagina's onder zich. De uiteindelijke kiezer kan er dan ook ongeveer zo uit gaan zien:
#waalweb li#een a, #waalweboverons li#een a, #waalwebportfolio li#een a, #waalwebblog li#een a, #webdesign li#twee a, #webdesignwebbouw li#twee a, #webdesignseo li#twee a, #webdesigncms li#twee a,li#twee a, #webdesignhosting li#twee a,li#twee a, #trainingen li#drie a, #trainingenlokaties li#drie a, #boek li#vier a, #boekinhoud li#vier a, #boekvoorbeelden li#vier a, #boektips li#vier a, #boekerrata li#vier a, #contact li#vijf a, #contactformulier li#vijf a {
color: #F60;
background: #FFF;
}
En ook de kiezer van de CSS-regel voor het submenu moet op vergelijkbare wijze worden uitgebreid:
#waalweb li#a a, #waalweboverons li#b a, #waalwebportfolio li#c a, #waalwebblog li#d a, #webdesign li#a a, #webdesignwebbouw li#b a, #webdesignseo li#c a, #webdesigncms li#d a, #webdesignhosting li#e a, #trainingen li#a a, #trainingenlokaties li#b a, #boek li#a a, #boekinhoud li#b a, #boekvoorbeelden li#c a, #boektips li#d a, #boekerrata li#e a, #contact li#a a, #contactformulier li#b a {
color: #F60;
background: #FFF;
}
Het is een gruwelijk lange kiezer natuurlijk, maar goed, dan heb je ook wat. In één stylesheet kan je op deze manier instellen dat de juiste links er zo uitzien dat je kunt zien op welke pagina je bent.
Was dit een duidelijk verhaal? Aarzel niet om je commentaar te geven!
WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen