Opmaak en effecten
Pas de indeling van de navigatiebalk aan, maak hem plakkerig bij het scrollen en voeg subtiele animaties toe — alles vanuit de sectie Opmaak van Menu Builder.
Afstand en uitlijning
In de sectie Opmaak bepaal je hoe de menu-items worden verdeeld:
- Uitlijning — waar de items in de balk staan: begin, midden, einde, ruimte ertussen of gelijkmatige ruimte.
- Tussenruimte — de ruimte tussen menu-items.
- Horizontale / verticale opvulling — de binnenste opvulling van de navigatiebalk.
- Randradius van de container — afgeronde hoeken voor de hele balk.
- Laatste item verschuiven — zet het laatste menu-item aan de tegenovergestelde rand vast (handig voor een "Contact"- of "Inloggen"-knop).
Plakkerige navigatie
Schakel Sticky in om de navigatiebalk bovenaan het scherm te laten plakken terwijl de bezoeker scrolt.
| Optie | Omschrijving |
|---|---|
| Kleiner bij scrollen | De balk wordt compacter zodra er gescrolld is. |
| Schaduw | Voegt een schaduw toe onder de balk wanneer hij vastzit. |
| Opmaak spiegelen | Gebruik een andere uitlijning voor de vastgezette toestand dan de standaardtoestand. |
| Overgang | Hoe vloeiend de balk animeert tussen toestanden (in seconden). |
| Z-index | Stapelvolgorde, voor het geval de balk boven andere vaste elementen moet staan. |
Scrollvoortgangsbalk
Een dunne balk die vult naarmate de bezoeker door de pagina scrolt — populair op lange artikelen en documentatie.
- Schakel Scrollvoortgangsbalk in de sectie Opmaak in.
- Kies de kleur, hoogte (1–10 px) en positie (boven of onder de navigatiebalk).
Ingangsanimatie
Animeer het menu wanneer de pagina voor het eerst laadt. Kies uit Infaden, Naar beneden/boven/links/rechts schuiven, Inzoomen of Flip X — of laat het op Geen.
Je kunt ook de duur, een vertraging voor de start en een spreiding instellen zodat items één voor één verschijnen.
Link-hover-animatie
Voeg een micro-interactie toe wanneer de bezoeker over een menulink zweeft. Opties zijn Omhoog bewegen, Schalen, Pulseren, Stuiteren, Schudden, Gloeien en Geanimeerd onderstrepen.
Dropdown-indicator
Items met een submenu kunnen een kleine indicator tonen. Kies de vorm — driehoek, chevron, punt of geen — en optioneel de kleur, grootte en of die roteert wanneer het dropdown opent.
Het dropdown-paneel van het submenu is volledig aanpasbaar via Stijl → Submenu-dropdown: randradius, horizontale en verticale opvulling, lettergrootte, lettergewicht en minimale breedte.
Scroll Spy
Scroll Spy markeert automatisch de navigatielink die overeenkomt met de sectie die zichtbaar is in de viewport terwijl de bezoeker door een lange pagina scrolt.
- Schakel Scroll Spy in via Opmaak → Opmaak.
- Stel een triggeroffset in (standaard 80 px) — de hoogte van de plakkerige balk wordt automatisch opgeteld tijdens runtime.
- Activeer optioneel Soepel scrollen met History API-hashupdates en ARIA-live-regio-aankondigingen voor schermlezers.
De laatste sectie op de pagina wordt altijd geactiveerd wanneer helemaal naar beneden is gescrolld. Actieve secties delen de visuele opmaak die is gedefinieerd in Kleuren → Actieve link.
Alle animaties respecteren de prefers-reduced-motion-instelling van de bezoeker — zie de pagina Toegankelijkheid.