HTML tarjoaa natiivin tavan luoda valintalaatikko, joka tukee useiden kohteiden valitsemista select-elementtien multiple-attribuutin avulla, mutta tämän renderöinti ei ole kovin kompakti tai kaunis, eikä valintalaatikon vaihtoehdoilla voi tehdä paljonkaan muotoilullisia muutoksia. En löytänyt mitään mukautettuja malleja, jotka olisivat sopineet etsimääni tyyliin, joten päädyin tekemään omani. Koko koodi on saatavilla GitHubissani täällä yhdessä sopivan hakupalkin kanssa.
Tämä on rakennettu tyhjästä johtuen vaikeuksista muuttaa tavallisen valintaruudun käyttäytymistä ja tyyliä. Selectin normaalisti näkyvä osa on yksinkertainen painike. Pudotusvalikko on div, joka on piilotettu Bootstrapin apuohjelmaluokan d-none avulla, ja pyöristystä ja varjostusta sovelletaan Bootstrapin apuohjelmaluokkien shadow ja rounded avulla. Vaihtoehdot ovat yksinkertaisia valintaruutuja, joissa on tarrat. Nämä voitaisiin korvata valintapainikkeilla, jos haluttaisiin sopiva yksittäinen valintaruutu.
Tässä on painikkeen ja valikon lopullinen HTML
<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>Halusin valikkopainikkeen olevan pyöristetty ja melko pieni, joten tyylittelin sen sen mukaisesti (voit tietysti tyylitellä haluamallasi tavalla, sillä se ei vaikuta toimintaan lainkaan):
.menu-btn { border-radius: 48px; border: 0.5px solid lightgrey; font-size: 0.9em; padding: 2px 10px; background-color: white;}Itse valikkoon lisäsin hieman pehmustetta, jotta teksti ei törmäisi valikon yläreunaan, ja hieman marginaalia, jotta se ei menisi päällekkäin painikkeen kanssa (molemmat täysin vapaaehtoisia). Lisäsin myös korkean z-indeksin (jotta se näkyisi muiden asioiden yläpuolella), taustavärin (oletusarvo on läpinäkyvä, mikä näyttää typerältä tässä yhteydessä) ja asetin position absoluuttiseksi, jotta se ei työnnä muita asioita alaspäin sivulla.
.menu { padding-top: 10px; z-index: 200; margin-top: 4px; background-color: white; position: absolute;}Valikon vaihtoehtoihin lisäsin hieman pehmusteita erottamaan ne.
.menu-option { padding: 6px 20px 6px;}Tarvitsemme tavan havaita, kun klikkauksia tehdään pudotusvalikon ulkopuolella, jotta se voidaan hylätä klikkaamalla sen ulkopuolella kuten normaali valintaruutu. Olen tehnyt tämän luomalla div:n, joka kattaa koko näytön ja jolla on pienempi z-indeksi kuin valikolla. Näin voimme havaita kaikki klikkaukset valikon ulkopuolella
<div class="d-none" onclick="hide(event)"></div>#overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100;}Tämän todellisen toiminnan aikaansaamiseksi tarvitsemme JavaScripttoimintoja, joilla saamme valikot ja päällekkäisvalikoiman näkymään ja katoamaan.
Tämä funktio poistaa d-none-luokat valikosta ja overlaysta, jolloin ne aktivoituvat. Sen sijaan, että tätä käsiteltäisiin ID:n kautta, se ottaa yksinkertaisesti kohteen (painikkeen) vanhemman elementin toisen elementin ja olettaa, että se on valikko. Tästä syystä valikko ja painike on kiedottu muuten tyhjään div:iin.
function dropDown(event) { event.target.parentElement.children.classList.remove("d-none"); document.getElementById("overlay").classList.remove("d-none");}Tämä funktio lisää d-none-luokan päällekkäiskuvaan ja kaikkiin elementteihin, joilla on luokka menu, piilottaen ne.
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");}Jos löysit tämän käyttökelpoiseksi, saatat tykätä myös vastaavasta hakupalkin suunnittelustani.