Ben's Hobbyhoekje -- Rond menu dat groter wordt

Rond menu dat groter wordt

In de rechter bovenhoek van deze bladzijde zie je een kwartcirkel. Aan de "hamburger" is te zien dat er een menu onder zit. Als je er op klikt groeit de cirkel totdat die de hele pagina bedekt. Er verschijnt een menu waar je een en ander kunt kiezen.

Op deze pagina wordt besproken hoe je dit maakt. De code kun je downloaden om zelf te gebruiken

Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 89 (september 2016), pag. 18 e.v. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het script is niet bij het betreffende artikel genoemd.

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in je eigen site.
De werking van het script
De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript.
De HTML waarmee het menu wordt gemaakt bestaat uit één enkele <nav>-tag. deze heeft het data-attribuut data-action="expand". Dit wordt door het JavaScript gebruikt bij het openen en sluiten van het menu.
Binnen de <nav>-tag bevindt zich een <span>-tag die karakter #9776 laat zien. Dat is de hamburger.
Daarna volgt een aantal hyperlinks. In het voorbeeld staan er vier. De eerste drie zijn "echte" links. De laatste roept de function closeMenu() aan. Die sluit het menu.
Het geopende menu wordt ook gesloten door een klik op de hamburger.
De animatie van het openen en sluiten van het menu wordt geregeld door CSS, via JavaScript, dat de klasse open toevoegt aan of verwijdert van de <nav>-tag.
De overgang van nav naar nav.open houdt in dat height: 4em en width: 4em wordt vervangen door height: 100% en width: 100%. Daarbij wordt ook de straal van de linker onderhoek veranderd van 100% (kwart cirkel) in 0 (rechthoek).
De overgang (transition) van menu open naar menu gesloten v.v. verloopt in 1 seconde met ease.
Het JavaScript zorgt ervoor dat de hamburger aanklikbaar wordt door er een event-listener aan te koppelen. Dat gebeurt zodra de pagina is geladen.
De listener kijkt of er op de hamburger geklikt wordt. Als dat gebeurt wordt gekeken of <nav> de klasse open heeft. Zo nee, dan wordt die toegevoegd en opent het menu zich. Zo nee, dan wordt deze verwijderd en sluit het menu.
Het menu kan ook gesloten worden door de hyperlink in het menu. Dit gaat via de function closeMenu(), die de klasse open verwijdert van de <nav>-tag.
Toepassen in je eigen site
Dit is een jQuery-toepassing, dus heb je jQuery nodig. Die betrek je het beste van een CDN. Versie 1.9.1 volstaat.
Download de code en pak hem uit.
Maak de code zoals hier is aangegeven. Let er daarbij op dat de HTML-structuur niet verandert.
Maak de links aan voor jouw site.
Pas de CSS in styles.css aan aan je eigen smaak: kleuren, lettertype en -hoogte en grootte van de kwartcirkel.

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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
window.addEventListener("load",function(){
$.each($('nav[data-action="expand"] *:first-child'),function(){
$(this).on("click",function(){
if($(this).parent().hasClass("open") == false)
$(this).parent().addClass("open");
else $(this).parent().removeClass("open");
});
});
});
function closeMenu() {
$.each($('nav[data-action="expand"] *:first-child'),function(){
$(this).parent().removeClass("open");
});
}
</script>

(Zet dit bovenaan in de <BODY>).

<nav data-action="expand">
<span>☰</span>
<a href="https://www.webmasterij.nl"
target="NewBen">Webmasterij.nl</a>
<a href="https://www.webmasterij.nl/fotoalbum"
target="NewBen">Ben's Fotosite</a>
<a href="https://www.webmasterij.nl/fractals"
target="NewBen">Ben's Fractalsite</a>
<a href="javascript:closeMenu()">Menu sluiten</a>
</nav>

Downloaden:

Druk op de knop: File: voorb533.zip, 1093 bytes.