Opdracht

Als laatste toevoeging aan je oefenproject gaan we een menu maken. De menu-items verijzen naar andere pagina's die nog niet bestaan, maar straks in je eindopdracht kun je hier gemakkelijk werkende links naar de verschillende pagina's van je site van maken.

Begin met het toevoegen van onderstaande lijst onderaan je pagina. (Dat is niet de meest logische plaats voor een menu nartuurlijk, maar het is voor nu maar een oefening. In je eindopdracht kun je een logischere pagina indeling maken.) Dit wordt de html basis van ons menu:

<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>

We gaan nu met css de eigenschappen van deze lijst aanpassen om er een menu van te maken. Zoals je ziet hebben we de <ul> een uniek id gegeven, zodat we css kunnen schrijven die specifiek voor het menu geldt, maar niet voor andere gewone lijsten op onze pagina.

We voegen de css code die hieronder staat toe:

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

We gebruiken de eigenschap display: inline; om de <li></li> elementen naast elkaar weer te geven. We gebruiken ook float: left; om te zorgen dat de elementen netjes links tegen elkaar aan komen te staan. LET OP! We leggen hier niet verder uit wat float en inline precies doen, omdat deze wat complexe eigenschappen zijn die je op specifieke manieren moet gebruiken. Gebruik de eigenschappen verder nog niet in je pagina. Float komt nog verder aan bod bij de eindopdracht.

We voegen vervolgens de volgende code toe:

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

margin: 0px; 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

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

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

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

Verder willen we dat je

• op het hele blokje van een link kunt klikken in plaats van alleen op de tekst.

• meer ruimte rondom om de link hebt (de blokjes worden wat ruimer)

#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;
}

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 een apart css blok a:hover met andere tekst- en achtergrondkleur.

Deel 2 van de oefenopdrachten is nu klaar en je kunt het inleveren.

Je hebt nu genoeg basiskennis om een echte website met fatsoenlijke layout te gaan maken. Yay!