Naar inhoud
FFrosthaven Lab

03 — 12 varianten

Navigatie

Headers, floating pills, mega menus, docks en mobiele drawers. Inclusief de scroll-gedragingen die erbij horen.

Sticky blur bar

standaard
Verhoeven Bouw

De basis voor vrijwel elke klantsite: sticky, halftransparant, backdrop-blur en een randlijn onderaan. Werkt met elk archetype.

Floating pill

modern
AltadecorBel ons

Losse zwevende balk met marge rondom. Ziet er duur uit, maar kost verticale ruimte; op mobiel altijd terugvallen op een gewone balk.

Shrink on scroll

scroll
Nordwerk

Scroll de pagina: de balk krimpt van 80px naar 48px.

Header krimpt zodra je begint te scrollen, zodat de content ruimte krijgt. Scroll de pagina om het te zien. Animeer de hoogte, niet de positie, anders springt de content.

Mega menu

b2bveel content
Casa Maestros

Tuinonderhoud

Snoei, beregening, gazon

Zwembad

Water, filters, techniek

Verhuurbeheer

Sleutels, check-in, schoonmaak

hover op “Diensten”

Nodig zodra een klant meer dan zes diensten heeft. De grid-rows truc animeert netjes zonder vaste hoogte te hoeven kennen.

Dock met magnify

speels

macOS-dock: iconen groeien naar de cursor toe. Leuk voor portfolio's en studio's, niet voor een site waar mensen iets moeten vinden.

Fullscreen drawer

mobiel
Groszek

open het menu rechtsboven

Het mobiele menu waar je in negen van de tien gevallen op uitkomt. De staggered delay per item is wat het duur maakt; zonder die vertraging voelt het goedkoop.

Underline indicator

jsstate

Streepje glijdt naar het actieve item. Meet offsetLeft en offsetWidth van de knop; hardcoded posities breken zodra de tekst vertaald wordt.

Pill indicator

jsstate

Zelfde meting, maar een vullend vlak in plaats van een streep. Iets zachter; past beter bij afgeronde, vriendelijke merken.

Scroll-spy anchornav

long-form

1. Intro

Scroll dit paneel.

2. Diensten

Scroll dit paneel.

3. Prijzen

Scroll dit paneel.

4. Contact

Scroll dit paneel.

Voor lange dienstenpagina's en juridische teksten. Gebruik in productie een IntersectionObserver in plaats van scroll-events.

Command palette

saas

⌘K-zoekvenster. Hoort thuis in dashboards en documentatie. Op een klantsite met acht pagina's is het pronkzucht.