NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Mobiele onderbalk met vijf knoppen New

Mobile demo page for a driving school with a persistent bottom bar of five sector-specific buttons: Packages, Pick-up (postcode check), Trial lesson (large, centre), WhatsApp and Menu. The bar uses position:sticky in the scroll area (in production: position:fixed with env(safe-area-inset-bottom)). Each button opens its own screen with states: postcode ok, outside area and error, trial form with error and success. aria-current marks the active screen.

Rijschool Vlietland · Delft · telefoonweergave

Alles waar een leerling voor komt, onder zijn duim

78% van de bezoekers van een rijschool zit op de telefoon. Een balk onderaan met vijf vaste knoppen werkt daar beter dan een hamburgermenu: de proefles is altijd een tik weg.

  1. Pakkettenprijzen altijd een tik verderop
  2. Ophalenpostcodecheck: halen we je thuis of op school op
  3. Proeflesde middelste, grootste knop: de belangrijkste actie
  4. WhatsAppleerlingen van 17 appen liever dan dat ze bellen
  5. Menude rest van de site, voor wie verder wil lezen
Lesauto van de rijschool in een Delftse straat

9,4 uit 212 reviews

Rijles in Delft, Rijswijk en Pijnacker

CBR-cijfer 2025: 68% slaagt in een keer. Landelijk is dat 49%.

Eerstvolgende vrije proeflesdo 9 okt, 16:00

Zo werkt het

  1. Gratis proefles van 60 minuten
  2. Pakket kiezen, betalen in termijnen kan
  3. Theorie halen, dan lessen op vaste tijden
  4. Praktijkexamen bij CBR Rijswijk

