Menu met wegdraaiende content

De techniek die hier wordt besproken is bij uitstek geschikt voor een site met verschillende onderwerpen die in korte content (weinig woorden) worden behandeld. De uitvoering op deze site is ook geschikt als voorblad met een submenu.

We beginnen met het voorbeeld. Er is een aantal foto's te zien met wat tekst. Dat zou als menu kunnen dienen. In de linker bovenhoek staat een hamburger-teken. Gewoonlijk open je daarmee een menu.
Als je op de hamburger klikt verandert het in een kruis. De hele contant draait opzij en toont het hoofdmenu. Als je op het kruis klikt sluit het menu weer. Dat gebeurt ook als je op het teken < in het menu klikt.
N.B.: de links in het menu sturen je naar een van mijn websites.

Op deze pagina wordt uitgelegd hoe je dit maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto's. Daar moet je zelf voor zorgen.

Ik heb dit menu gevonden op de site Lazarus.nl. Die site bestaat niet meer. Voor deze site heb ik het effect nagebouwd.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code van het voorbeeld is gemaakt met HTML, CSS (in de file styles.css) en JavaScript.
   
• HTML
• De HTML is ingedeeld in twee blokken: Het menu en de content.
• Voor het menu zijn twee <div>-tags gebruikt, met de klassen whitespace en menu.
  • Klasse whitespace dient alleen om de klasse menu verticaal te positioneren.
  • Klasse menu bevat de links naar andere sites/pagina's. Voor het <-teken is id="terug" gebruikt voor de opmaak en voor de koppeling aan de JavaScript-function sluiten().
• Voor de content is een enkele <main>-tag gebruikt. Deze bevat een drietal <div>'s:
  • De eerste <div> heeft id="hamburger". Hierin staat het hamburger teken of het kruisje. Dit id regelt ook de positionering en de opmaak.
    Er is voor een id gekozen omdat dit element met JavaScript aanspreekbaar moet zijn. Met een id is dat eenvoudiger dan met een class.
  • De tweede <div> heeft de klasse kop. Daarmee wordt de tekst 'Welkom op mijn site' gepositioneerd en opgemaakt.
  • De derde div> heeft geen class of id. Het dient alleen om de content bij elkaar te houden.
   
• CSS
• De CSS begint met een paar instellingen voor body en html: De hoogte en breedte van de beschikbare viewport wordt op 100% gezet; de binnen- en buitenmarges worden op nul gezet; het lettertype wordt ingesteld en scrollbars worden uitgezet door overflow: hidden;. De lichtgele achtergrondkleur van de body (waar ook het menu in zit) heet 'cornsilk'. Dit is een standaard naam.
• Bij alle instellingen voor de content (in <main>) wordt main expliciet genoemd. Dat is om verwarring met de body (lees: het menu) te voorkomen.
• De achtergrondkleur van de content is blauw, de tekstkleur is wit. De content in <main> beslaat de hele body.
• Aan main is ook nog toegevoegd: transform-origin: 0 550%;. Daarmee wordt het draaipunt van <main> vastgelegd. Dat moet ver beneden de onderkant van het browser-window liggen, om met een kleine verdraaiing voldoende ruimte te maken voor de menu-tekst.
• De hoekverdraaiing verloopt vloeiend met behulp van transition: all 0.75s ease.
   
• De content zelf staat in div's. De tekst begint op 25% van de hoogte van het browser-window, wordt gecentreerd getoond met een karakter-grootte van 120%. De letters van de kop zijn gtoot: 500%. Er is een witruimte van 20px tussen de kop en de rest van de content.
• Het hamburger-teken wordt apart gepositioneerd. Om aan te geven dat er op geklikt kan worden, wordt de cursor veranderd in een handje. Het plaatje van de hamburger / het kruisje krijgt de afmetingen 40px × 40px. (De plaatjes zelf zijn 200px × 200px).
• Als het menu zichtbaar is, heeft <main> de klasse open. Dat betekent een hoekverdraaiing (om de Z-as = loodrecht op het scherm) van 4°, met de klok mee. Het rotatie-punt is vastgelegd bij main.
   
• De menu-items zijn bijna zwart van kleur. Ze zijn niet onderstreept. Als je er met de muis overheen gaat krijgen ze wel een onderstreping en worden ze blauw.
• Het <-teken wordt apart behandeld. Het is geen 'gewone' link, maar een aanklikbaar item. Daarom heeft het id="terug".
   
• JavaScript
• Als eerste wordt de variable menuOpen gedeclareerd, die de waarde false krijgt. In deze variabele wordt bijgehouden of het menu open (=zichtbaar) is, of niet.
• Daarna wordt de function menuInit() gedefinieerd. Deze zorgt ervoor dat het hamburger-icon op het voorblad en het <-teken in het menu gaan reageren op een muisklik. Dit gaat met addEventListener().
  Deze function wordt aangeroepen als de pagina is geladen via window.onload.
   
