Geanimeerde responsive header

Een responsive site bouwen zonder allerlei bibliotheken en platforms te gebruiken is niet echt gemakkelijk. Toch is het zonder al die toeters en bellen goed te doen. Dat bewijst het voorbeeld op deze bladzijde.
Als je het voorbeeld opent in een window van meer dan 1060px breed, zie je een webpagina met een menu in de blauwe bovenbalk. Als het window smaller is dan 1060px, is het menu vervangen door een hamburger-teken. Als je daar op klikt verschijnt hetzelfde menu, maar nu als dropdown-menu.
Als je een beetje naar beneden scrollt, wordt de bovenbalk een beetje smaller en verschijnt er een schaduwrandje. Als je helemaal naar boven scrollt, verdwijnt de schaduw en wordt de bovenbalk weer breder.
De content van het document bevat geen informatie die nodig is voor het voorbeeld, daarom is daar lipsum-tekst voor genomen.

Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 92 (december 2016), pag. 60 e.v.
Het blad Webdesigner Magazine 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.

Voor deze website is de oorspronkelijke CSS geschoond en is het dropdown menu toegevoegd.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Zelf een site mee bouwen.
   
• De werking van het script
• De code van het voorbeeld bestaat uit HTML (in het document), CSS voor de opmaak en de animatie (in de file styles.css) en JavaScript voor de interactie met de gebruiker (in de file scripts.js).
   
• HTML
• De HTML bestaat uit een -tag en een <main>tag. De bevat het menu, in beide verschijningsvormen. De <main> bevat de broodtekst, die blijkt verder buiten beschouwing.
• De header bevat de bovenbalk. Die bestaat uit twee delen.
• De <nav>-tag bevat de blauwe bovenbalk met het logo, het horizontale menu en het hamburger-teken.
• De <div>-tag bevat het dropdownmenu-menu, wat zichtbaar wordt door een klik op de hamburger (mits die zichtbaar is).
• De twee menu's worden elk gemaakt met behulp van een ongeordende lijst. In het voorbeeld zijn ze gelijk, maar dat hoeft niet. Dit schept de mogelijkheid om voor verschillende schermafmetingen verschillende menu's te presenteren. Je kunt het ook gebruiken om het menu voor kleinere schermen anders te laten reageren dan voor grote schermen.
   
• CSS
• De CSS begint met een gedeeltelijke reset. Alleen de zaken die voor het voorbeeld van belang zijn worden ingesteld:
  •  De marge voor body, h1 en ul wordt op nul gezet;
  •  De bullets voor li worden uitgeschakeld;
  •  De lettergrootte voor h1 wordt ingesteld;
  •  De links (a) en de body worden opgemaakt.
• Vervolgens is de header aan de beurt, met de zaken die daar onder liggen. Een paar highlights:
  
  • De bovenbalk (nav) wordt gepresenteerd met flexbox: display:flex
  • De menu-items in de bovenbalk worden rechts uitgelijnd met align-items: flex-end.
  • De ruimte tussen het menu en het logo in de bovenbalk worden gemaakt met justify-content: space-between.
  • Er wordt vanuit gegaan dat de klasse logo tekst bevat. Als je daar een plaatje wilt, moet je vrijwel zeker de CSS aanpassen.
  • De tussenruimte tussen de menu-items in de bovenbalk wordt gemaakt door van alle items, behalve de laatste, de rechter marge in te stellen op 20px.
  • Voor de animaties worden alleen transition gebruikt. De meeste animaties zijn heel subtiel en daardoor lastig te zien. Zonder de animaties zou het er net et iets minder mooi uit zien.
  • De CSS is voorbereid op het gebruik van een illustratie in de bovenbalk, met de klasse top-image. Als je dat wilt toepassen voeg je class="top-image" toe aan <nav>.
• Het uiterlijk van de bovenbalk verandert bij een window-breedte van 1060 px. Dat wordt geregeld met:
  @media screen and (max-width: 1060px).
  De bovenbalk wordt minder hoog doordat de padding kleiner wordt gemaakt; de menu-lijst wordt verborgen; De afmetingen van het logo worden ingeperkt; het hamburger-teken (.toggle-menu) wordt zichtbaar (en daarmee aanklokbaar) gemaakt.
