La creazione di un componente a discesa di selezione personalizzato è uno dei requisiti più comuni nello sviluppo web. Il menu a discesa Seleziona consente all’utente di scegliere un valore da un elenco predefinito. Forse ti starai chiedendo:

“Perché devo creare un componente a discesa di selezione personalizzato, se esiste già un tag di selezione HTML? Posso applicare uno stile CSS e basta!”

Sfortunatamente, il menu a discesa di selezione dello stile non è così semplice. L’elemento di selezione HTML nativo non ci consente di applicare i tag delle opzioni di stile.

Oggigiorno, i menu a discesa di selezione vengono visualizzati in molte varianti differenti. Puoi trovare varie librerie javascript e framework css , che hanno una propria implementazione per menu a discesa di selezione personalizzati. Hanno una comprovata funzionalità cross-browser e sono altamente affidabili. Molte volte, non è necessario utilizzare librerie o framework, perché in molti casi creare un menu a discesa di selezione personalizzato è un compito facile attività.

In questo post del blog, voglio condividere con te, come puoi creare un menu a discesa di selezione funzionale senza utilizzare librerie e framework. Puoi applicare lo stile per selezionare le opzioni e aggiungere componenti personalizzati.

Prima di iniziare a creare un menu a discesa di selezione personalizzato, dovresti chiedere al file seguenti domande:

Il menu a discesa di selezione avrà centinaia o migliaia di opzioni?

Gli utenti possono selezionare più opzioni?

In entrambi i casi, sarà necessario utilizzare un libreria di terze parti, perché la propria implementazione può richiedere molto tempo. Se hai bisogno di un menu a discesa con centinaia di opzioni, dovresti fornire agli utenti una funzione di ricerca. Se il menu a discesa ha migliaia di opzioni, dovresti utilizzare la tecnica “windowing”. Per ulteriori informazioni, controlla il menu a discesa Selezione avanzata.

Esempio di menu a discesa di selezione personalizzato

Qui puoi vedere l’elemento di selezione predefinito, che può avere un aspetto leggermente diverso a seconda del browser che stai utilizzando.

In questo tutorial, trasformeremo l’elemento di selezione predefinito in questo:

HTML

Tradizionalmente, quando devi creare un menu a discesa di selezione personalizzato, dovresti usa la seguente struttura.

Dato che non possiamo usare il tag select, abbiamo più opzioni per scegliere la struttura html . Possiamo utilizzare elementi ul e li o div con span. Optiamo per la struttura div e span.

Il CSS

È una buona idea inizia con un ripristino CSS, che riduce le incongruenze del browser. Ho optato per il ripristino css di Eric Meyer:

Fonte: https://meyerweb.com/eric/tools/css/reset/

Preferisco utilizzando il box-model dove larghezza = larghezza elemento + padding + bordi.

Per prima cosa, abbiamo aggiunto uno stile di base per gli elementi html. <div class=”custom-select”> la posizione è relativa, perché dobbiamo applicare il posizionamento assoluto per l’elenco a discesa.

Il CSS successivo viene utilizzato per la freccia a discesa.

Puoi vedere la transizione e la trasformazione delle proprietà CSS3. La transizione viene utilizzata per la dissolvenza in entrata e in uscita nell’elenco a discesa. Transform viene utilizzato per animare la freccia, la cui direzione rappresenta lo stato dell’elenco a discesa.

JavaScript

Non è necessario utilizzare librerie di terze parti per la manipolazione dom. Per un semplice menu a discesa, sono necessari solo eventi javascript di base.

Abbiamo aggiunto la funzione clic al wrapper. La funzione clic alterna la classe .open, che rappresenta se l’elenco delle opzioni è aperto o chiuso. All’interno della funzione clic stiamo cercando <div class=”custom-select”> tramite this.querySelector(".custom-select"). This all’interno della funzione clic rappresenta l’elemento su cui si è fatto clic. Non stiamo interrogando l’intero documento da document.querySelector(".custom-select") nel caso in cui abbiamo più menu a discesa all’interno di DOM.

Nello snippet javascript sopra, stiamo iterando su tutte le opzioni e aggiungendo clic funzione, che modifica l’opzione selezionata aggiungendo la classe .selected. Ancora una volta, all’interno della funzione clic stiamo interrogando all’interno dell’opzione cliccata (this nello snippet), nel caso in cui desideriamo modificare i gestori di eventi per supportare più menu a discesa su una pagina.

L’ultimo snippet è facoltativo e consente la chiusura dell’elenco a discesa, se l’utente fa clic fuori dall’elenco a discesa.

Più menu a discesa di selezione su una pagina

Se si desidera utilizzare più menu a discesa di selezione su uno pagina, dobbiamo allegare un listener di clic a tutti gli elementi .custom-select-wrapper e chiudere tutti i menu a discesa se l’utente fa clic su un elenco a discesa.

Selezione avanzata menu a discesa

Se è necessario un menu a discesa di selezione con centinaia di opzioni o selezione multipla, è possibile controllare alcune delle librerie disponibili. In questo articolo puoi vedere alcuni confronti tra le librerie più popolari.

Nel caso in cui hai bisogno di gestire migliaia di opzioni, non puoi rendere un DOM con migliaia di elementi di opzione.Se non puoi utilizzare alcun back-end, dovrai utilizzare la tecnica del “windowing”.

Cos’è la tecnica del “windowing”?

Piuttosto che riprodurre migliaia di elementi da un elenco in una volta, “windowing” o virtualizzazione si concentra sul rendering solo degli elementi visibili all’utente. Puoi controllare questo discorso di Brian David Vaughn sull’implementazione della tecnica di “windowing”, che è facile da implementare e può fornire enormi miglioramenti delle prestazioni.

Conclusione

Spero che questo post del blog ti aiuti a creare un componente a discesa di selezione personalizzato. In un primo momento, è necessario sapere se il menu a discesa di selezione contiene molte opzioni o se gli utenti possono selezionare più opzioni. Se hai bisogno di un componente di selezione di base, il post del blog descrive l’intera implementazione in HTML, CSS e JavaScript. Puoi controllare il codice sorgente su Github.