Navigatiemenu
De weergave van fig.1 verschijnt in de browser wanneer u onderstaande code kopieert en in de editor plakt. De code is samengesteld uit vier <a href;"></a> inline elementen voor het aantalmenu items en aangezien we d.m.v. een functie in JS (JavaScript) de toestand van het menu willen manipuleren voegen we nog één a href element <a href="javascript:void(0);"voor de bedieningsknop van het menu dat verschijnt wanneer de webpagina op kleinere toestellen wordt weergegeven. Het menu past zich dan d.m.v. een instructie in CSS en een functie in JS automatisch aan de viewport van het toestel waarop de site bekeken wordt.
Hierbij voegen we nog een class attribuut en een onclick attribuut toe. class="icon" onclick="topnav()"><i class="fafa-bars"></i></a> Verder nog een genesteld idiomatisch textelement <i> dat naar het icoon van de bedieningsknop verwijst en dat via een externe bibliotheekgekoppeld wordt.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">.Deze vindt je samen met het meta tag voor de viewport onder de head tag terug.
De hierboven genoemdecodeblok wordt omsloten door een<div></div>tag en bevindt zich onder de<nav><nav>tag. Merk dat de<ahref=""></a>inline elementen zich standaard horizontaal naast elkaar positioneren en het eerste element of “first-child” zich in actieve toestand bevindt. Voor het linken van andere webpagina’s dienen de hashtags nog wel vervangen te worden door webpagina's. De hashtag belet dat we een foutmelding genereren bij het klikken wanneer de webpagina's nog onbestaand zijn. De"javascript:void(0)"invulling geeft aan dat deze geen link is maar een verwijzing naar een functie in javascript. Beide verhinderen dus in afwachting van het vervoledigen van onze webpagina een foutmelding bij het per ongeluk aanklikken.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/
4.7.0/css/font-awesome.min.css">
<title>Topnavigatie</title>
</head>
<body>
<nav>
<div class="topnav" id="myTopnav">
<a href="javascript:void(0);" class="icon" onclick="topnav()">
<i class="fa fa-bars"></i></a>
<a href="index.html"class="active">Home</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JS</a>
</div>
<nav>
</body>
</html>
Opmaak
Voor het verfraaien, het positioneren en het toevoegen van bepaalde functionaliteiten gebruiken we CSS. We geven de menubalk een zwarte achtergrond en verbergen scrollbar voor elementen die eventueel uit de marge van het blokelement vallen. Aangezien we het blokelement in HTML een “class” attribuut hebben gegeven, kunnen we deze in CSS selecteren d.m.v. de volgende code; .topnav{}. Dit noemen we een selector. Padding creëert ruimte rond de elementen en de onderstreping van de anchor tag elementen<ahref=""></a> worden verwijderd door de functie tekst-decoration:none;.
Om het navigatiemenu gebruiksvriendelijker te maken voegen we nog een hover effect toe aan de elementen door de pseudo-class topnav a:hover{} aan te brengen. Om een indicatie te geven van waar de gebruiker zich bevindt op de webpagina kleuren we het menu item dat actief is .topnav a.active {}. Door de .topnav a:not(:first-child, :nth-child(2)) {}selector op display:none; in te stellen zullen met uitzondering van de startknop en het icoon de overige elementen voorlopig niet op het beeldscherm verschijnen.
Voor de <a href=""></a> inline elementen in het blokelement te positioneren of uit te lijnen heb ik in dit geval gekozen voor de Float functie. Deze hadden ook met Flexbox of Grid gepositioneerd kunnen worden, maar later meer hierover. Door de selector.topnav a{}aan te brengen kunnen we d.m.v. float:right; het eerste element of “first-child” binnen het blokelement rechts uitlijnen. Voor de weergave van deze elementen heb ik voor het eerste element display:block; en het tweede element of “nth-child(2)” display:inline-block; aangegeven. Dit zal ervoor zorgen dat het element niet het volledig “div” block element inpalmt. Dit kan en hoeft niet voor het eerste element aangezien ik deze met de float functie uiterst rechts positioneer.(Voor demonstratieredenen heb ik gebruik gemaakt van de child selectors maar deze hadden evengoed met het class attribuut geselecteerd kunnen worden. U vindt hier meer informatie over bij de rubriek over selectoren onder de CSS themaknop).
De verborgen elementen dienen nu d.m.v. van een @media regel weer gegeven te worden op schermen die groter zijn dan 600px. Met de @media screen and (min-width: 600px) {} regel kunnen we verschillende stijlen van layouts op verschillende media types en schermen toepassen. Dit door een bepaalde opmaak aan één of meerdere selectoren toe te kennen.
Onder deze regel selecteren we de elementen met uitzondering van het eerste element (menuknop) .topnav a:not(:first-child) {display: block;} en positioneren deze links float: left; aansluitend aan het tweede element (Home). In deze configuratie willen we de menuknop met het icoon verbergen aangezien alle elementen zichtbaar en toegankelijk zijn .topnav a:first-child {display: none;}. Om een onderscheid te maken in de toestand van het beeldscherm voegen we nog een class toe aan de selector van het menu .topnavresponsive{}.
Onder deze selector positioneren we de elementen met uitzondering van het eerste element en tweede element .topnavresponsive a:not(:first-child, :nth-child(2)) {display: block;} links onder het tweede element (Home). Zo ook Hiermee gaan we in de volgende stap nog aan de slag om het navigatiemenu toegankelijk en responsief te maken met behulp van JS. Dit laatste is een referentie voor javascript om de huidige toestand van het menu te herkennen en om het class attribuut in HTML aan te passen via het onclick event "topnav()". Met behulp van deze functie kunnen we de menuonderdelen zichtbaar maken wanneer we op het icoon klikken.
Om ons menu nu ook nog aan te passen aan heel grote schermen kunnen we met behulp van de clamp functie ook onze lettertypes aaspassen. We selecteren de html tag en voegen volgende instructie helemaal vanboven toe aan het CSS bestand.
html {
font-size: clamp(.8rem, 1.4vw, 2.4rem);
line-height: 1.6;
}
Later meer hierover.
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
color: white;
text-decoration: none;
padding: 14px 16px;
}
.topnav a:hover {
background-color: #ddd;
color: #333;
}
.topnav a.active {
background-color: #ddd;
color: #333;
}
.topnav a:not(:first-child, :nth-child(2)) {
display: none;
}
.topnav a:first-child {
float: right;
display: block;
}
.topnav a:nth-child(2) {
display: inline-block;
}
@media screen and (min-width: 600px) {
.topnav a:not(:first-child) {
display: block;
float: left;
text-align: center;
text-decoration: none;
}
.topnav a:first-child {
display: none;
}
}
.topnavresponsive a:not(:first-child, :nth-child(2)) {
display: block;
color: #f2f2f2;
}
Functionaliteit
Wanneer we de developper tools erbij nemen merken we dat het menu van configuratie veranderd dankzij de opmaak die we hierboven in CSS hebben opgesteld. Echter in de mobiele versie hebben we nog geen toegang tot de verborgen onderdelen van het menu wanneer we op het icoon klikken. Aangezien we in Css een bijkomende classname .topnavresponsive{} toegevoegd hebben waarbij we het element zichtbaar maken dienen we het class attribuut .topnav{}in html met JS te manipuleren.
Vooreerst selecteren we in de console van de developper tools dit attribuut met behulp van volgende code:document.querySelector(".topnav"). De console zal dan aangeven waar dit attribuut zich bevindt wanneer men op enter klikt. Uiterst rechts van de regel bevindt zich een vizier waarmee we het element of de node kunnen selecteren. Dit vizier leidt ons dus bij het aanklikken hiervan automatisch naar het element in de html markup dat zich onder de inspector tab bevindt.
We keren terug naar de console en breiden de code verder uit met document.querySelector(".topnav").classList.toggle("topnavresponsive"); en drukken op enter. De console geeft dan "true" aan en het menu wordt nu wel toegankelijk. Onder de inspector tab in de html mark-up onder het nav tag merken dat het menu nu een classattribuut draagt met de naam "topnav topnavresponsive".
Indien we nu de viewport van ons scherm verkleinen tot minder dan 600px zal je merken dat het menu nu open en toegankelijk is. De toggle methode schakelt dus standaard conditioneel over van true naar false en bespaard ons in dit geval een if-statement. Hierdoor kan de laatste CSS regel uitgevoerd en ongedaan gemaakt worden met één coderegel. De aanpassing in de console is niet permanent en dient de JS coderegel nog ingevoerd te worden in het JS bestand onder een functie function topnav() {}. Zie codesnippet.
function topnav() {
document.querySelector(".topnav").classList.toggle("topnavresponsive");
}