HTML biedt een eigen manier om een keuzevak te maken dat het selecteren van meerdere items ondersteunt met het kenmerk meerkeuze op select-elementen, maar de rendering hiervan is niet erg compact of mooi, en er is ook niet veel dat je kunt doen aan de styling van opties in een keuzevak. Ik kon geen aangepaste ontwerpen vinden die pasten bij de stijl die ik zocht, dus heb ik uiteindelijk mijn eigen ontwerp gemaakt. De volledige code is hier beschikbaar op mijn GitHub, samen met een bijpassende zoekbalk.
Dit is vanaf nul opgebouwd vanwege problemen met het veranderen van het gedrag en de stijl van een normale selectie. Het normaal zichtbare deel van de select is een eenvoudige knop. Het dropdown menu is een div verborgen door de Bootstrap utility class d-none, met afronding en schaduw toegepast via de Bootstrap utility classes shadow en rounded. De opties zijn eenvoudige checkboxes met labels. Deze kunnen worden vervangen door radiobuttons als je een bijpassende single select box wilt.
Hier ziet u de uiteindelijke HTML voor de knop en het menu
<div> <button onclick="dropDown(event);" class="menu-btn" type="button"> Menu 1 ⌵ </button> <div class="d-none shadow rounded menu"> <span class="d-block menu-option"><label><input type="checkbox"> Option 1</label></span> <span class="d-block menu-option"><label><input type="checkbox"> Option 2</label></span> <span class="d-block menu-option"><label><input type="checkbox"> Option 3</label></span> </div></div>Ik wilde dat de menuknop rond en vrij klein zou zijn, dus heb ik hem dienovereenkomstig gestyled (u kunt natuurlijk stylen zoals u wilt, het heeft geen enkele invloed op de functie):
.menu-btn { border-radius: 48px; border: 0.5px solid lightgrey; font-size: 0.9em; padding: 2px 10px; background-color: white;}Voor het menu zelf heb ik een beetje padding toegevoegd zodat de tekst niet tegen de bovenkant van het menu aan kwam te staan en wat marge zodat het niet overlapte met de knop (beide geheel optioneel). Ik heb ook een hoge z-index toegevoegd (zodat het boven andere dingen wordt weergegeven), een achtergrondkleur (standaard is dit transparant, wat er in deze context stom uitziet), en de positie op absoluut gezet zodat het andere dingen niet naar beneden duwt.
.menu { padding-top: 10px; z-index: 200; margin-top: 4px; background-color: white; position: absolute;}Voor de menu-opties heb ik een beetje padding toegevoegd om ze van elkaar te scheiden.
.menu-option { padding: 6px 20px 6px;}We hebben een manier nodig om te detecteren wanneer er buiten het dropdown menu wordt geklikt, zodat het kan worden afgesloten door erbuiten te klikken zoals een normale select box. Ik heb dit gedaan door een div te maken die het hele scherm bedekt met een lagere z-index dan het menu. Hierdoor kunnen we alle klikken buiten het menu detecteren
<div class="d-none" onclick="hide(event)"></div>#overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100;}Om dit daadwerkelijk te laten werken, hebben we JavaScript-functies nodig om de menu’s en de overlay te laten verschijnen en verdwijnen.
Deze functie verwijdert de klassen d-none van het menu en de overlay, waardoor ze worden geactiveerd. In plaats van dit via ID af te handelen, neemt het eenvoudig het tweede element van de parent van het doel (knop) en neemt aan dat dat het menu is. Dit is de reden dat het menu en de knop in een verder lege div zijn gewikkeld.
function dropDown(event) { event.target.parentElement.children.classList.remove("d-none"); document.getElementById("overlay").classList.remove("d-none");}Deze functie voegt de klasse d-none toe aan de overlay en alle elementen met de klasse menu, waardoor ze worden verborgen.
function hide(event) { var items = document.getElementsByClassName('menu'); for (let i = 0; i < items.length; i++) { items.classList.add("d-none"); } document.getElementById("overlay").classList.add("d-none");}Als u dit nuttig vond, vindt u misschien ook mijn bijpassende zoekbalkontwerp interessant.