Navigatie op je website
De meeste sites gebruiken een vorm van navigatie om de bezoeker te helpen door de website te klikken.
Soms kan het handig zijn om de bezoeker te laten weten waar hij zich bevindt. Zonder dat je gebruik
maakt van het invoegen van een uitgebreid script en zonder dat je html code op elke pagina moet
aanpassen is het mogelijk om de knop van de huidige pagina te veranderen ten opzichte van de rest.
Stel dat je navigatie er als volgt uit ziet:
<ul> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About</a></li> <li><a href="#" class="contact">Contact</a></li> </ul>
De CSS code ziet er zo uit:
ul {
list-style-type: none;
list-style-position: default;
font-family: arial;
}
li {
border: 1px solid black;
padding: 2px 5px;
margin: 2px 0;
width: 90px;
background-color: #666;
}
li:hover {
background-color: #999;
}
li a, li a:link, li a:visited {
text-decoration: none;
color: white;
}
Je krijgt dan het volgende resultaat:
Wanneer je het nu zo wilt dat als de bezoeker op de homepagina is, dat dan de button met home
schuin en vetgedrukt is, dan stel je dat als volgt in:
.home {
background-color: white;
color: #666;
} Maar het probleem is nu dat je iedere pagina een eigen stijl moet geven. Want anders wordt alle
buttontekst vet en schuin afgebeeld. Vandaar de volgende oplossing: je voegt aan je body van de pagina een
id toe. Dus home geef je <body id=”home”>, de about us pagina geef je als id <body id=”about”>
en de contactpagina wordt <body id=”contact”>. Vervolgens maak je de volgende CSS code:
#home .home, #about .about, #contact .contact {
background-color: white;
color: #666;
}Op deze manier wordt de home button alleen maar vet en schuin gedrukt als deze zich in een body
bevindt met id=”body”, op een pagina waarbij de body een ander id heeft blijft deze gewoon.
