Navigatie toevoegen

Wanneer je een website maakt zal deze waarschijnlijk niet bestaan uit één pagina. In een later hoofdstuk gaan we daarom een aantal pagina's toevoegen. Om vervolgens op een van die andere pagina's terecht te komen hebben we behoefte aan een navigatiemenu. En dat is wat we in de volgende oefening gaan maken.

Een lijst opstellen

HTML heeft de mogelijkheid om een opsommingslijst te maken. Neem de onderstaande code over als je ook een navigatiemenu wilt maken.


Zoals je in de bovenstaande code kunt zien is er een lijst gemaakt bestaande uit vier items. Deze lijst begint met de ul-open-tag en eindigt met de ul-sluit-tag. Deze ul staat voor "unordered list" (ofwel een niet genummerde lijst). In deze ul-container zitten li-open- en li-sluit tags. Li staat in dit geval voor "list-item". Wanneer u het resultaat in de browser bekijkt ziet je een opsommingslijst bovenaan de pagina. Van deze lijst gaan we het navigatiemenu maken.

Ankers toevoegen aan het navigatiemenu

Om de menulijst ook daadwerkelijk te laten functioneren is het toevoegen van ankers noodzakelijk. Binnen de li-container plaatsen we een a-container zodat alle items in de lijst klikbaar worden. Zie de onderstaande afbeelding voor de code.

Omdat we nog geen andere pagina's hebben zal het menu nog niet werken, dat gaan we in het hoofdstuk "Pagina's toevoegen" oplossen.