Menu met Meer-knop (priority+) New
Priority+ navigation: as many menu items as fit stay in the bar, the rest moves into a dropdown behind "More" with the count shown. The order stays the same, so the most important links come first. A ResizeObserver measures the real width; with the slider you see items move one by one. The More menu works with arrows and Esc. Better than a hamburger on tablets and narrow laptops, because the key choices stay visible.
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.
<!-- Menu met Meer-knop (priority+) · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="mmp">
<label class="mmp__ctl"><span>Schermbreedte</span><input class="mmp__range" type="range" min="60" max="100" value="100" aria-valuetext="100 procent"></label>
<div class="mmp__frame">
<header class="mmp__bar">
<a class="mmp__logo" href="#mmp">Fysio Oost</a>
<nav class="mmp__nav" aria-label="Hoofdmenu">
<ul class="mmp__list">
<li><a href="#mmp-1">Afspraak</a></li>
<li><a href="#mmp-2">Behandelingen</a></li>
<li><a href="#mmp-3">Tarieven</a></li>
<li><a href="#mmp-4">Team</a></li>
<li><a href="#mmp-5">Locaties</a></li>
<li><a href="#mmp-6">Vacatures</a></li>
<li><a href="#mmp-7">Contact</a></li>
</ul>
<div class="mmp__more" hidden>
<button class="mmp__btn" type="button" aria-expanded="false" aria-controls="mmp-drop"><span class="mmp__bl">Meer</span><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
<ul class="mmp__drop" id="mmp-drop" hidden></ul>
</div>
</nav>
</header>
<p class="mmp__note"></p>
</div>
</div>
</div>/* Menu met Meer-knop (priority+) · NedDev · eigen werk. */
.mmp{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;overflow:hidden}
.mmp *,.mmp *::before,.mmp *::after{box-sizing:border-box}
.mmp__ctl{display:flex;align-items:center;gap:10px;font:500 13px/1 'Switzer',sans-serif;color:#3a3733}
.mmp__range{flex:1;max-width:220px;height:24px;margin:0;accent-color:#F5480F;cursor:pointer}
.mmp__range:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.mmp__frame{position:relative;width:100%;min-width:min(230px,100%);flex:1;min-height:0;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px}
.mmp__bar{display:flex;align-items:center;gap:12px;height:50px;padding:0 10px 0 14px;border-bottom:1px solid rgba(10,10,10,.08)}
.mmp__logo{flex:none;font:700 15px/1 'Switzer',sans-serif;color:#0a0a0a;text-decoration:none;white-space:nowrap;padding:5px 0}
.mmp__nav{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end}
.mmp__list{display:flex;margin:0;padding:0;list-style:none;overflow:hidden;min-width:0}
.mmp__list li{flex:none}
.mmp__list li[hidden]{display:none}
.mmp__list a{display:flex;align-items:center;min-height:30px;padding:0 8px;border-radius:4px;color:#3a3733;text-decoration:none;font:500 13px/1 'Switzer',sans-serif;white-space:nowrap}
.mmp__list a:hover{background:#f4f3f1;color:#0a0a0a}
.mmp a:focus-visible,.mmp__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.mmp__list li.is-new{animation:mmpBack .3s ease}
@keyframes mmpBack{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mmp__more{position:relative;flex:none}
.mmp__more[hidden]{display:none}
.mmp__btn{display:flex;align-items:center;gap:4px;min-height:30px;margin:0;padding:0 9px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:600 13px/1 'Switzer',sans-serif;cursor:pointer;white-space:nowrap}
.mmp__btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.mmp__btn[aria-expanded="true"]{background:#0a0a0a;color:#fff}
.mmp__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mmp__drop{position:absolute;right:0;top:calc(100% + 6px);z-index:3;min-width:160px;max-height:150px;overflow:auto;margin:0;padding:4px;list-style:none;background:#fff;border:1px solid rgba(10,10,10,.14);border-radius:8px;box-shadow:0 14px 30px -12px rgba(10,10,10,.35);animation:mmpIn .14s ease-out}
.mmp__drop[hidden]{display:none}
@keyframes mmpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mmp__drop a{display:flex;align-items:center;min-height:30px;padding:4px 10px;border-radius:4px;color:#0a0a0a;text-decoration:none;font:400 14px/1.1 'Switzer',sans-serif}
.mmp__drop a:hover,.mmp__drop a:focus{background:#f4f3f1;outline:none}
.mmp__drop a:focus-visible{box-shadow:inset 0 0 0 2px #F5480F}
.mmp__note{margin:0;padding:12px 14px;font:400 13px/1.4 'Switzer',sans-serif;color:#57534e}
@media (prefers-reduced-motion:reduce){.mmp__list li.is-new,.mmp__drop{animation:none}.mmp__btn svg{transition:none}}// Menu met Meer-knop (priority+) · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.mmp');if(!w)return;
var frame=w.querySelector('.mmp__frame'),nav=w.querySelector('.mmp__nav'),items=[].slice.call(w.querySelectorAll('.mmp__list li')),moreW=w.querySelector('.mmp__more'),btn=w.querySelector('.mmp__btn'),bl=w.querySelector('.mmp__bl'),drop=w.querySelector('.mmp__drop'),note=w.querySelector('.mmp__note'),range=w.querySelector('.mmp__range');
var widths=[],moreWidth=0,lastN=-1;
function measure(){items.forEach(function(li){li.hidden=false;});moreW.hidden=false;bl.textContent='Meer (7)';widths=items.map(function(li){return li.getBoundingClientRect().width;});moreWidth=moreW.getBoundingClientRect().width+6;}
function closeD(back){if(drop.hidden)return;drop.hidden=true;btn.setAttribute('aria-expanded','false');if(back)btn.focus();}
function layout(){if(!widths.length||!widths[0])measure();var room=nav.clientWidth,total=widths.reduce(function(a,b){return a+b;},0),n=items.length;
if(total>room){var used=moreWidth;n=0;while(n<items.length&&used+widths[n]<=room){used+=widths[n];n++;}}
if(n===lastN)return;var grew=n>lastN&&lastN>=0;
items.forEach(function(li,i){var hid=i>=n;if(!hid&&li.hidden&&grew)li.classList.add('is-new');else li.classList.remove('is-new');li.hidden=hid;});
var rest=items.slice(n);moreW.hidden=!rest.length;bl.textContent='Meer ('+rest.length+')';btn.setAttribute('aria-label','Meer menu-items, '+rest.length+' verborgen');
var was=!drop.hidden;drop.innerHTML=rest.map(function(li){return li.outerHTML.replace(' hidden=""','').replace(' class="is-new"','');}).join('');if(!rest.length)closeD(false);else if(was)drop.hidden=false;
note.textContent=n===items.length?'Alle 7 menu-items passen in de balk.':n+' van de 7 items '+(n===1?'staat':'staan')+' in de balk, '+rest.length+' achter Meer.';lastN=n;}
measure();lastN=-1;layout();
if(document.fonts&&document.fonts.ready)document.fonts.ready.then(function(){measure();lastN=-1;layout();});
if('ResizeObserver' in window)new ResizeObserver(function(){layout();}).observe(nav);
range.addEventListener('input',function(){frame.style.width=range.value+'%';range.setAttribute('aria-valuetext',range.value+' procent');});
btn.addEventListener('click',function(){if(drop.hidden){drop.hidden=false;btn.setAttribute('aria-expanded','true');var room=w.getBoundingClientRect().bottom-drop.getBoundingClientRect().top-8;drop.style.maxHeight=Math.max(64,room)+'px';var a=drop.querySelector('a');if(a)a.focus();}else closeD(true);});
btn.addEventListener('keydown',function(e){if(e.key==='ArrowDown'&&drop.hidden){e.preventDefault();btn.click();}});
drop.addEventListener('keydown',function(e){var ls=[].slice.call(drop.querySelectorAll('a')),i=ls.indexOf(document.activeElement);if(e.key==='ArrowDown'){e.preventDefault();(ls[i+1]||ls[0]).focus();}else if(e.key==='ArrowUp'){e.preventDefault();(ls[i-1]||ls[ls.length-1]).focus();}else if(e.key==='Escape'){e.preventDefault();closeD(true);}else if(e.key==='Home'){e.preventDefault();ls[0].focus();}else if(e.key==='End'){e.preventDefault();ls[ls.length-1].focus();}});
drop.addEventListener('focusout',function(e){if(!moreW.contains(e.relatedTarget))closeD(false);});
w.addEventListener('click',function(e){var a=e.target.closest('a');if(!a)return;e.preventDefault();if(drop.contains(a))closeD(true);});
document.addEventListener('pointerdown',function(e){if(!drop.hidden&&!moreW.contains(e.target))closeD(false);});
}
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 →