Sibling Focus Nav New

Large menu where the other items blur as soon as you point at or tab to one. Calm but clear; suits an overlay menu or a footer with main links.

How to use it

Paste the HTML where the navigation & menus should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
No JavaScript needed.

<!-- 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}}

More navigation & menus

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →