A HTML biztosít egy natív módot egy olyan kiválasztódoboz létrehozására, amely támogatja több elem kiválasztását a többszörös attribútummal a select elemeken, de ennek megjelenítése nem igazán kompakt vagy szép, és nem sok mindent lehet tenni a kiválasztódobozban lévő opciókkal. Nem találtam olyan egyéni terveket, amelyek illeszkedtek volna az általam keresett stílushoz, így végül sajátot készítettem. A teljes kód elérhető a GitHubomon itt, a megfelelő keresősávval együtt.
Ez a semmiből épült, mivel nehézséget okozott a normál kiválasztás viselkedésének és stílusának megváltoztatása. A select normálisan látható része egy egyszerű gomb. A legördülő menü egy div, amelyet a Bootstrap d-none segédosztálya rejt el, lekerekítéssel és árnyékolással, amelyet a Bootstrap shadow és rounded segédosztályain keresztül alkalmazunk. Az opciók egyszerű jelölőnégyzetek címkékkel. Ezek helyettesíthetők rádiógombokkal, ha egy megfelelő egyetlen kiválasztó mezőt szeretnénk.
Itt a végleges HTML a gombhoz és a menühöz
<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>A menügombot lekerekítettnek és elég kicsinek akartam, ezért ennek megfelelően stilizáltam (természetesen úgy stilizálhatod, ahogy akarod, egyáltalán nem befolyásolja a funkciót):
.menu-btn { border-radius: 48px; border: 0.5px solid lightgrey; font-size: 0.9em; padding: 2px 10px; background-color: white;}Magához a menühöz egy kis paddingot adtam, hogy a szöveg ne futjon össze a menü tetejével, és némi margót, hogy ne fedje át a gombot (mindkettő teljesen opcionális). Hozzáadtam egy magas z-indexet is (hogy más dolgok fölött jelenjen meg), egy háttérszínt (az alapértelmezett átlátszó, ami ebben a kontextusban bután néz ki), és abszolút pozíciót állítottam be, hogy ne nyomjon lefelé más dolgokat az oldalon.
.menu { padding-top: 10px; z-index: 200; margin-top: 4px; background-color: white; position: absolute;}A menüpontokhoz egy kis kitöltést adtam, hogy elkülönítsem őket.
.menu-option { padding: 6px 20px 6px;}Szükségünk van egy olyan módra, amely érzékeli, ha a legördülő menüben kívülre kattintunk, hogy a menüt el lehessen utasítani a rajta kívülre kattintással, mint egy normál kiválasztó dobozt. Ezt úgy valósítottam meg, hogy létrehoztam egy div-et, amely az egész képernyőt lefedi, és alacsonyabb z-indexszel rendelkezik, mint a menü. Ez lehetővé teszi, hogy a menün kívül minden kattintást észleljünk
<div class="d-none" onclick="hide(event)"></div>#overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100;} Ahhoz, hogy ez valóban működjön, szükségünk van JavaScript függvényekre, hogy a menük és az overlay megjelenjenek és eltűnjenek.
Ez a függvény eltávolítja a d-none osztályokat a menüből és az overlayből, aktiválva azokat. Ahelyett, hogy ezt az ID-n keresztül kezelné, egyszerűen a cél (gomb) szülőjének második elemét veszi, és feltételezi, hogy az a menü. Ez az oka annak, hogy a menü és a gomb egy egyébként üres div-be van csomagolva.
function dropDown(event) { event.target.parentElement.children.classList.remove("d-none"); document.getElementById("overlay").classList.remove("d-none");}Ez a funkció a d-none osztályt hozzáadja az overlayhez és az összes menu osztályú elemhez, elrejtve azokat.
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");}Ha ezt hasznosnak találta, akkor talán tetszeni fog a hozzáillő keresősáv-designom is.