HTML fornisce un modo nativo per creare una select box che supporta la selezione di più elementi con l’attributo multiple sugli elementi select, ma il rendering di questo non è davvero molto compatto o carino, e non c’è molto che si possa fare nello stile con le opzioni in una select box. Non sono riuscito a trovare nessun design personalizzato che si adattasse allo stile che stavo cercando, così ho finito per crearne uno mio. Il codice completo è disponibile sul mio GitHub qui insieme ad una barra di ricerca corrispondente.
Questo è costruito da zero a causa delle difficoltà nel cambiare il comportamento e lo stile di una normale select. La parte normalmente visibile della select è un semplice pulsante. Il menu a discesa è un div nascosto dalla classe di utilità Bootstrap d-none, con arrotondamento e ombreggiatura applicati tramite le classi di utilità Bootstrap shadow e rounded. Le opzioni sono semplici caselle di controllo con etichette. Queste potrebbero essere sostituite da pulsanti radio se si volesse una casella di selezione singola corrispondente.
Ecco l’HTML finale per il pulsante e il 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>Volevo che il pulsante del menu fosse arrotondato e abbastanza piccolo, quindi l’ho stilizzato di conseguenza (puoi stilizzare come vuoi, ovviamente, non influisce affatto sulla funzione):
.menu-btn { border-radius: 48px; border: 0.5px solid lightgrey; font-size: 0.9em; padding: 2px 10px; background-color: white;}Per il menu stesso, ho aggiunto un po’ di imbottitura in modo che il testo non si sovrapponga alla parte superiore del menu e un po’ di margine in modo che non si sovrapponga al pulsante (entrambi completamente opzionali). Ho anche aggiunto un alto z-index (in modo che venga visualizzato sopra altre cose), un colore di sfondo (quello predefinito è trasparente che sembra stupido in questo contesto), e ho impostato la posizione su assoluto in modo che non spinga altre cose in basso nella pagina.
.menu { padding-top: 10px; z-index: 200; margin-top: 4px; background-color: white; position: absolute;}Per le opzioni del menu, ho aggiunto un po’ di imbottitura per separarle.
.menu-option { padding: 6px 20px 6px;}Abbiamo bisogno di un modo per rilevare quando i clic vengono fatti al di fuori del menu a discesa in modo che possa essere chiuso cliccando al di fuori di esso come una normale select box. Ho fatto questo creando un div che copre tutto lo schermo con uno z-index più basso del menu. Questo ci permette di rilevare tutti i clic al di fuori del menu
<div class="d-none" onclick="hide(event)"></div>#overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100;}Per far funzionare tutto questo, abbiamo bisogno di funzioni JavaScript per far apparire e scomparire i menu e la sovrapposizione.
Questa funzione rimuove le classi d-none dal menu e dall’overlay, attivandoli. Piuttosto che gestire questo tramite ID, prende semplicemente il secondo elemento del genitore del target (il pulsante) e assume che sia il menu. Questa è la ragione per cui il menu e il pulsante sono avvolti in un div altrimenti vuoto.
function dropDown(event) { event.target.parentElement.children.classList.remove("d-none"); document.getElementById("overlay").classList.remove("d-none");}Questa funzione aggiunge la classe d-none all’overlay e a tutti gli elementi con la classe menu, nascondendoli.
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");}Se hai trovato questo utile, potrebbe piacerti anche il mio design della barra di ricerca corrispondente.