Een sitemap.

Bron: http://www.sceneone.nl/navigatie/sitemap.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

De reden dat ik hier nog een sitemap als voorbeeld wil geven is niet omdat een sitemap nou zoiets bijzonders is.
Het geeft mij nog een keer de mogelijkheid je de kracht van css en van de scheiding van structuur en presentatie te laten zien.

Eerst even iets over de navigatie van deze website. De navigatie zit in een include. Met behulp van php wordt dynamisch bepaald welk submenu uitgeklapt moet en zijn en welk linkje actief moet zijn.
Voor degene die wat van php weten klinkt dit waarschijnlijk wel bekend. Voor de anderen niet, maar dat geeft niks.

Waar het om gaat is dat er maar één navigatie is die in iedere pagina ge-include wordt. Met andere woorden als ik iets aan de navigatie wil veranderen hoef ik dat maar op één plaats te doen en niet op iedere pagina van de website. De verandering die ik op die ene plaats uitvoer wordt automatisch zichtbaar op alle pagina's.

Dit betekend dat ik die navigatie ook als sitemap kan includen. Ik moet dan dynamisch bepalen dat alle submenu's opengeklapt staan en klaar ben ik.
Maar als ik de sitemap een andere opmaak wil geven moet er meer gebeuren.

Wisselen van css en klaar

Precies, je voelt hem al aankomen.
Omdat de opmaak van de navigatie niet in de html, maar in de css zit hoef ik alleen maar van css te wisselen. Een andere stijldeclaratie en precies dezelfde navigatie als degene die je door de hele website tegenkomt ziet er als sitemap ineens heel anders uit.

Nog één keer om ieder misverstand te voorkomen: de navigatie in de website en de sitemap zijn één en hetzelfde bestand met ieder hun eigen stijldeclaraties.
Hieronder de css die ik voor de sitemap gebruikt heb:

CSS: ul{
font-family: Verdana, Arial, Helvetica, sans-serif;
list-style: none;
}

li{
margin: 10px 0 0 0;
padding: 0 0 5px 5px;
width: 400px;
background-color: #CFE6DC;
border: 1px solid #59806F;
}

li li{
margin: 2px 0 0 0;
padding: 0 0 2px 5px;
}

a{
font-size: 0.8em;
text-decoration: none;
}

a:link, a:visited{
color: #59806F;
}

a:hover, a:active{
color: #60BF96;
}

bekijk het resultaat

naar het begin van de pagina