Menu met rollende regels New
Large menu in which each line rolls up on hover or keyboard focus to reveal a second line with real information: what you find under Services, how many projects were delivered, the phone number under Contact. Pure CSS with transform and overflow, no script. On touch screens it stays a calm menu without the roll; with reduced motion the text swaps without movement. Fits a full menu overlay or a contact page for a builder, studio or practice.
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.
<!-- Menu met rollende regels · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="mrr">
<nav class="mrr__nav" aria-label="Hoofdmenu">
<ul class="mrr__list">
<li><a class="mrr__a" href="#mrr-diensten"><span class="mrr__roll"><span class="mrr__one">Diensten</span><span class="mrr__two" aria-hidden="true">Verbouw, aanbouw en onderhoud</span></span></a></li>
<li><a class="mrr__a" href="#mrr-projecten"><span class="mrr__roll"><span class="mrr__one">Projecten</span><span class="mrr__two" aria-hidden="true">86 opgeleverd rond Zwolle</span></span></a></li>
<li><a class="mrr__a" href="#mrr-werkwijze"><span class="mrr__roll"><span class="mrr__one">Werkwijze</span><span class="mrr__two" aria-hidden="true">Van schets tot sleuteloverdracht</span></span></a></li>
<li><a class="mrr__a" href="#mrr-contact"><span class="mrr__roll"><span class="mrr__one">Contact</span><span class="mrr__two" aria-hidden="true">Bel 038 123 4567</span></span></a></li>
</ul>
</nav>
<p class="mrr__foot">Timmerbedrijf Hoekstra, Dokter van Thienenweg 12, Zwolle</p>
</div>
</div>/* Menu met rollende regels · NedDev · eigen werk. */
.mrr{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:14px 26px;background:#0a0a0a;color:#fff;font-family:'Switzer',sans-serif;text-align:left;overflow:hidden}
.mrr *,.mrr *::before,.mrr *::after{box-sizing:border-box}
.mrr__list{list-style:none;margin:0;padding:0}
.mrr__a{--h:44px;display:block;width:max-content;max-width:100%;color:#fff;text-decoration:none;outline:none}
.mrr__roll{display:flex;flex-direction:column;height:var(--h);overflow:hidden}
.mrr__one,.mrr__two{display:flex;align-items:center;flex:none;height:var(--h);white-space:nowrap;transition:transform .46s cubic-bezier(.65,0,.25,1)}
.mrr__one{font:600 34px/1 'Switzer',sans-serif;letter-spacing:-.025em}
.mrr__two{font:500 22px/1 'Switzer',sans-serif;letter-spacing:-.01em;color:#F5480F}
.mrr__a:hover .mrr__one,.mrr__a:hover .mrr__two,.mrr__a:focus-visible .mrr__one,.mrr__a:focus-visible .mrr__two{transform:translateY(-100%)}
.mrr__a:focus-visible{box-shadow:0 2px 0 #F5480F}
.mrr__list li:nth-child(2) .mrr__one,.mrr__list li:nth-child(2) .mrr__two{transition-duration:.5s}
.mrr__foot{margin:12px 0 0;font:400 13px/1.3 'Switzer',sans-serif;color:#b9b5ae}
@media (max-width:420px){.mrr{padding:10px 18px}.mrr__a{--h:36px}.mrr__one{font-size:27px}.mrr__two{font-size:17px}.mrr__foot{margin-top:8px}}
@media (hover:none){.mrr__a:hover .mrr__one,.mrr__a:hover .mrr__two{transform:none}}
@media (prefers-reduced-motion:reduce){.mrr__one,.mrr__two{transition:none}.mrr__a:hover .mrr__one,.mrr__a:focus-visible .mrr__one{transform:none;visibility:hidden;height:0}.mrr__a:hover .mrr__two,.mrr__a:focus-visible .mrr__two{transform: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 →