Creiamo eleganti elenchi a discesa. Selezione da un elenco a discesa nell'elenco a discesa HTML sul css al passaggio del mouse

CSS

.wrapper-dropdown-5 {
/* Dimensioni e posizione */
posizione: parente;
larghezza: 200px;
margine: 0 auto;
imbottitura: 12px 15px;

/* Stili */
sfondo: #F F F;
raggio di confine : 5px;
scatola-ombra : 0 1px 0 RGBA (0 , 0 , 0 , 0.2 ) ;
cursore: puntatore;
contorno: nessuno;
transizione : tutti gli 0,3 si allentano ;
}

.wrapper-dropdown-5:Dopo{ /* Freccia piccola */
contenuto: "" ;
larghezza: 0 ;
altezza: 0 ;
posizione: assoluto;
superiore: 50% ;
Giusto: 15px;
margine superiore: -3px;
larghezza del bordo: 6px 6px 0 6px;
stile del bordo: solido;
colore del bordo: #4cbeff trasparente;
}

Questi sono gli stili principali. Passiamo ora all'elenco a discesa, che è un po' diverso dal solito.

.wrapper-dropdown-5 .cadere in picchiata {
/* Dimensioni e posizione */
posizione: assoluto;
superiore: 100% ;
Sinistra: 0 ;
Giusto: 0 ;

/* Stili */
sfondo: #F F F;
raggio di confine : 0 0 5px 5px;
confine: 1px solido RGBA (0 , 0 , 0 , 0.2 ) ;
bordo superiore: nessuno;
bordo-fondo: nessuno;
stile elenco: nessuno;
transizione : tutti gli 0,3 si allentano ;

/* Nascondersi */
altezza massima: 0 ;
traboccare: nascosto;
}

Questa volta non abbiamo cambiato l'opacità a 0 per nascondere il menu. Impostiamo max-height su 0 e overflow: hidden. Perché hai impostato l'altezza massima e non l'altezza? Perché non conosciamo l'altezza esatta dell'elenco espanso.

Stili semplici per gli elementi dell'elenco.

.wrapper-dropdown-5 .cadere in picchiata li {
imbottitura: 0 10px ;
}

.wrapper-dropdown-5 .cadere in picchiata li a {
Schermo: bloccare;
decorazione del testo: nessuno;
colore: #333 ;
imbottitura: 10px 0 ;
transizione : tutti gli 0,3 si allentano ;
bordo-fondo: 1px solido #e6e8ea;
}

.wrapper-dropdown-5 .cadere in picchiata li :ultimo del tipo UN {
confine: nessuno;
}

.wrapper-dropdown-5 .cadere in picchiata li io {
margine destro: 5px;
colore: ereditare;
allineamento verticale: mezzo;
}

/* Stato al passaggio del mouse */

.wrapper-dropdown-5 .cadere in picchiata li : passa il mouse UN {
colore: #57a9d9;
}

E ora, nello stato attivo:

/* Stato attivo */

.wrapper-dropdown-5.attivo {
raggio di confine : 5px 5px 0 0 ;
sfondo: #4cbeff;
scatola-ombra : nessuno;
bordo-fondo: nessuno;
colore: bianco;
}

.wrapper-dropdown-5.attivo:Dopo{
colore del bordo: #82d1ff trasparente;
}

.wrapper-dropdown-5.attivo .cadere in picchiata {
bordo-fondo: 1px solido RGBA (0 , 0 , 0 , 0.2 ) ;
altezza massima: 400px;
}

Quando il menu a discesa è aperto, cambiamo gli angoli inferiori del pulsante, il suo colore, la direzione della freccia e il colore della freccia e rimuoviamo l'ombra e i bordi.
E per mostrare il menu, impostiamo l'altezza massima del menu a discesa su 400px. Potremmo impostarlo su 500px o 1000px, non importa.

JavaScript

funzione Cadere in picchiata ( el ) {
Questo.gg = el ;
Questo.initEvents() ;
}
Cadere in picchiata. prototipo = {
initEvents : funzione() {
var ogg = Questo;

Ogg. gg.SU("clic", funzione( evento ) {
$(Questo) .toggleClass("attivo") ;
evento. stopPropagazione() ;
} ) ;
}
}