• De function sluiten() wordt aangeroepen als er op het <-teken in het menu wordt geklikt. De klasse open wordt verwijderd van de main-tag en het kruisje met id="hamburger", waardoor de content in main weer terug draait en het kruisje weer een hamburger-teken wordt. De variabele menuOpen wordt weer op false gezet.
   
• De function actief() wordt aangeroepen als er op het hamburger-teken of het kruisje wordt geklikt. De function heeft 'event' als parameter. Er kunnen veel events tegelijk optreden, dus om zeker te stellen dat er gereageerd wordt op een muisklik, wordt er eerst gekeken of er inderdaad is geklikt.
• actief() kan het menu zowel openen als sluiten. Daarom wordt de methode toggle() gebruikt om de klasse open toe te voegen aan of te verwijderen van de tag main. De tag main zelf wordt opgespoord met behulp van:
  document.getElementsByTagName('main')[0].classList.
• getElementsByTagName() geeft een array terug van de tags in de parameter. In het voorbeeld is er ééén main-tag, die staat dus op positie [0].
• Omdat menuOpen alleen de waarden true en false kan hebben, kan menuOpen eenvoudig worden omgezet door er de waarde !menuOpen (! betekent 'not') aan toe te kennen.
• De plaatjes (hamburger en kruis) worden gekozen aan de hand van de zojuist ingestelde waarde van !menuOpen.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Hernoem de file html602a.htm naar index.html of iets dergelijks. Je hebt nu een -afgezien van de foto' s- werkend voorbeeld.
• Pas de HTML in het blok main aan voor je eigen doeleinden. Doe dat ook met de menu-items in het blok met klasse menu. Laat wel de regel met klasse terug staan; de inhoud van dat blok kun je wel veranderen.
• Pas de CSS aan aan je eigen voorkeuren: Kleuren, lettertype en -grootte. Om je eigen menu-items goed zichtbaar te krijgen, moet je mogelijk de height van whitespace aanpassen. Daarbij kun je ook de rotatiehoek in klasse open veranderen. In het voorbeeld is dat 4 graden; je kunt dat wat groter of kleiner maken. Bedenk dat het effect minder fraai wordt als de hoek te groot of te klein is.
  Een derde mogelijkheid is om de y-waarde van transform-origin in de CSS van main te verhogen of te verlagen (nu is dat 550%). DE x-waarde (nu gelijk aan nul) kun je ook veranderen maar het is de vraag of dat een mooi effect geeft.
• Het JavaScript kun je ongewijzigd laten zolang je geen class- of id-namen verandert.

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>
var menuOpen = false; //Menu is gesloten per default
function initMenu() {
  document.getElementById("hamburger").addEventListener('click', actief)
  document.getElementById("terug").addEventListener('click', sluiten)
}
function sluiten() {
  document.getElementsByTagName('main')[0].classList.toggle("open");
  //Schakel de menu element klasse om in closed
  document.getElementById('hamburger').classList.remove("open");
  //Zet de menuOpen vlag uit en zet het menu-icoontje terug
  menuOpen = false;
  document.getElementById("hamburger").innerHTML = "<img src='icon-menu.png'>";
}
function actief(event) {
  if (event.type == "click") {
    //Schakel de menu element klasse om in open of closed
  document.getElementsByTagName('main')[0].classList.toggle("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'>";
    } else {
      document.getElementById("hamburger").innerHTML = "<img src='icon-menu.png'>";
    }
  }
}
window.onload = initMenu;
 
</script>

(Dit is code van de <BODY>.

<div class="whitespace"></div>
<div class="menu">
  <a href="https://home.hccnet.nl/s.f.boukes" target="NewBen">Ben's Hobbyhoekje</a><br>
  <a href="https://www.webmasterij.nl/fotoalbum" target="NewBen">Ben's Fotosite</a><br>
  <a href="https://www.webmasterij.nl/fractals" target="NewBen">Ben's Fractalsite</a><br>
  <a href="https://www.webmasterij.nl" target="NewBen">Webmasterij.nl</a><br>
  <div id="terug"><a>&lt;</a></div>
</div>
 
<main>
  <div id="hamburger"><img src="icon-menu.png"></div>

  <div class="kop">Welkom op mijn site</div>
  <div>
    <img src="foto-1.jpg" alt="Molen">
    <img src="foto-2.jpg" alt="Paddenstoel">
    <img src="foto-4.jpg" alt="Roos">
    <img src="foto-5.jpg" alt="Hoogspanningsmast">
    <img src="foto-6.jpg" alt="Parkje">
    <p>Een gebeuren vol met HTML, JavaScript, CSS, Foto's
        en Fractals.</p>
  </div>
</main>

Downloaden:
 
Druk op de knop:  File: voorb602.zip, 3063 bytes.