Menu met rollende regels Nieuw
Groot menu waarin elke regel bij hover of toetsenbordfocus omhoog rolt en een tweede regel met echte informatie laat zien: wat je onder Diensten vindt, hoeveel projecten er zijn opgeleverd, het telefoonnummer onder Contact. Pure CSS met transform en overflow, geen script. Op touchschermen blijft het een rustig menu zonder rol, bij minder beweging wisselt de tekst zonder beweging. Past in een uitklapmenu of op een contactpagina van een aannemer, studio of praktijk.
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.
<!-- 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}}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 →