HTML oferă o modalitate nativă de a crea o casetă de selectare care acceptă selectarea mai multor elemente cu atributul multiple pe elementele de selectare, dar redarea acesteia nu este foarte compactă sau frumoasă și nici nu se pot face prea multe lucruri în materie de stilizare cu opțiunile dintr-o casetă de selectare. Nu am putut găsi niciun design personalizat care să se potrivească stilului pe care îl căutam, așa că am sfârșit prin a-mi crea unul propriu. Codul complet este disponibil pe GitHub-ul meu aici, împreună cu o bară de căutare corespunzătoare.
Aceasta este construită de la zero din cauza dificultăților de a schimba comportamentul și stilul unui select normal. Partea vizibilă în mod normal a selectului este un simplu buton. Meniul derulant este un div ascuns de clasa de utilitate Bootstrap d-none, cu rotunjire și umbrire aplicate prin intermediul claselor de utilitate Bootstrap shadow și rounded. Opțiunile sunt simple casete de selectare cu etichete. Acestea ar putea fi înlocuite cu butoane radio dacă ați dori o singură casetă de selecție corespunzătoare.
Iată HTML-ul final pentru buton și meniu
<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>Am vrut ca butonul de meniu să fie rotunjit și destul de mic, așa că l-am stilizat în consecință (desigur, puteți stiliza în orice mod doriți, nu afectează deloc funcția):
.menu-btn { border-radius: 48px; border: 0.5px solid lightgrey; font-size: 0.9em; padding: 2px 10px; background-color: white;}Pentru meniul propriu-zis, am adăugat puțină umplutură pentru ca textul să nu se lovească de partea de sus a meniului și puțină marjă pentru a nu se suprapune cu butonul (ambele complet opționale). Am adăugat, de asemenea, un indice z ridicat (astfel încât să se afișeze peste alte lucruri), o culoare de fundal (implicit este transparent, ceea ce pare stupid în acest context) și am setat poziția la absolut, astfel încât să nu împingă alte lucruri în josul paginii.
.menu { padding-top: 10px; z-index: 200; margin-top: 4px; background-color: white; position: absolute;}Pentru opțiunile de meniu, am adăugat un pic de umplutură pentru a le separa.
.menu-option { padding: 6px 20px 6px;}Avem nevoie de o modalitate de a detecta când se face clic în afara meniului derulant, astfel încât acesta să poată fi respins prin clic în afara lui, ca o casetă de selecție normală. Am făcut acest lucru creând un div care acoperă tot ecranul cu un z-index mai mic decât meniul. Acest lucru ne permite să detectăm toate clicurile în afara meniului
<div class="d-none" onclick="hide(event)"></div>#overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100;}Pentru ca acest lucru să funcționeze efectiv, avem nevoie de funcții JavaScript pentru a face meniurile și suprapunerea să apară și să dispară.
Această funcție elimină clasele d-none din meniu și suprapunere, activându-le. În loc să gestioneze acest lucru prin intermediul ID-ului, pur și simplu ia al doilea element al părintelui țintei (al butonului) și presupune că acesta este meniul. Acesta este motivul pentru care meniul și butonul sunt înglobate într-un div altfel gol.
function dropDown(event) { event.target.parentElement.children.classList.remove("d-none"); document.getElementById("overlay").classList.remove("d-none");}Această funcție adaugă clasa d-none la suprapunere și la toate elementele cu clasa menu, ascunzându-le.
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");}Dacă ți s-a părut util, s-ar putea să-ți placă și designul barei de căutare corespunzătoare.