retrocompatibilità

Quindi ora abbiamo 5 menu a discesa che funzionano benissimo, ma per quanto riguarda i browser più vecchi?
Questi browser non comprendono, ad esempio, la proprietà dell'opacità.

La libreria Modernizr ci aiuterà in questo. Per dirla senza mezzi termini, per coloro che non lo sanno, Modernizr è una libreria JavaScript che espone le proprietà supportate da HTML5 e CSS3 al browser dell'utente.

Grazie a questo, possiamo "dire" al browser se non supporti *this* proprietà, quindi procedere come segue. Di seguito è riportato un esempio di come possiamo gestire lo stile per i browser che non supportano determinate proprietà CSS:

/* Nessun supporto CSS3 */

.no-opacità .wrapper-dropdown-1.cadere in picchiata ,
.no-pointerevents .wrapper-dropdown-1 .cadere in picchiata {
Schermo: nessuno;
opacità : 1 ; /* Se supporta l'opacità ma non supporta gli eventi puntatore */
eventi-puntatore : auto; /* Se gli eventi del puntatore supportano ma non supportano gli eventi del puntatore */
}

.no-opacità .wrapper-dropdown-1.attivo.cadere in picchiata ,
.no-pointerevents .wrapper-dropdown-1.attivo .cadere in picchiata {
Schermo: bloccare;
}

Se il browser non supporta l'opacità o gli eventi del puntatore, viene utilizzata la proprietà display: block;. E così via.

Conclusione.

Spero che questo articolo ti abbia aiutato a capire come creare menu a discesa personalizzati. Come puoi vedere, è abbastanza semplice.

Dimostrazione

In caso di domande, ti consigliamo di utilizzare il nostro forum per ricevere una risposta il più rapidamente possibile

È facile creare un semplice elenco a discesa in HTML utilizzando il tag select. Questo è un tag contenitore; i tag opzione sono nidificati al suo interno: sono quelli che definiscono gli elementi dell'elenco.

Esistono diverse opzioni per gli elenchi che possono essere creati utilizzando il tag di selezione: un elenco a discesa (le opzioni vengono visualizzate dopo aver fatto clic sul campo principale o passando il mouse sopra di esso) e un elenco a scelta multipla - in cui l'utente può selezionare diversi elementi. I primi sono più comuni e costituiscono un elemento significativo della navigazione dei siti moderni. Un elenco a discesa a selezione multipla può essere utilizzato, ad esempio, nei cataloghi in cui è necessario selezionare più caratteristiche di un prodotto.

Puoi modificare l'aspetto e le proprietà degli elenchi utilizzando attributi universali e speciali.

Seleziona gli attributi del tag

1. Multiplo: imposta la selezione multipla.

2. Dimensione: imposta il numero di linee visibili nell'elenco, ovvero l'altezza. E qui tutto dipende dalla presenza o meno dell'attributo multiplo. Se sì, e non si specifica la dimensione, se è presente multiplo, l'utente vedrà tutte le possibili opzioni di selezione, ma se multiplo è assente, verrà mostrata solo una riga e il visitatore sarà in grado di leggere il resto quando fa clic sull'icona dell'ascensore sul lato destro. Se la dimensione dell'altezza è specificata ed è inferiore al numero di opzioni, verrà visualizzata una barra di scorrimento sulla destra.

3. Nome: nome. L'elenco a discesa può farne a meno, ma potrebbe essere necessario interagire con il programma gestore sul server. Di norma, il nome è ancora indicato.

Il tag select non ha attributi obbligatori, a differenza del tag option.

Attributi dei tag di opzione nidificati

1. Selezionato: progettato per evidenziare una voce dell'elenco. L'utente potrà selezionare più di un elemento se è impostato l'attributo multiplo (vedi sopra).
2. Valore - valore. Questo attributo è obbligatorio. Il server web deve comprendere quali elementi dell'elenco ha selezionato l'utente.
3. Etichetta. Questo attributo può essere utilizzato per abbreviare gli elementi dell'elenco troppo lunghi. Ad esempio, sullo schermo verrà visualizzato "Milano" invece di "Milano è il centro amministrativo della Lombardia" specificato nel tag opzione. Nord Italia”. Questo attributo viene utilizzato anche per raggruppare elementi in un elenco.

