Fullscreen menu overlay II

We beginnen met een voorbeeld. Als je op de link hieronder klikt, verschijnt er een foto van een meeuw, met wat tekst. In de linker bovenhoek zit een knop. Als je daar op klikt verschijnt er een menu. Als je weer op de knop klikt verdwijnt het menu weer. Als je op een menu-item klikt verdwijnt het menu ook. De links zelf doen niets.

Op deze pagina wordt besproken hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

Inspiratie voor deze bladzijde in ontstaan door een artikel in Webdesigner Magazine 93, (februari 2017) pag. 66 en 67. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De auteur is niet bij het oorspronkelijke artikel genoemd. De code is niet meer beschikbaar op internet. Voor deze site heb ik de code helemaal opnieuw geschreven.

Het voorbeeld is heel geschikt voor een (product-)presentatie op een groot scherm. Een smartphone in landscape-stand is minder geschikt.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Zelf een site mee bouwen.
   
• De werking van het script
• Het script bestaat uit HTML (in het document), CSS voor de opmaak (in de file styles.css) en JavaScript om te reageren op klikken met de muis (in het document).
   
• HTML
• De structuur van de HTML is belangrijk, omdat het 'voorblad' en het menu in het zelfde bestand zitten.
• Het menu zit in een <div>-tag met id="myMenu". Je kunt hier alle HTML in zetten die je wilt.
• Voor het menu is hier een unordered list gebruikt. De list-items bevatten de hyperlinks. De bullets zijn verwijderd met behulp van CSS.
• In het voorbeeld verwijzen de links naar de pagina zelf met href="#".
• De knop is een <button>-tag met id="myButton". De opmaak en de werking ervan zijn geregeld met CSS en JavaScript.
• Voor de teksten op het 'voorblad' is 'gewone' HTML gebruikt, de achtergrond is geregeld met CSS.
   
• CSS
• De CSS begint met de opmaak van het 'voorblad'. Als eerste wordt de body opgemaakt. Deze bedekt het volledige window. De achtergrondfoto wordt hier ingesteld. Het midden van de foto wordt altijd zichtbaar, buiten het window uitstekende delen zijn altijd onzichtbaar. Scrollbalken worden onderdrukt.
• In het 'voorblad' zijn alleen h1 en p gebruikt. Meer CSS is dus niet nodig.
• Vervolgens worden de instellingen gemaakt voor de knop (#myButton). Die is absoluut gepositioneerd op 5% van de window-breedte en -hoogte, gemeten uit de linker bovenhoek van het window. Daardoor is het ook mogelijk om z-index zo in te stellen dat de knop altijd zichtbaar is.
• Tenslotte worden de instellingen gemaakt voor het menu(#myMenu). Ook dat is absoluut gepositioneerd, in de linker bovenhoek van het window. Daardoor is het ook mogelijk om z-index zo in te stellen dat het menu zich tussen het 'voorblad' en de knop bevindt.
• Bij het laden van de pagina is het menu niet zichtbaar doordat opacity op nul is gezet. Het JavaScript verandert deze waarde als er op de knop wordt geklikt.
• De menu-titel is gemaakt met h2. Om te zorgen dat die niet helemaal bovenaan op het blad staat, is daar een grote margin-top ingesteld.
• De melding dat de links niet werken is gemaakt met p. Om te zorgen dat die altijd onderaan in het window staat is die met position: fixed en bottom: 0 vastgepind.
• De links staan in een unordered list. Deze staat gecentreerd op de pagina. Dat bereik je met position: absolute in combinatie met left: 50% en transform: translateX(-50%).
• De bullets van de lijst zijn verwijderd met list-style-type: none.
• De onderstreping van de links zelf is verwijderd met text-decoration:none.
   
• JavaScript
• Het JavaScript reageert als er op de knop wordt geklikt. Daar voor is er een eventListener actief die de function toggleMenu() start na een klik op de knop. De listener heet activateButton(). Deze wordt pas actief als de pagina is geladen; dit gaat via window.onload.
• activateButton() geeft ook waarden aan de variabelen aa en bb:
  •   aa verwijst naar de CSS van het menu.
  •   bb verwijst naar de knop.
  Dit gaat via de id's "myMenu" en "myButton".
• De function toggleMenu() doet twee dingen:
  •   Hij maakt het menu zichtbaar of verbergt het.
  •   Hij verandert de tekst op de knop.
• toggleMenu() kijkt wat er moet worden gedaan aan de hand van opaciity. Als die nul is wordt die ingesteld op 0.8. Het menu blijft dus een beetje doorschijnend. Als opaciity niet gelijk is aan nul wordt die nul gemaakt. Het menu verdwijnt dan.
• Met het verbergen of zichtbaar maken van het menu wordt ook de knoptekst veranderd. Dat gebeurt door de innerHTML van de knop te veranderen.
• Het voorblad bevindt zich op z-index nul, omdat daar geen instellingen voor gemaakt zijn. Het menu zit op z-index:5. De knop bevindt zich op z-index:10. Door deze instellingen zijn geen maatregelen nodig om de knop altijd in beeld te houden.
   
• Zelf een site mee bouwen
• Download de .zip-file en pak hem uit. Wijzig de filenaam html557a.htm in index.html of iets degrelijks.
• Regel een geschikte foto als achtergrond. Deze moet groter zijn dan het grootste scherm waarop de pagina wordt getoond, ander krijg je grijze randen om de foto. Zet de bestandsnaam van de foto in het blok body in de file styles.css. Je hebt nu een werkend voorbeeld.
• Pas de HTML aan:
  •   De kop en de tekst op het 'voorblad'
  •   De links in het menu
• Pas de CSS aan:
  •   Lettertype, karaktergrootte, kleuren, enz.
  •   Plaats en opmaak van de knop.
•   De opmaak van de <p>-tags in het menu. Die is nu gebruikt als een soort voettekst.

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

<link rel="stylesheet" href="styles.css">
<script>
function toggleMenu() {
  var aa = document.getElementById('myMenu').style;
  var bb = document.getElementById('myButton');
  var my_op = aa.opacity;
  if (my_op == 0) {
    my_op = 0.8;
    bb.innerHTML = "Menu sluiten";
  } else {
    my_op = 0;
    bb.innerHTML = "Klik hier voor het menu";
  }
  aa.opacity = my_op;
}
function activateButton() {
  document.getElementById('myButton').addEventListener('click', toggleMenu);
}
window.onload = activateButton;
</script>

(Zet dit in de <BODY>).

<h1>De meeuw zweeft boven het water</h1>
<p>Zweven boven water ... rekenen!</p>
<button id="myButton">Klik hier voor het menu</button>

<div id="myMenu">
  <h2>Het menu: Maak uw keuze</h2>
  <p>De links werken niet!</p>
  <ul>
    <li><a href="#" onclick="toggleMenu()">Ben's Hobbyhoekje</a></li>
    <li><a href="#" onclick="toggleMenu()">Ben's Fractalsite</a></li>
    <li><a href="#" onclick="toggleMenu()">Ben's Fotosite</a></li>
    <li><a href="#" onclick="toggleMenu()">Webmasterij.nl</a></li>
  </ul>
</div>

Downloaden:
 
Druk op de knop:  File: voorb557.zip, 1577 bytes.

Opmerking:
 
Zie ook het item Fullscreen menu overlay I, dat is qua functionaliteit vergelijkbaar met dit verhaal, maar is niet noodzakelijk schermvullend.