Nav met live klok en bereikbaarheid New
Navigation with the branch's local time and a status that thinks along: "Reachable now, until 17:30", "closes at 17:30" in the last half hour, or "Closed, back tomorrow from 8:00". The call button becomes a message button outside opening hours. Uses Intl.DateTimeFormat in Europe/Amsterdam. Simulation buttons show every state.
[ Simuleer een moment ]
Open ma t/m vr 8:00 tot 17:30, za 9:00 tot 13:00. Tijd volgt Europe/Amsterdam.
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.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Nav met live klok en bereikbaarheid · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lkb"><div class="lkb__nav" role="banner">
<a class="lkb__logo" href="#">Kuipers<span>installatie · Deventer</span></a>
<nav class="lkb__links" aria-label="Hoofdmenu"><a href="#">Diensten</a><a href="#">Storing</a><a href="#">Over ons</a></nav>
<div class="lkb__live"><span class="lkb__tijd"><span class="lkb__plaats">Deventer</span><time class="lkb__klok">··<i>:</i>··</time></span><span class="lkb__st" role="status" aria-live="polite"><i class="lkb__dot"></i><span class="lkb__txt">Bereikbaarheid laden</span></span></div>
<a class="lkb__cta" href="tel:0570123456">Bel 0570 123 456</a>
</div>
<div class="lkb__body"><p class="lkb__k">[ Simuleer een moment ]</p>
<div class="lkb__sim" role="group" aria-label="Simuleer tijdstip"><button type="button" data-t="live" aria-pressed="true">Nu</button><button type="button" data-t="2,615" aria-pressed="false">di 10:15</button><button type="button" data-t="5,1030" aria-pressed="false">vr 17:10</button><button type="button" data-t="6,900" aria-pressed="false">za 15:00</button><button type="button" data-t="0,1300" aria-pressed="false">zo 21:40</button></div>
<p class="lkb__uitleg">Open ma t/m vr 8:00 tot 17:30, za 9:00 tot 13:00. Tijd volgt Europe/Amsterdam.</p></div></div>
</div>/* Nav met live klok en bereikbaarheid · NedDev · eigen werk. */
.lkb{position:absolute;inset:0;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;container-type:inline-size}
.lkb__nav{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border-bottom:1px solid rgba(10,10,10,.1)}
.lkb__logo{display:flex;flex-direction:column;font:800 14px/1 'Switzer',sans-serif;letter-spacing:-.02em;color:#0a0a0a;text-decoration:none}
.lkb__logo span{font:500 9px/1.4 'JetBrains Mono',monospace;letter-spacing:.04em;color:#666}
.lkb__links{display:flex;gap:12px}
.lkb__links a{font:500 12px 'Switzer',sans-serif;color:#0a0a0a;text-decoration:none;transition:color .18s}
.lkb__links a:hover{color:#b8330a}
.lkb__live{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0}
.lkb__tijd{font:500 10px/1 'JetBrains Mono',monospace;color:#555;display:flex;gap:5px;font-variant-numeric:tabular-nums}
.lkb__klok{color:#0a0a0a;font-weight:700}
.lkb__klok i{font-style:normal;animation:lkb-knip 1s steps(1) infinite}
@keyframes lkb-knip{50%{opacity:0}}
.lkb__st{display:inline-flex;align-items:center;gap:6px;font:600 11px/1.2 'Switzer',sans-serif;white-space:nowrap}
.lkb__dot{width:7px;height:7px;border-radius:50%;background:#9a9a9a;flex:none}
.lkb.is-open .lkb__dot{background:#1f8a4c;box-shadow:0 0 0 3px rgba(31,138,76,.18)}
.lkb.is-bijna .lkb__dot{background:#e07b00;box-shadow:0 0 0 3px rgba(224,123,0,.2)}
.lkb.is-dicht .lkb__txt{color:#555}
.lkb__cta{flex:none;font:700 12px/1 'Switzer',sans-serif;padding:9px 12px;border-radius:4px;background:#F5480F;color:#fff;text-decoration:none;transition:background .18s}
.lkb__cta:hover{background:#c93a0b}
.lkb.is-dicht .lkb__cta{background:#0a0a0a}
.lkb.is-dicht .lkb__cta:hover{background:#333}
.lkb a:focus-visible,.lkb button:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.lkb__body{padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.lkb__k{margin:0;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#666}
.lkb__sim{display:flex;flex-wrap:wrap;gap:5px}
.lkb__sim button{font:600 11px/1 'JetBrains Mono',monospace;padding:7px 9px;border-radius:3px;border:1px solid rgba(10,10,10,.25);background:#fff;color:#0a0a0a;cursor:pointer;transition:border-color .18s,background .18s}
.lkb__sim button:hover{border-color:#0a0a0a}
.lkb__sim button[aria-pressed="true"]{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.lkb__uitleg{margin:0;font-size:11.5px;line-height:1.45;color:#3d3d3d}
@container (max-width:480px){.lkb__links{display:none}.lkb__nav{flex-wrap:wrap;gap:8px 10px}.lkb__cta{padding:8px 10px;font-size:11px;margin-left:auto}.lkb__live{order:3;width:100%;flex-direction:row;justify-content:space-between;align-items:center;margin:0;padding-top:8px;border-top:1px solid rgba(10,10,10,.08)}}
@media (prefers-reduced-motion: reduce){.lkb__klok i{animation:none}}// Nav met live klok en bereikbaarheid · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.lkb')||root;
var klok=root.querySelector('.lkb__klok'),txt=root.querySelector('.lkb__txt'),cta=root.querySelector('.lkb__cta'),btns=[].slice.call(root.querySelectorAll('.lkb__sim button'));
var UREN={0:null,1:[480,1050],2:[480,1050],3:[480,1050],4:[480,1050],5:[480,1050],6:[540,780]};
var DAG=['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'],WD={Sun:0,Mon:1,Tue:2,Wed:3,Thu:4,Fri:5,Sat:6};
var fmt;try{fmt=new Intl.DateTimeFormat('en-US',{timeZone:'Europe/Amsterdam',weekday:'short',hour:'2-digit',minute:'2-digit',hourCycle:'h23'});}catch(e){fmt=null;}
var sim=null;
function nu(){if(sim)return sim;var d=new Date();if(!fmt)return {dag:d.getDay(),min:d.getHours()*60+d.getMinutes()};var p={};fmt.formatToParts(d).forEach(function(x){p[x.type]=x.value;});return {dag:WD[p.weekday],min:(+p.hour%24)*60+(+p.minute)};}
function hm(m){return Math.floor(m/60)+':'+('0'+m%60).slice(-2);}
function upd(){var t=nu(),u=UREN[t.dag],s,staat;
klok.innerHTML=('0'+Math.floor(t.min/60)).slice(-2)+'<i>:</i>'+('0'+t.min%60).slice(-2);
if(u&&t.min>=u[0]&&t.min<u[1]){staat=(u[1]-t.min<=30)?'bijna':'open';s=staat==='bijna'?'Nu bereikbaar · sluit om '+hm(u[1]):'Nu bereikbaar · tot '+hm(u[1]);}
else{staat='dicht';if(u&&t.min<u[0])s='Gesloten · vandaag vanaf '+hm(u[0]);else{for(var d=1;d<=7;d++){var nd=(t.dag+d)%7;if(UREN[nd]){s='Gesloten · '+(d===1?'morgen':DAG[nd])+' weer vanaf '+hm(UREN[nd][0]);break;}}}}
root.classList.toggle('is-open',staat==='open');root.classList.toggle('is-bijna',staat==='bijna');root.classList.toggle('is-dicht',staat==='dicht');
if(txt.textContent!==s)txt.textContent=s;
if(staat==='dicht'){cta.textContent='Stuur een bericht';cta.href='mailto:info@voorbeeld.nl';}else{cta.textContent='Bel 0570 123 456';cta.href='tel:0570123456';}}
btns.forEach(function(b){b.addEventListener('click',function(){btns.forEach(function(x){x.setAttribute('aria-pressed',x===b?'true':'false');});var v=b.getAttribute('data-t');
if(v==='live')sim=null;else{var a=v.split(',');sim={dag:+a[0],min:+a[1]};}upd();});});
upd();setInterval(upd,15000);
}
init(document.querySelector('.jouw-container'));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 →