Lijsten verbouwen tot menu

Zoals je weet kun je in HTML een lijst maken met <ul> (unordered / bolletjes) of <ol> (ordered / genummerd). Je gebruikt voor ieder item op de lijst <li></li>. Voorbeeld:

<ul class="voordelen"> <!-- Unordered list - bolletjes ervoor -->
	<li>douche en sauna in de kamer</li>
	<li>slechts twee minuten lopen van de supermarkt</li>
	<li>slechts drie minuten lopen van het strand</li>
	<li>zwembad aanwezig</li>
</ul>

We kunnen de hele lijst en de elementen apart stijlen:

Met de list-style kunnen we de soort lijst veranderen. Je geeft drie dingen mee.

• position: opsommingstekens binnen of buiten het kader (inside / outside)

• type: rondje, vierkantje etc. (Flink wat opties: disc, circle, square, decimal, upper-roman, lower-roman, upper-alpha, lower-alpha, none)

• image: eventueel een plaatje als opsommingsteken

ul.voordelen { /* de lijst */
  border: 1px solid green;
  list-style: inside square none;
}

ul.voordelen li { /* de list items */
  border: 1px solid red;
}

Veel websites bestaan uit meerdere pagina's (hiervoor volgt uitleg bij de eindopdracht) en hebben daarom een navigatiemenu. Een lijst is hier erg geschikt voor, maar dan moeten we met css wel het een en ander verbouwen om het er netjes uit te laten zien. In de opdracht ga je een lijst omzetten naar een menu.