Navigeren met behulp van tabbladen

Navigeren met behulp van tabbladen

voorbeeld van het menu met 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 button 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, moet je deze zelfde kleur
straks ook gebruiken.

#tekst {
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	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 beinvloedt 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 gedt 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, wat 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!

          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *