Navigatie op je website

highlight menu
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.

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.