Cum se face o listă drop-down în HTML

Cea mai simplă listă drop-down în HTML este ușor de creat folosind eticheta selectare. Aceasta este o etichetă container, etichetele de opțiune sunt încorporate în ea - ele specifică elementele listate.

Există mai multe variante de liste care pot fi făcute utilizând eticheta select: o listă derulantă (variantele abandonează după ce au făcut clic pe câmpul principal sau arătându-l cu cursorul) și o listă cu mai multe opțiuni - în care utilizatorul poate selecta mai multe elemente. Primele sunt mai frecvente, ele reprezintă un element important al navigării pe site-urile moderne. O listă cu mai multe opțiuni poate fi aplicată, de exemplu, în directoare în care trebuie selectate mai multe caracteristici ale produsului.

Puteți modifica aspectul și proprietățile listelor utilizând atribute universale și speciale.

Atributele etichetei selectate

1. Multiple - stabilește alegerea multiplă.

2. Dimensiune - specifică numărul de linii vizibile din listă, adică înălțimea. Și atunci totul depinde de faptul dacă atributul este mai multe sau nu. Dacă da, și nu specificați mărimea, atunci dacă există multiple, utilizatorul va vedea toate opțiunile posibile, dar dacă mai multe sunt absente, va fi afișată o singură linie, iar restul vizitatorului va putea citi când apasă pictograma ascensorului din partea dreaptă. Dacă înălțimea dimensiunii este specificată și este mai mică decât numărul de opțiuni, o bară de defilare va apărea în partea dreaptă.

3. Numele este numele. O listă drop-down se poate face fără ea, dar poate fi necesar să interacționați cu un handler de pe server. Ca o regulă, numele indică încă.

Eticheta selectare nu are atribute obligatorii, spre deosebire de eticheta opțiunii.

Atribute ale etichetei de opțiune imbricate

1. Selectat - proiectat pentru a evidenția elementul listă. Utilizatorul poate selecta mai mult de un element dacă este specificat atributul multiplu (vezi mai sus).
2. Valoarea este valoarea. Acest atribut este necesar. Serverul web trebuie să înțeleagă elementele pe care le-a selectat utilizatorul.
3. Casa de discuri. Cu acest atribut, puteți scurta elementele listate care sunt prea lungi. De exemplu, ecranul va afișa "Milan", în locul opțiunii "Milano - centrul administrativ al Lombardiei" specificată în etichetă. Italia de Nord ". Acest atribut este, de asemenea, utilizat pentru gruparea elementelor din listă.

În ceea ce privește lățimea listei, aceasta este setată implicit în funcție de lungimea textului larg din listă. Desigur, lățimea poate fi modificată utilizând stiluri HTML.

Listă derulantă în alte moduri

Se poate face folosind CSS, de exemplu, lista va apărea atunci când plasați cursorul pe un element de pagină. Posibilități excelente de a crea liste este oferită de JavaScript, a cărui lucrare este simplificată de biblioteca Jquery. O listă drop-down conectată utilizând această bibliotecă poate fi foarte complexă, de exemplu, în cascadă. Atunci când selectați un element dintr-o listă, apare următoarea listă, de exemplu, există un element de meniu "Îmbrăcăminte pentru femei" (când se hovering, tipurile de îmbrăcăminte cad ), atunci când selectați unul dintre tipurile, de exemplu "Ovră", o listă cu elemente: Parcuri, paltoane, haine scurte, blănuri etc.

Am enumerat superficial principalele modalități prin care puteți crea o listă drop-down. Desigur, există multe nuanțe în HTML, în CSS și JavaScript, care vă permit să modificați funcționalitatea și aspectul listelor.