Per quanto riguarda la larghezza dell'elenco, per impostazione predefinita è impostata sulla lunghezza del testo più largo nell'elenco. Naturalmente, la larghezza può essere modificata utilizzando gli stili HTML.

Elenco a discesa in altri modi

Può essere fatto usando i CSS, ad esempio, un elenco apparirà quando passi il mouse sopra un elemento della pagina. Ottime opzioni per la creazione di elenchi sono fornite da JavaScript, semplificato dalla libreria Jquery. Un elenco a discesa collegato utilizzando questa libreria può essere molto complesso, ad esempio a cascata. Cioè, quando selezioni un elemento in un elenco, viene visualizzato il seguente elenco, ad esempio, c'è una voce di menu "Abbigliamento da donna" (quando ci passi sopra, quindi quando selezioni uno dei tipi, ad esempio "Capispalla ”, scompare un elenco con elementi: giacche, parka, cappotti, cappotti corti, pellicce, ecc.

Abbiamo elencato superficialmente le principali modalità con cui è possibile creare un elenco a discesa. Naturalmente, ci sono molte sfumature in JavaScript che ti consentono di modificare la funzionalità e l'aspetto degli elenchi.

Spesso i principianti si trovano ad affrontare il problema della progettazione di un elenco a discesa. Proprio come con l'originale Selezionare non puoi fare niente di speciale. Poi viene in soccorso jQuery, e poi puoi fare quasi tutto.

E se ti dicessi che è possibile anche quello standard? HTML Non è male progettare un elenco a discesa in modo pulito CSS?

Elenco a discesa in HTML

Il colore dello sfondo e del testo può essere modificato e ciò avviene in modo molto semplice.

Sherlock Holmes Il grande Gatsby V per Vendetta Il lupo di Wall Street Quanto di conforto

IN arco abbiamo aggiunto 2 classi, una principale, che conterrà tutti gli stili principali” menu a discesa personalizzato“, e il secondo è grande, il che determinerà la dimensione menu `A tendina. Possiamo preparare diciamo 3 taglie in anticipo, grande, medio, piccolo, ambientato in stili dimensione del font. E non preoccuparti per il futuro. Puoi saltare questo, tutto dipende dal tuo design sul sito.

Corpo ( sfondo: #2a2a2b; colore: #fff; allineamento testo: centro; famiglia di caratteri: Arial, Helvetica; ) .big ( dimensione carattere: 1,2em; ) /* Menu a discesa personalizzato */ .custom-dropdown ( posizione : relativo; display: blocco in linea; allineamento verticale: centrale; margine: 10px; /* solo demo */ ) .selezione a discesa personalizzata (cursore: puntatore; colore di sfondo: #2980b9; colore: #fff; font- dimensione: eredita; riempimento: .5em; riempimento-destra: 2.5em; bordo: 0; margine: 0; raggio bordo: 3px; rientro testo: 0.01px; overflow testo: ""; -webkit-appearance: pulsante ; /* nascondi la freccia predefinita in Chrome OSX */ ) .custom-dropdown::before, .custom-dropdown::after ( contenuto: ""; posizione: assoluta; pointer-events: none; ) .custom-dropdown:: after ( /* Freccia menu a discesa personalizzata */ contenuto: "\25BC"; altezza: 1em; dimensione carattere: .625em; altezza riga: 1; destra: 1,2em; superiore: 50%; margine superiore: -.5em ; ) .custom-dropdown::before ( /* Copertura freccia menu a discesa personalizzata */ larghezza: 2em; destra: 0; superiore: 0; inferiore: 0; raggio bordo: 0 3px 3px 0; ) .custom-dropdown select ( colore: rgba(0,0,0,.3); ) .custom-dropdown select::after ( colore: rgba(0,0,0,.1); ) .custom-dropdown::prima ( background-color: rgba(0,0,0,.15); ) .custom-dropdown::after ( colore: rgba(0,0,0,.4); )

Se non vuoi preoccuparti di studiare gli stili, aggiungilo semplicemente al tuo sito e cambia il colore per adattarlo al design del tuo sito. Allora sei proprio in grande stile” .selezione menu a discesa personalizzato" è necessario modificare i valori colore di sfondo E colore