Zelfstudiehanboek Websites Ontwikkelen
met HTML, CSS en Dreamweaver

Geef de actieve links van de openstaande pagina aan met specifieke CSS

In het hoofdmenu rechtsboven zie je dat de link 'Tips en aanvullingen' die hoort bij deze pagina, duidelijk herkenbaar is. Hetzelfde geldt voor 'Actieve links' in het horizontale submenu. Maar hoe doe je dat zonder javascript of andere programmeertaal?

Hier volgt de uitleg hoe je met CSS laat zien welke links gekoppeld zijn aan de pagina waar de lezer zicht op dat moment bevindt. Dit is een update bij hoofdstuk 19 - pagina 338.

Stap 1 - HTML

Geef de body een ID zodat je deze kunt gebruiken in de speciefieke kiezer die alleen voor deze pagina gaat gelden. In deze pagina is de waarde van de ID tipsactievelinks (afgeleid van de sublink Actieve links die valt onder de hoofdlink Tip).

<body id="tipsactievelinks">

Stap 2 - HTML

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.

     <ul id="navigatie">
<li id="een"><a href="#">Zelfstudiehandboek</a></li>
<li id="twee"><a href="#">Oefeningen</a></li>
<li id="drie"><a href="#">Oplossingen</a></li>
<li id="vier"><a href="#">Tips en aanvullingen</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="#">Layout</a></li>
<li id="b"><a href="#">Margins</a></li>
<li id="c"><a href="#">Actieve links</a></li>
<li id="d"><a href="#">Sprites</a></li>
<li id="e"><a href="#">Mondriaan</a></li>
</ul>

Stap 3 - CSS

Maak een nieuwe CSS-regel aan met de specifieke kiezers en de door jou gewenste vormgeving. Voor het vertikale hoofdmenu op deze pagina ziet dat er zo uit:

#zelfstudiehandboek li#een a, #oefeningen li#twee a, #oplossingen li#drie a, #tipsactievelinks li#vier a, #contact li#vijf a {
color: #F60;
background: #FFF;
}

Wat je nu hebt geschreven is een CSS-regel met een (lange) samengestelde kiezer. De eerste combinatie, #zelfstudiehandboek li#een a, geeft aan dat de link in het lijstitem met de ID een in de body met de id zelfstudiehandboek een oranje tekst krijgt met een witte achtergrond. Maar de ID zelfstudiehandboek hoort niet bij de body van deze pagina, dus die combinatie heeft hier geen effect.

De body van deze pagina heeft de ID tipsactievelinks en de combinatie die hier dan ook wél effect heeft is #tipsactievelinks li#vier a. Hiermee geef je aan hoe de link eruit ziet die zit in het lijstitem met de ID vier dat ingesloten zit in de body met de ID tips.

Voor het horizontale submenu ziet het er zo uit:

#zelfstudiehandboek li#c a, #oefeningen li#c a, #oplossingen li#c a, #tipsactievelinks li#c a, #contact li#c a {
color: #000;
text-decoration: none;
border-bottom: solid 2px #000;
}

Het is hetzelfde verhaal, alleen zijn de ID's anders dus moeten de kiezers hier ook anders worden om bij de juiste link terecht te komen met je vormgeving.

Stap 4 - CSS

Voor de uiteindelijke site wordt de kiezer nog langer. Want de nu gemaakte kiezer geldt alleen voor de pagina Actieve links. Maar het submenu van Tips heeft, zoals je bovenaan de pagina kunt zien, nog meer pagina's: Layout, Margins, Sprites, Mondriaan. En die pagina's krijgen allemaal een andere ID om dit systeem te laten werken. Laten we ze zo noemen: tipslayout, tipsmargins, tipssprites, tipsmondriaan. En die namen neem je ook op in de kiezer. De aangepaste kiezer komt er dan zo uit te zien:

#zelfstudiehandboek li#een a, #oefeningen li#twee a, #oplossingen li#drie a, #tipslayout li#vier a, #tipsmargins li#vier a, #tipsactievelinks li#vier a, #tipssprites li#vier a, #tipsmondriaan li#vier a, #contact li#vijf a {
color: #F60;
background: #FFF;
}

Maar je bent er nog niet want dit herhaalt zich ook voor de pagina's die vallen onder de andere links in het hoofdmenu: Zelfstudiehandboek, Oefeningen, Oplossingen en Contact. De uiteindelijke kiezer kan er ongeveer zo uit gaan zien:

#zelfstudiehandboeknaamsub li#een a, #zelfstudiehandboekanderenaamsub li#een a, #zelfstudiehandboeknogeennaamsub li#een a, #zelfstudiehandboekennogeennaam li#een a, #oefeningensubmenunaam li#twee a, #oefeningenanderesubmenunaam li#twee a, #oefeningennogeensubje li#twee a, #oplossingensuberdesub li#drie a, #tipslayout li#vier a, #tipsmargins li#vier a, #tipsactievelinks li#vier a, #tipsspriteseerste li#vier a, #tipsspritestweede li#vier a, #tipsspritesderde li#vier a, #tipsmondriaangeensubs li#vier a, #contactgegevens 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.

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