Ben's Hobbyhoekje -- Horizontaal inschuivend menu met CSS en W3.JS

Horizontaal inschuivend menu met CSS en W3.JS

Links bovenaan deze pagina zie je een hamburger-menu-icoontje. Als je er op klikt/tikt schuift er een paneel in beeld met een menu. Als je op een item klikt wordt er een nieuw venster of tabblad geopend waarin de gevraagde webpagina verschijnt. Met een klik/tik op het kruis verdwijnt het menu weer.

Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code staat onderaan de pagina, die kun je ook downloaden om zelf te gebruiken, inclusief de icoontjes.

Het voorbeeld is een bewerking van een script uit Webdesigner Magazine nr.78, pag. 22.
Dit blad wordt sinds november 2017 niet meer gemaakt.
Ik heb het effect verfraaid en de code een beetje vereenvoudigd, waarbij o.a. jQuery is vervangen door gewoon JavaScript en W3.JS.

Er worden twee items besproken:
1. De werking van het script.
2. Inbouwen in je eigen site.
De werking van het script
Het menu wordt grotendeels buiten het scherm gemaakt. Alleen het icon om het menu te tonen is zichtbaar, de rest niet omdat de achtergrondkleur 'transparent' is. Het zit in het id = "menu", dat werkt als container.
#menu bevat twee andere id's: paneel (met daarin het menu) en hamburger (met het hamburger-icon).
Als er op het hamburger-icon wordt geklikt verandert het in een kruisje en schuift het menu in beeld. Daarbij verandert de achtergrondkleur van transparant in lichtgrijs. De beweging en de kleurverandering worden geregeld door een transition.
De actie wordt geregeld door een JavaScript-function, die aan #menu de klasse open toekent. Als er op het kruisje wordt geklikt, wordt .open uit #menu verwijderd, waardoor het paneel weer terug uit beeld schuift en het kruisje weer een hamburger wordt.
Ook als op 'Menu Sluiten' wordt geklikt, verdwijnt het menu uit beeld. Ook hier wordt gebeurt dat door .open uit #menu te verwijderen.
Het toevoegen en verwijderen van .open wordt gedaan door de function toggleClass uit de bibliotheek W3.JS.
Het openen en sluiten van het menu (via het hamburger/kruisje) wordt geregeld door de JavaScript-function actief().
actief() wordt aan een click op #menu gebonden door middel van addEventListener(). Dit wordt gedaan door de function initMenu(), die wordt gestart als de pagina is geladen (met behulp van window.onload = initMenu).
Het sluiten van het paneel met het menu-item gebeurt door de JavaScript-function Sluiten().
De stand het het menu (open of dicht) wordt bijgehouden met de variabele menuOpen, die de waarden true en false kan hebben. Dit is nodig bij het veranderen van de hamburger in het kruisje en terug.
Het menu-paneel is niet modal. Dat wil zeggen dat het deel van de pagina die niet door het paneel is afgedekt, gewoon toegankelijk is. Als het menu open is en je klikt bijvoorbeeld op DOWNLOAD of TERUG, dan wordt die link gewoon uitgevoerd.
Inbouwen in je eigen site
Download de zip-file en pak deze uit.
Download w3.js van w3schools.com.
Zet de code in je HTML-bestand zoals hieronder is aangegeven.
Pas het menu aan naar je eigen wensen. Advies: pas het target-attribuut aan (andere naam )als je het menu laat linken naar pagina's buiten het domein van je site. Verwijder het als de linkt naar een pagina binnen je eigen site.
Pas de CSS aan. Zonder meer aanpasbare zaken zijn:
color, font-size, padding, margin, en border.
Wees voorzichtig met het aanpassen van de hier niet opgesomde zaken.
De eigenschap left in #menu is gelijk aan −1 × width in #paneel. Dat moet zo blijven. Als je er één verandert moet je de andere mee veranderen.
De width en padding-top in #hamburger zijn gekozen om een mooi resultaat te geven. Als je width (bijvoorbeeld omdat je een ander hamburgertje wilt), moet je width in #menu evenveel mee veranderen.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<script src="w3.js"></script>


<script>
var menuOpen = false; //Menu is gesloten per default

function initMenu() {
document.getElementById("hamburger").addEventListener('click', actief)
}

function Sluiten() {
//Schakel de menu element klasse om in 'closed'
w3.removeClass('#menu', 'open')
//Zet de menuOpen vlag uit en zet het menu-icoontje uit
menuOpen = false;
document.getElementById("hamburger").innerHTML =
"<img src='icon-menu.png' height='26' width='26'>";
}

function actief(event) {
if(event.type == "click") {
//Schakel de menu element klasse om in open of closed
w3.toggleClass('#menu', 'open')
//Zet de menuOpen vlag om
menuOpen = !menuOpen;

//Schakel de tab van hamburger om naar kruis en vice-versa.
if (menuOpen) {
document.getElementById("hamburger").innerHTML =
"<img src='icon-kruis.png' height='26' width='26'>";
} else {
document.getElementById("hamburger").innerHTML =
"<img src='icon-menu.png' height='26' width='26'>";
}
}
}

window.onload = initMenu;
</script>


<link rel="stylesheet" href="styles.css">

(Zet dit bovenaan in de <BODY>).

<div id="menu">
<div id="paneel">
<ul>
<li><a href="https://home.hccnet.nl/s.f.boukes"
target="NewBen">Ben's Hobbyhoekje</li>
<li><a href="https://www.webmasterij.nl/fotoalbum"
target="NewBen">Ben's FotoSite</a></li>
<li><a href="https://www.webmasterij.nl/fractals"
target="NewBen">Ben's Fractalsite</a></li>
<li><a href="https://www.webmasterij.nl"
target="NewBen">Webmasterij.nl</a></li>
<li><a href="https://www.facebook.com/webmasterij"
target="NewBen">Facebook</a></li>
<li><a href="javascript:Sluiten()">Menu sluiten</a></li>
</ul>
</div>
<div id="hamburger">
<img src="icon-menu.png" height="26" width="26">
</div>
</div>

Downloaden:

Druk op de knop: File: voorb492.zip, 2659 bytes.