Voorbeelden van websiteheaders om te bewerken en kopiëren
Voorbeelden van websiteheaders
Voorbeelden van websiteheaders: 10 live ontwerpen in HTML en CSS | We.Inc
10 originele ontwerpen voor websiteheaders die u live kunt bewerken: layouts met logo en navigatie, plaats van de CTA, sticky headers, mobiele menu's zonder JavaScript en een checklist voor headers.
Een websiteheader is de strook bovenaan elke pagina met het logo, de hoofdnavigatie en meestal één actieknop. Sterke headers houden het bij vijf tot zeven links, zetten het logo links met een link naar home en klappen op telefoons in tot een menu met label. Hieronder staan tien originele headerontwerpen met bewerkbare code.
Headerlayouts en wanneer u ze gebruikt
Layout
Het beste voor
Let op
Logo links, links rechts
De meeste bedrijfssites
Te veel links die de CTA van het scherm duwen
Logo links, links in het midden, CTA rechts
SaaS- en dienstensites
Heeft genoeg breedte nodig; klap eerder in
Gecentreerd logo, links eronder
Winkels, restaurants, redactionele sites
Hogere header neemt meer scherm in
Hulpbalk boven de hoofdbalk
Lokale bedrijven die op telefoontjes draaien
Twee balken op mobiel; voeg ze samen
Compacte sticky balk
Lange pagina's
Bedekt ankerdoelen en inhoud
Galerijen met headers tonen meestal plaatjes. Dit zijn werkende headers in gewone HTML en CSS met verzonnen merken, zodat u het frame kunt verkleinen, de code kunt wijzigen en de versie kunt kopiëren die bij uw site past.
Filter de voorbeelden op layout, of scroll door alle tien.
Bewerk de code in een willekeurig voorbeeld; het afgeschermde frame tekent opnieuw terwijl u typt.
Kopieer de HTML en CSS en vervang het logo, de links en de knoptekst door die van u.
Loop de checklist aan het eind door voordat u publiceert.
Zet de links in een nav-element met een aria-label en markeer de huidige pagina met aria-current="page".
Het header-element telt alleen als banner-landmark van de pagina als het niet in article, aside, main, nav of section staat.
Sticky headers hebben een top-waarde nodig, zoals top: 0, anders gedraagt position: sticky zich als relative.
Voeg scroll-margin-top toe aan koppen als de header sticky is, zodat ankerlinks de kop niet onder de balk verstoppen.
Maak elk aanraakdoel minstens 24 bij 24 CSS-pixels om te voldoen aan de WCAG 2.2-eis voor doelgrootte op niveau AA; 44 pixels is prettiger.
Veelgestelde vragen
Wat hoort er in een websiteheader?
Het logo met een link naar de homepage, de hoofdnavigatie en voor de meeste bedrijfssites één primaire knop zoals Boeken of Offerte aanvragen. Lokale bedrijven voegen vaak een telefoonnummer toe. Laat alles weg wat bezoekers niet op elke pagina nodig hebben.
Hoe hoog moet een websiteheader zijn?
Daar is geen vaste regel voor. Ongeveer 56 tot 80 pixels is gebruikelijk voor één balk op desktop, en smaller op telefoons. Een sticky header moet zo laag mogelijk zijn, omdat hij de hele tijd inhoud bedekt.
Kan ik een mobiel menu bouwen zonder JavaScript?
Ja. Een details-element met een summary als menuknop opent en sluit de links native en werkt met het toetsenbord. Voorbeeld 6 op deze pagina gebruikt die aanpak. Een JavaScript-knop met aria-expanded geeft u meer controle over animatie en sluiten.
Moet de header sticky zijn?
Op lange pagina's waar mensen het menu of de CTA vaak nodig hebben, helpt een compacte sticky header. Op korte pagina's kost hij vooral ruimte. Gebruikt u er een, houd hem dan slank en controleer dat links binnen de pagina eronder uitkomen.
Plaats van logo, navigatie en CTA
Mensen zoeken het logo linksboven en verwachten dat het ze naar home brengt, dus houd die conventie aan tenzij uw merk een sterke reden heeft om het te centreren. Zet de actieknop helemaal rechts, waar het oog eindigt bij het scannen van de balk.
Orden de links naar wat bezoekers het meest nodig hebben, niet naar uw organigram. Diensten en prijzen komen meestal vóór Over ons.
Headers op telefoons
Onder ongeveer 768 pixels passen de meeste rijen met links niet meer. Klap ze in achter een duidelijk gelabelde Menu-knop en houd de hoofd-CTA ernaast zichtbaar, want dat is de ene link die zijn ruimte verdient.
Test op 375 pixels breed. Scrolt er iets zijwaarts, maak labels dan korter of klap eerder in.
Checklist voor websiteheaders
Controleer dit voordat u publiceert
Controle
Waarom
Logo linkt naar de homepage
Het meest verwachte gedrag van een header
Links staan in een gelabelde nav
Screenreaders noemen het navigatie
Huidige pagina gemarkeerd met aria-current
Meldt waar de bezoeker is
Eén primaire knop, met een eigen stijl
Maakt de hoofdactie duidelijk
Menuknop heeft een zichtbaar tekstlabel
Alleen een icoon wordt makkelijk gemist
Zichtbare focusrand op elke link
Toetsenbordgebruikers zien waar ze zijn
Geen zijwaarts scrollen op 375 px
Op telefoons gaan headers het eerst stuk
Sticky balken verbergen geen doelen van ankerlinks
Op te lossen met scroll-margin-top
1. Klassiek: logo links, links en knop rechts
De standaardlayout voor bedrijven. De knop is het laatste item en dus het eindpunt van de blik.
2. Drie zones: logo, gecentreerde links, CTA
Veel gezien op softwaresites. Een grid houdt de links echt gecentreerd, hoe breed het logo ook is.
3. Gecentreerd logo met links eronder
Past bij winkels en restaurants waar de merknaam de hoofdrol speelt. De links lopen op smalle schermen door naar een tweede rij.
4. Hulpbalk met telefoonnummer boven de hoofdbalk
Voor lokale bedrijven die op telefoontjes draaien: het nummer is een echte tel:-link zodat telefoons het kunnen bellen.
5. Compacte sticky header
Scroll binnen het frame. position: sticky met top: 0 houdt de balk in beeld; de doorschijnende achtergrond blijft leesbaar boven de inhoud.
6. Mobiel menu met details en summary, zonder JavaScript
De summary is de Menu-knop; de browser regelt openen, sluiten en het toetsenbord. Brede schermen tonen de links op één regel.
7. Donkere header met zoekveld
Het zoekveld heeft een visueel verborgen label, zodat screenreaders het toch voorlezen.
8. Transparante header boven een hero
De header ligt op de kleur van de hero. Houd het tekstcontrast op 4.5:1 of hoger tegen wat er ook achter ligt.
9. Winkelheader met aankondigingsbalk
Een korte aankondigingsregel boven de balk bevat één aanbieding; het aantal in het mandje staat in de linktekst zodat het voorgelezen wordt.
10. Mobiele header die de CTA zichtbaar houdt
Op telefoons klappen de links weg, maar de boekknop blijft naast het menu staan, want dat is de actie die ertoe doet.