Ben's Hobbyhoekje -- Fullscreen menu-overlay I

Fullscreen menu-overlay I

Als je op onderstaande knop klikt of tikt, verdwijnt de pagina onder een overlay met daarop een menu. Door een keuze te maken verdwijnt de overlay en wordt de gekozen pagina geopend in een nieuw tabblad.

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

Inspiratie: Webdesigner Magazine nr. 68 (augustus 2014) pag. 46 e.v.
Dit blad wordt sinds november 2017 niet meer gemaakt.

Er worden twee items besproken:
1. De werking van het script, in globale termen.
2. Inbouwen in je eigen site
De werking van het script
Voor het verwerken van een muisklik op de knop wordt JavaScript gebruikt. Voor de overlay wordt alleen HTML en CSS gebruikt.
De CSS staat in de file style457.css. Die kun je naar eigen inzicht aanpassen waar het gaat om kleuren, lettertype, regelhoogte, enz. Aan de positionering van de overlay zelf moet je niet wijzigen, tenzij je een speciaal effect nastreeft.
Bij een muisklik op de knop of op de overlay wordt de function toggleMenu() aangeroepen. Deze kijkt of de overlay zichtbaar is aan de hand van style.display. Als de overlay zichtbaar is wordt deze verborgen. Als de overlay niet zichtbaar is wordt deze getoond.
Als er op een link in de overlay wordt geklikt, wordt deze -uiteraard- gevolgd. De gevraagde site wordt geopend in een nieuw tabblad.
Inbouwen in je eigen site
Link de CSS-file style457.css in de <head>.
Zet de HTML-code zoals hieronder is getoond in de <body>.
Pas de CSS aan aan je eigen voorkeuren.
Je kunt dit net zo mooi maken als je zelf wilt:
- In plaats van een knop met Toon het Menu kun je een hamburger (Drie liggende streepje boven elkaar) gebruiken, bijvoorbeeld in de rechterbovenhoek. Dat wordt door iedereen begrepen.
- In plaats van een menu-item Menu sluiten kun je een kruisje in de rechter bovenhoek van de de overlay zetten. Ook dat begrijpt iedereen.
- Gebruik een foto voor de achtergrond van de overlay in plaats van een gekleurd vlak. Je kunt zo'n achtergrondfoto ook transparant maken (maar zorg dan wel dat de onderliggende pagina niet gaat storen).

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="style457.css">

<script>
function toggleMenu() {
var aa =document.getElementById('overlay').style;
if (aa.display == "block") aa.display = "none";
else aa.display = "block";
}
</script>

(Zet dit in de <BODY>)

<div id="overlay"> 
<nav onclick="toggleMenu()">
Kies een item uit onderstaande lijst<br>
<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>
</nav>
</div>

Downloaden:

Druk op de knop: File: voorb457.zip, 1150 bytes.

Opmerking:

Zie ook het item Fullscreen menu overlay II, dat is qua functionaliteit vergelijkbaar met dit verhaal, maar speciaal gericht op schermvullende websites.