Van boven inschuivend menu met jQuery
Als je deze pagina een beetje naar beneden laat scrollen (minstens 100px), schuift er van boven een header-balk het beeld in.
Als je daar op klikt krijg je een schermvullend menu te zien.
Als je op het menu klikt, verdwijnt het weer. Voor demonstratie-doeleinden is er ook een "echt" menu ingebouwd.
Op deze pagina wordt getoond hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken, behalve het plaatje van het logo. Dat moet je zelf toevoegen.
Inspiratie voor dit verhaal komt uit Webdesigner Magazine nr. 80 (oktober 2015), pag. 56 en 57. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
Bij de toepassing op deze site is de code een beetje opgeschoond en is de opmaak aangepast aan de kleuren van deze website.
Het menu verdwijnt na een klik op het menu zelf, dat is bij het origineel niet het geval.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- De code bestaat uit HTML, CSS en JavaScript (jQuery). Er is hier voor jQuery gekozen omdat de animaties worden gestart door een gebruikers-actie (scrollen, klikken). De benodigde event-handlers en de animaties hiervoor zijn eenvoudig te realiseren.
- Het header-blok en het menu worden opgemaakt met CSS. Daarvoor is een apart bestand, styles.css.
- Door een geschikte keuze van z-index wordt ervoor gezorgd dat de bovenbalk en het menu boven het document 'zweven'.
In voorkomende gevallen moeten die waarden worden opgehoogd. Nu is het z-index:200 voor de bovenbalk en z-index:201
voor het menu.
- Tijdens het laden van de pagina wordt een event-handler aangemaakt die regeert op scrollen.
- Als er meer dan 100 pixels naar beneden is gescrolled, wordt een functie aangeroepen die een animatie start om de headerbalk te tonen.
- Na een klik op de headerbalk wordt het menu van onderen het beeld in geschoven. Na weer een klik op de headderbalk of het menu zelf, wordt het menu weer verwijderd. Als er op een link is geklikt wordt die geopend in een nieuw tabblad of venster.
- Als er naar boven wordt gescrolled verdwijnt de bovenbalk weer; Als op dat moment het menu zichtbaar is, verdwijnt dat ook.
- De status van de headerbalk wordt bijgehouden in de boolean variabele down: Zichtbaar: down == true; Onzichtbaar: down == false.
- De status van het menu wordt bijgehouden in de boolean variabele menuOn: Zichtbaar: menuOn == true; Onzichtbaar: menuOn == false.
- Het verschuiven van de headerbalk en het menu gebeurt met de jQuery function animate(). De eerste parameter geeft
aan door middel van een CSS-opdracht waar de de animatie moet eindigen. De tweede parameter is de duur van de animatie, in
milliseconden.
- Inbouwen in je eigen site
- Download de .zip-file, pak hem uit en neem de code op in je HTML-bestand, zoals hierboven en hieronder is aangegeven.
- jQuery wordt betrokken van een CDN. Hier wordt jQuery versie 2.1.4 gebruikt. Of het ook met eerdere versies van jQuery werkt is niet onderzocht.
- Regel een logo voor in de bovenbalk, of bedenk een wervende tekst.
- Pas de CSS-code en het menu naar je eigen inzichten aan.
- De afmetingen van de verschillende onderdelen kunnen worden aangepast, behalve waar 100% staat. Als je die verandert
wordt de correcte werking van het script onzeker.
- Tenslotte
- Zorg ervoor dat de pagina hoger is dan de hoogte van het scherm, anders verdwijnt de scrollbalk en kan er niet gescrolled
worden. Zet desnoods alle broodtekst (met de bijbehorende koppen) in een <div>-tag en geef die width:100%;
en height:1200px; (of zoveel als nodig is).
N.B.: je moet hier een absolute eenheid gebruiken. Een relatieve eenheid, bijv. height:120%;, werkt in dit geval niet! - Het is aan te bevelen om nog ergens een melding op het scherm te zetten:
scroll ↓ of iets dergelijks. De noodzaak om eerst even te scrollen ligt nl. niet voor de hand!
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="https://code.jquery.com/jquery-2.1.4.min.js"
integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw="
crossorigin="anonymous"></script>
Het atribuut integrity="sha256-8Wqy … wJVw=" moet op één regel staan!
<link rel="stylesheet" href="styles.css">
(Zet dit bovenaan in de <BODY> ).
<div id="header">
<img src="logo.gif" alt="logo">
</div>
<div id="menu">
<p>Kies een item uit onderstaande lijst</p>
<ul>
<li><a href="https://home.hccnet.nl/s.f.boukes"
target="NewBen">Home</a></li>
<li><a href="https://www.webmasterij.nl"
target="NewBen">Webmasterij</a></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 class="overlay-close">Menu sluiten</a></li>
</ul>
</div> <!--#menu-->
<script>
$(function () {
var down = false;
var menuOn = false;
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop();
if ( scrollTop > 100 && down == false) {
$('#header').animate({"top": 0}, 300 );
down = true;
}
if ( scrollTop < 100 && down == true) {
$('#header').animate({"top": -100}, 300 );
down = false;
if (menuOn == true){
$('#menu').animate({"bottom": "-100%"}, 500 );
menuOn = false;
}
}
});
$( "#header" ).click(function() {
if (menuOn == false){
$('#menu').animate({"bottom": -100}, 500 );
menuOn = true;
} else {
$('#menu').animate({"bottom": "-100%"}, 500 );
menuOn = false;
}
});
$( "#menu" ).click(function() {
if (menuOn == true){
$('#menu').animate({"bottom": "-100%"}, 500 );
menuOn = false;
}
});
});</script>
Downloaden:
Druk op de knop:
File: voorb059.zip, 884 bytes.
