NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Mobiele onderbalk met vijf knoppen Nieuw

Mobiele demo-pagina van een rijschool met een vaste onderbalk van vijf knoppen die bij de branche horen: Pakketten, Ophalen (postcodecheck), Proefles (groot in het midden), WhatsApp en Menu. De balk staat met position:sticky onderin het scrollvlak (in productie: position:fixed met env(safe-area-inset-bottom)). Elke knop opent een eigen scherm met staten: postcode goed, buiten gebied en fout, proefles-formulier met fout en succes. aria-current markeert het actieve scherm.

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

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- 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>

Meer uit paginasecties

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 →