Rijschool Vlietland · Vulcanusweg 281, Delft · KvK 61234578 · Bovag-lid

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Mobiele onderbalk met vijf knoppen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="rvo">
  <div class="rvo__in">
    <div class="rvo__copy">
      <p class="rvo__kick">Rijschool Vlietland · Delft · telefoonweergave</p>
      <h2 class="rvo__h">Alles waar een leerling voor komt, onder zijn duim</h2>
      <p class="rvo__lead">78% van de bezoekers van een rijschool zit op de telefoon. Een balk onderaan met vijf vaste knoppen werkt daar beter dan een hamburgermenu: de proefles is altijd een tik weg.</p>
      <ol class="rvo__why">
        <li><b>Pakketten</b><span>prijzen altijd een tik verderop</span></li>
        <li><b>Ophalen</b><span>postcodecheck: halen we je thuis of op school op</span></li>
        <li><b>Proefles</b><span>de middelste, grootste knop: de belangrijkste actie</span></li>
        <li><b>WhatsApp</b><span>leerlingen van 17 appen liever dan dat ze bellen</span></li>
        <li><b>Menu</b><span>de rest van de site, voor wie verder wil lezen</span></li>
      </ol>
    </div>
    <div class="rvo__phone">
      <div class="rvo__screen" tabindex="0" aria-label="Voorbeeld van de mobiele site, scrollbaar">
        <div class="rvo__head"><span class="rvo__logo"><i aria-hidden="true">L</i>Vlietland</span><a class="rvo__call" href="tel:+31152613370" aria-label="Bel 015 261 33 70"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 3.5h3l1.5 4.3-2.2 1.4a11 11 0 0 0 6 6l1.4-2.2 4.3 1.5v3a2 2 0 0 1-2.1 2C10.8 19 5 13.2 4.5 5.6a2 2 0 0 1 2-2.1z"/></svg></a></div>
        <div class="rvo__view" data-v="home">
          <img class="rvo__img" src="https://neddev.com/lab-media/mobiele-onderbalk-1.webp" alt="Lesauto van de rijschool in een Delftse straat" loading="lazy">
          <div class="rvo__pad">
            <p class="rvo__score"><b>9,4</b> uit 212 reviews</p>
            <h3 class="rvo__t">Rijles in Delft, Rijswijk en Pijnacker</h3>
            <p class="rvo__p">CBR-cijfer 2025: 68% slaagt in een keer. Landelijk is dat 49%.</p>
            <div class="rvo__next"><span>Eerstvolgende vrije proefles</span><b class="rvo__slot1">do 9 okt, 16:00</b><button type="button" class="rvo__btn" data-go="les">Plan proefles</button></div>
            <h3 class="rvo__t rvo__t--s">Zo werkt het</h3>
            <ol class="rvo__steps"><li>Gratis proefles van 60 minuten</li><li>Pakket kiezen, betalen in termijnen kan</li><li>Theorie halen, dan lessen op vaste tijden</li><li>Praktijkexamen bij CBR Rijswijk</li></ol>
            <p class="rvo__foot">Rijschool Vlietland · Vulcanusweg 281, Delft · KvK 61234578 · Bovag-lid</p>
          </div>
        </div>
        <div class="rvo__view" data-v="pak" hidden>
          <div class="rvo__pad">
            <h3 class="rvo__t">Pakketten</h3>
            <ul class="rvo__paks">
              <li><b>Start</b><span>20 lessen van 60 min</span><em>€ 1.299</em><button type="button" class="rvo__btn rvo__btn--sec" data-go="les" data-pak="Start">Kies Start</button></li>
              <li class="is-top"><i>Meest gekozen</i><b>Compleet</b><span>30 lessen + praktijkexamen</span><em>€ 2.149</em><button type="button" class="rvo__btn" data-go="les" data-pak="Compleet">Kies Compleet</button></li>
              <li><b>Spoed</b><span>25 lessen in 3 weken + examen</span><em>€ 2.495</em><button type="button" class="rvo__btn rvo__btn--sec" data-go="les" data-pak="Spoed">Kies Spoed</button></li>
            </ul>
            <p class="rvo__p">Losse les € 62,50. Prijzen inclusief btw.</p>
          </div>
        </div>
        <div class="rvo__view" data-v="op" hidden>
          <div class="rvo__pad">
            <h3 class="rvo__t">Halen we je op?</h3>
            <p class="rvo__p">Vul je postcode in. We halen je thuis, op school of op je werk op.</p>
            <form class="rvo__f rvo__f--op" novalidate>
              <label class="rvo__lbl" for="rvo-pc">Postcode</label>
              <div class="rvo__row"><input id="rvo-pc" class="rvo__inp" maxlength="7" placeholder="2611 AB" autocomplete="postal-code"><button class="rvo__btn" type="submit">Check</button></div>
              <p class="rvo__out" aria-live="polite">Probeer 2611, 2283 of 2711.</p>
            </form>
          </div>
        </div>
        <div class="rvo__view" data-v="les" hidden>
          <div class="rvo__pad">
            <h3 class="rvo__t">Gratis proefles</h3>
            <form class="rvo__f rvo__f--les" novalidate>
              <p class="rvo__pak" hidden></p>
              <fieldset class="rvo__set"><legend class="rvo__lbl">Kies een moment</legend><div class="rvo__days"></div></fieldset>
              <label class="rvo__lbl" for="rvo-n">Voornaam</label><input id="rvo-n" class="rvo__inp" autocomplete="given-name">
              <label class="rvo__lbl" for="rvo-t">Telefoon</label><input id="rvo-t" class="rvo__inp" type="tel" autocomplete="tel" placeholder="06 12 34 56 78">
              <p class="rvo__err" aria-live="assertive"></p>
              <button class="rvo__btn rvo__btn--full" type="submit">Proefles vastleggen</button>
            </form>
            <div class="rvo__ok" hidden tabindex="-1"></div>
          </div>
        </div>
        <div class="rvo__view" data-v="menu" hidden>
          <ul class="rvo__menu"><li><a href="#">Rijles auto (B)</a></li><li><a href="#">Automaat</a></li><li><a href="#">Faalangstexamen</a></li><li><a href="#">Theorie in 1 dag</a></li><li><a href="#">Instructeurs</a></li><li><a href="#">Veelgestelde vragen</a></li><li><a href="#">Contact en route</a></li></ul>
        </div>
        <div class="rvo__bar" role="navigation" aria-label="Snelmenu">
          <button type="button" class="rvo__tab" data-go="pak"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5zM9 9h6M9 13h6M9 17h3"/></svg><span>Pakketten</span><i class="rvo__badge">3</i></button>
          <button type="button" class="rvo__tab" data-go="op"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-6.5-6.1-6.5-11a6.5 6.5 0 0 1 13 0c0 4.9-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.3"/></svg><span>Ophalen</span></button>
          <button type="button" class="rvo__tab rvo__tab--main" data-go="les"><span class="rvo__main-i" aria-hidden="true">L</span><span>Proefles</span></button>
          <a class="rvo__tab" href="https://wa.me/31152613370" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20l1.2-3.8A8 8 0 1 1 8 19z"/><path d="M9 8.5c0 3 2.5 6 6 6.5l1-1.6-2-1-1 1c-1-.4-2.2-1.6-2.6-2.6l1-1-1-2z"/></svg><span>WhatsApp</span></a>
          <button type="button" class="rvo__tab" data-go="menu"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><span>Menu</span></button>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

More page sections

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 →