Navigeren met behulp van tabbladen
Een van de manieren om te navigeren door je site is door middel van tabbladen. Deze tabbladen laten zien op welke pagina je, je bevindt en welke andere mogelijkheden er ook zijn om naar toe te gaan. Tabbladen navigatie zijn te maken met behulp van CSS.
Het vergt enige voorbereiding, maar een en ander is goed te gebruiken voor een website. We zetten de te maken stappen op een rij.
De opzet van de pagina
Voor de website die we gaan maken gebruiken we een navigatie van vier onderdelen, te weten index, archief, tekst en de contactpagina. In het voorbeeld geven we de pagina die in beeld is de naam ‘current‘ mee, hier geven we ook weer een stijl aan mee.
De verschillende pagina’s krijgen in dit voorbeeld natuurlijk dezelfde tekst mee, de enige wijziging zit in het menu, een en ander kun je natuurlijk naar eigen wens aanpassen.
Goed aan het werk maar, hier volgt eerst de code voor de html pagina, vervolgens maken we stap voor stap de css pagina. Deze wordt gelinkt vanuit de html pagina en krijgt de naam ’tab.css’.
Aan de html pagina wordt nog een aantal ‘id en classes’ toegevoegd, dit wordt verderop uitgelegd.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="tab.css" type="text/css"> <title>Untitled</title> </head> <body id="home"> <ul id="tabmenu"> <li class="home"><a href="#">Home</a></li> <li class="archief"><a href="#">Archief</a></li> <li class="teksten"><a href="#">Tekst</a></li> <li class="contact"><a href="#">Contact</a></li> </ul> <div id="tekst"> <h3>Lorem Ipsum dolor sit</h3> <p>Lorem ipsum menandri instructior concludaturque quo ex, unum cetero verear mel ad. Eros autem his at, ne paulo disputationi vim, cu inermis delicatissimi vis. Amet iudico labores et eum, eu ullum inimicus eum. Cu sed iisque forensibus. Ex pro erat nonummy, quot error corpora est ne. No est albucius adipisci, ius </p> <p> lorem integre an. Has te petentium delicatissimi, mel ea sumo voluptua. Dicat etiam audiam no nam, pri cu dicant noster argumentum, an perpetua incorrupte has. Abhorreant voluptatibus sed eu. Pri ex solet mucius accusata, his posse sententiae in. Ei duis labores est, eam graeci patrioque ut, sumo magna signiferumque.</p> </div> </body> </html>
Nog wat class en id toevoegen
Het eerste wat je moet doen is de onderdelen van het menu allemaal een verschillende class geven, dus bijvoorbeeld: <li class="home"><a href="index.htm">Home</a></li>
Dat is namelijk nodig om elke tab individueel te kunnen benaderen in CSS.
Vervolgens geven we de ul van het menu nog een id mee, deze geven we de naam ’tabmenu’.
Ook moeten we de body van de verschillende pagina’s een id meegeven, zo noemen we de body van de homepagina id="home" en de body van de contactpagina geven we id="contact".
Dit moet je per pagina dus verschillend maken om de juiste tab te krijgen voor de juiste pagina.
We kunnen nu de stijlen gaan maken in ons stijlblad met de naam tab.css.
Voor de volledigheid geven we ook een aantal algemene stijlen mee zodat de website direct een leuke uitstraling heeft. We beginnen met de body.
De body van tab.css
De body van ons html bestand hebben we een id meegegeven, maar in het css bestand wordt ook nog apart de stijl voor de body gegeven. Deze stijl bevat een aantal algemene onderdelen zoals lettergrootte.
Daarnaast wordt de margin voor het hele document bepaald. De css ziet er dan zo uit:
body { font: .8em/1.8em verdana, arial, sans-serif; background-color: #FFF; margin-left: 50px; margin-right: 100px; }
id tekst
Om de tekst heen komt een lijn van 1 pixel. Deze lijn komt in verbinding te staan met de tabs. Wanneer je hier een kleur voor bepaald, in ons voorbeeld zwart (#000), moet je deze zelfde kleur straks ook gebruiken.
#tekst { border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; padding: 10px 5px 6px 5px; }
De koptekst
Voor de koptekst, h3, moeten er ook nog wat zaken bepaald worden. Deze code kun je naar behoefte aanpassen, deze beïnvloedt de tabs niet. Deze ziet er als volgt uit:
#tekst h3 { font-size: 1.2em; color: #666; background-color: transparent; }
De code voor de tabs, het menu
Tenslotte de code voor het menu zelf. Deze is gemaakt met behulp van een lijst. De lijst hangt samen met de id van de body. Op deze manier is de juiste tab wit, dat is de tab die de actuele pagina afbeeldt.
In de code kun je de kleuren natuurlijk naar wens aanpassen. Daarmee moet je wat experimenteren. Dat geldt ook voor de lettertypes enzovoorts.
Wanneer er wat aangepast wordt aan de breedtes en hoogtes, zorg er dan voor dat je steeds controleert wat je doet, want een aantal dingen hangt samen.
/* De code voor de navigatie */ ul#tabmenu { list-style-type: none; margin: 0; padding-left: 40px; padding-bottom: 24px; border-bottom: 1px solid black; font: bold 11px verdana, arial, sans-serif; } ul#tabmenu li { float: left; height: 21px; background-color: #a6642b; color: #FFF; margin: 2px 2px 0 2px; border: 1px solid black; } ul#tabmenu a:link, ul#tabmenu a:visited { display: block; color: #FFF; background-color: transparent; text-decoration: none; padding: 4px; } ul#tabmenu a:hover { background-color: #0d749c; color: #FFF; } body#home li.home, body#archief li.archief, body#teksten li.teksten, body#contact li.contact { border-bottom: 1px solid #FFF; color: #000; background-color: #FFF; } body#home li.home a:link, body#home li.home a:visited, body#archief li.archief a:link, body#archief li.archief a:visited, body#teksten li.teksten a:link, body#teksten li.teksten a:visited, body#contact li.contact a:link, body#contact li.contact a:link { color: #000; background-color: #FFF; }
css en html bestanden koppelen
Neem alle css code over naar je html-editor en sla het bestand op als ’tab.css’. Wanneer je deze opslaat in dezelfde map als je html bestand moet je de tabbladen aan het werk kunnen zien.
Met dit voorbeeld kun je vier pagina’s maken. Wanneer je meer pagina’s maakt moet je de css code niet vergeten uit te breiden. Dat geldt dan met name voor de laatste twee stijlen.
Succes met bouwen!