• Het dropdownmenu heeft is fixed, op 68px van boven. Dat heeft tot gevolg dat de bovenbalk een beetje onder het menu verdwijnt als de pagina helemaal naar boven is gescrolled. Dat is een schoonheidsfoutje dat wordt veroorzaakt door het aanpassen van de padding, zie eerder in dit document. Het is op te lossen door een ingreep in de CSS en de JavaScript-function callbackFunc().
   
• JavaScript
• Het JavaScript bestaat uit twee delen: Een anonymus function om te reageren op scrollen en een function toonMenu() die het dropdownmenu toont of verbergt.
• De animatie van de bovenbalk wordt gestuurd door het scrollen van de pagina, om precies te zijn door het scrollen van het blok main.
• Als main (bijna) helemaal naar bovenaan staat (de waarde van pageYOffset is dan klein) staat de bovenbalk in de normale stand. Als pageYOffset groter wordt dan 50, wordt de klasse scroller toegevoegd aan main. De CSS zorgt er dan voor dat de bovenbalk van uiterlijk verandert.
• Als pageYOffset ≤ 50, wordt de klasse scroller verwijderd en gaat de bovenbalk terug naar de normale stand.
• Om te voorkomen dat er content onder de bovenbalk verdwijnt, stelt het JavaScript de padding-top in, afhankelijk van de hoogte van de topbalk.
• Het aanpassen van de bovenbalk en/of de padding gebeurt elke keer dat de pagina wordt geladen of het browser-window van grootte verandert. Daarvoor zijn event-handlers gemaakt voor onload en onresize.
   
• De opzet en de werking van deze code maakt het noodzakelijk om het script helemaal aan het einde van het document te plaatsen, dus net vóór de </body>-tag.
   
• Het reageren op een klik op het hamburger-teken wordt gedaan door de function toonMenu(). Dat kan alleen als het hamburger-teken zichtbaar is, dus als de breedte van het window kleiner is dan 1060 pixels.
• toonMenu() kijkt of het dropdownmenu zichtbaar is of niet. Dat gebeurt door de waarde van de CSS-eigenschap display te bekijken. Als die gelijk is aan "none", wordt die veranderd in "block".
  In het andere geval wordt de function verbergMenu() aangeroepen.
• verbergMenu() zet de waarde van display op "none". Het dropdownmenu verdwijnt door deze actie.
• Het dropdownmenu verdwijnt ook als er buiten het menu wordt geklikt. Daarvoor is met document.querySelector en addEventListener de aanroep van verbergMenu() gekoppeld aan een klik op elke aanwezige <main>-tag.
• Om zeker te stellen dat de CSS-eigenschap display een waarde heeft (en niet leeg is), wordt display apart geïnitialiseerd.
   
• Zelf een site mee bouwen
• Download de .zip-file en pak hem uit. Hernoem de file html551a.htm naar index.html of iets dergelijks. Je hebt nu het complete voorbeeld van de site beschikbaar.
• Pas de CSS aan. Kies je eigen kleuren, zet er een logo in, verander de hoogte van de bovenbalk, lettertype, enz.
• Pas het menu in de HTML aan aan je eigen wensen. Verander de linkteksten en vul het href-attribuut in.
  Let er op dat je dit dubbel moet doen, voor de bovenbalk en voor het drop­downmenu.
• Vul de <main> met zinnige content.

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">

(Zet dit in de <BODY>).

<header>
  <nav>
    <h1>
      <a href="" class="logo">Uw Logo</a>
    </h1>
    <ul>
      <li><a href="">Over ons</a></li>
      ..
      <li><a href="">Blog</a></li>
    </ul>
    <button class="toggle-menu" onclick="toonMenu()">&#9776;</button>
  </nav>
</header>
<div id="dropdown">
  <ul>
    <li><a href="">Over ons</a></li>
    ..
    <li><a href="">Blog</a></li>
  </ul>
</div>

<main>
  <p>Lorem ipsum .... </p> </main>

<!-- Activeer het menu -->
<script src="scripts.js"></script>

Downloaden:
 
Druk op de knop:  File: voorb551.zip, 2592 bytes.