Dit levert een eenvoudig menu op aan de zijkant in verticale vorm.
We maken een lijst van de onderwerpen die we vanaf de pagina waar we een menu voor maken willen bereiken. Meestal zijn dat de onderwerpmappen die in deze map staan.
Laten we eens beginnen met de homepage:
We zien dat naast de onderwerpen ook een contact link wordt toegevoegd. Iedere website behoort in ieder geval het e-mailadres van de webmaster te bevatten. Voor een organisatie ook die van het secretariaat of iets dergelijks.
We gaan een blok aanmaken met de naam menu. Hiervoor worden de <div> en </div> tags gebruikt. Het blok krijgt een naam door de id attribuut.
Wat ook opvalt is dat een menu in een opsommingslijst geplaatst wordt. De punten halen we later weg in de stylsheet. We krijgen dan een menu zoals dat op deze site gebruikt wordt.
<div id="menu">
<ul>
<li><a href="/onderwerp1/index.html">Onderwerp 1</a></li>
<li><a href="/onderwerp2/index.html">Onderwerp 2</a></li>
<li><a href="mailto:webmaster%40mijnsite.nl">Contact</a></li>
</ul>
</div>
De %40 is de hexadecimale waarde van @ en wordt ter vervanging hiervan gebruikt om spambots te plagen. Na het klikken op de contact link staat het e-mailadres correct in de aan-balk van de e-mailclient.
Gebruikt u een e-mailadres in een tekst wijzig de @ dan in de code @.
De Link staat tussen de li tags.
We gaan nu de opmaak aanmaken zodat het er niet meer als een opsommingslijst uitziet.
#menu ul {
list-style-type:none;
margin-left:0;
padding-left:0}
Zoals u kunt zien zeer eenvoudig.
Als u wilt kunt u er later nog aanpassingen in aanbrengen om er knoppen van te maken.