Les 9: Lijsten opmaken (menu in je pagina)

In HTML kun je een lijst maken met <ul> (unordered / bolletjes) of <ol> (ordered / genummerd). Je gebruikt voor ieder item op de lijst <li></li>. Met CSS kun je het soort lijst veranderen dus je hoeft eigenlijk alleen <ul> te gebruiken.

<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: opsomming binnen of buiten het kader (inside / outside)

• type: rondje, vierkantje etc (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;
}

<plaatje>

We gaan nu een menu maken met een lijst.

We gebruiken de eigenschap display: inline; om de <li></li> naast elkaar weer te geven. We gebruiken ook float: left; om te zorgen dat de elementen netjes links tegen elkaar aan komen te staan.

PROBEER DEZE CODE:

<ul id="menu"> 
    <li><a href="index.html">Home</a></li>
    <li><a href="pagina1.html">Pagina 1</a></li>
    <li><a href="pagina2.html">Pagina 2</a></li>
    <li><a href="pagina3.html">Pagina 3</a></li>
</ul>

#menu li { /* de list items */
  display: inline;
  float: left;
  border: 1px solid red;
}

LET OP! We leggen hier niet verder uit wat float en inline precies doen. Dat komt in latere modules. Gebruik de eigenschappen verder nog niet in je pagina.

We voegen de code hieronder toe. Margin zorgt ervoor dat er geen ruimte naast het menu komt en overflow: hidden; zorgt ervoor dat de achtergrondkleur te zien is over de hele breedte. Wat we hierna gaan toevoegen zorgt voor mooier opgemaakte links in je menu. We willen namelijk:

• een andere kleur

• geen onderstreepte links

PROBEER DEZE CODE:

#menu {
  background-color: grey;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

We zetten de kleur van links op wit en text-decoration: none; om de onderstreping weg te halen.

Merk op: Als je op een link geklikt hebt blijft de kleur nog steeds wit!

PROBEER DEZE CODE:

#menu a {  /* Selecteer de links uit het menu*/
  color: white;
  text-decoration: none;
}

We halen nu eerst de rand weg. Verder willen we dat je

• op het hele blokje van een link kunt klikken

• meer ruimte om de link hebt

We gebruiken display: block; zodat je overal kunt klikken (niet alleen op tekst). Met padding zorgen we voor meer ruimte om de tekst. Als laatste willen we nog dat de kleuren veranderen als je er met je muis overheen gaat. Hiervoor gebruiken we: :hover.

PROBEER DEZE CODE:
 
#menu a {  /* Selecteer de links uit het menu*/
  color: white;
  text-decoration: none;
  display: block;
  padding: 15px;
}

#menu a:hover {  /* Als je met je muis over een link gaat*/
  color: black;
  background-color: white;
}

Opdrachten

1] Maak zelf een mooi menu in je pagina

2] Maak de opdracht op repl.it