Een menu maken in HTML

De meest gebruikte methode om een menu te maken is met behulp van een lijst. De voornaamste reden hiervoor is zoekmachine optimalisatie.  Een lijst op zichzelf is niet bijzonder mooi of leuk om te zien maar met behulp van CSS kun je een zeer mooi menu maken. Zaken zoals kleur, afbeelding en witruimtes zijn dan in te stellen.

 

Video’tje kijken?

Was dit makkelijk en wil je wat meer? Kijk dan een video over hoe je een dropdown menu maakt met lists.

 Links

w3schools heeft makkelijk begrijpbare tutorials waarbij je zelf het een en ander kunt uitproberen op de website: http://www.w3schools.com/css/css_navbar.asp

POLS

Op http://lesmateriaal.glr.nl/modules/HTM22/Readers/02_list-elementen.pdf kun je het PDF bestand vinden welke we in de les ook gebruiken. Je hebt deze kennis nodig op Opdracht 1 te maken. Opdracht 1 kun je vinden in http://lesmateriaal.glr.nl/modules/HTM22/Readers/00_Inleiding%20HTM22.pdf.

 

Y. Bruin

De HTML van een menu ziet er als volgt uit:

basis list

Een ongestijlde lijst in HTML.

<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
</ul>

Een UL welke een Unordered List aangeeft (een lijst met bolletjes) en losse LI elementen voor de inhoud van de lijst. Het resultaat zie je rechts. Let op: ik heb geen overige HTML ingevoegd dus de head en body etc moet je zelf doen.

Dan nu de CSS. Eerst maar eens die bolletjes verwijderen:

ul{
list-style-type:none;
}

Vervolgens kun je kiezen uit 2 methodes om je menu verder te stijlen. Methode 1 met behulp van float en methode 2 met behulp van een display:inline. Ik vind methode 1 persoonlijk fijner werken maar ik zal beide hieronder uitleggen.

 

Methode 1

Maak van je link een button door deze breedte en hoogte te geven.

a:link{
display:block;
width:100px;
height:50px;
…. /*en eventueel meer stijlen*/
}

Wil je dat je menu horizontaal is voeg dan nog het volgende toe:

li{
float:left;
}

 

Methode 2

Style je link tot een button met:

a{
color: #F21317;
border:#000000 1px solid;
margin:5px;
padding: 3px 10px;
}

list2

Met behulp van CSS is de verticale lijst een horizontale lijst geworden.

Om je menu horizontaal te maken voeg dan het volgende toe:

li{
display:inline;
}

 

Wederom: gebruik CSS om je menu mooi te stijlen.

workmenu

Gebruik CSS om je linkjes te stijlen. Zowel de gewone als de rollovers.

 

blue

Strak, recht en met een semi-transparantie. Overigens kan dit zonder afbeeldingen, wat weer snelheid scheelt.

 

jiri

Of speelser, wisselend in hoogte.

 

big

Of maak zeer grote buttons, die al een voorproefje geven van wat men kan verwachten op de vervolg pagina.

 

artgeex

Alleen tekstueel.

 

aqua

Handgetekend.

 

macrabbitnav

Of tekst gecombineerd met een ikoontje.