Sibling Focus Nav Nieuw

Groot menu waarin de andere items vervagen zodra je er één aanwijst of met tab selecteert. Rustig maar duidelijk; past bij een overlay-menu of een footer met hoofdlinks.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- Sibling Focus Nav · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<nav class="sfn" aria-label="Hoofdmenu"><ul class="sfn__list"><li><a class="sfn__a" href="#"><span class="sfn__n">01</span>Diensten<span class="sfn__ar">&rarr;</span></a></li><li><a class="sfn__a" href="#"><span class="sfn__n">02</span>Projecten<span class="sfn__ar">&rarr;</span></a></li><li><a class="sfn__a" href="#"><span class="sfn__n">03</span>Werkwijze<span class="sfn__ar">&rarr;</span></a></li><li><a class="sfn__a" href="#"><span class="sfn__n">04</span>Over ons<span class="sfn__ar">&rarr;</span></a></li><li><a class="sfn__a" href="#"><span class="sfn__n">05</span>Contact<span class="sfn__ar">&rarr;</span></a></li></ul></nav>
</div>

/* Sibling Focus Nav · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.sfn{font-family:'Switzer',system-ui,sans-serif;width:300px;max-width:86%}
.sfn__list{list-style:none;margin:0;padding:0}
.sfn__a{display:flex;align-items:baseline;gap:12px;padding:3px 0;font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.12;color:#0a0a0a;text-decoration:none;transition:opacity .3s,filter .3s,transform .35s cubic-bezier(.22,1,.36,1)}
.sfn__n{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.1em;color:rgba(10,10,10,.45);transform:translateY(-2px)}
.sfn__ar{color:#F5480F;font-size:20px;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.sfn__list:hover .sfn__a,.sfn__list:focus-within .sfn__a{opacity:.18;filter:blur(2px)}
.sfn__list .sfn__a:hover,.sfn__list .sfn__a:focus-visible{opacity:1;filter:none;transform:translateX(6px);outline:none}
.sfn__a:hover .sfn__ar,.sfn__a:focus-visible .sfn__ar{opacity:1;transform:none}
.sfn__a:hover .sfn__n,.sfn__a:focus-visible .sfn__n{color:#F5480F}
@media(max-width:420px){.sfn__a{font-size:23px}}
@media(prefers-reduced-motion:reduce){.sfn__a,.sfn__ar{transition:none}}

Meer uit navigatie & menu's

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →