Crezi că ai un design modern al site-ului? Utilizați cele mai recente tehnologii și se tem de ele? Poate crezi că este prea dificil, și chiar nu doresc să urce în această junglă. Dar, de fapt, lucrurile sunt mult diferite. La urma urmei, noi tehnologii (mă refer chiar acum CSS3) a venit pentru a face viața mai ușoară pentru designeri web și să aducă capacitățile lor complementare pentru a crea aspectul site-ului. Astăzi, să vorbim despre câteva tipuri de design pentru lista drop-down.
Ceea ce vreau să spun imediat despre demo: fiecare tip particular de listă este un fișier HTML separat, care vă permite să luați cu ușurință codul, de care aveți nevoie. De asemenea, stiluri în fișiere separate pentru fiecare desen sau model listă situat. Trebuie doar să o alegi pe cea care iti place cel mai bine și pentru a găsi fișiere stiluri lui 🙂.
Markup este nimic neobișnuit lista:
Așa cum se spune:
În unele cazuri, puteți vedea atributele neobișnuite, cum ar fi datele de clasă sau de date-link. Nu este nimic să se teamă, acestea sunt necesare pentru buna funcționare a listei relevante, astfel încât informațiile suplimentare pot fi stocate acolo.
Mergeți puțin în stil.
stiluri de bază sunt fișier cs-select.css. stiluri care dau forma obișnuită a listei este aici că suntem obișnuiți să vadă.
Și, în scopul de a face o nevoie neobișnuită și stilul original de a utiliza caracteristici suplimentare. De exemplu, pentru un prim exemplu (du-te și vezi) utilizează următoarele stiluri:
Și sunt aceste stiluri într-un fișier separat (pentru comoditate) cs-piele-border.css.
Ceea ce nu a făcut de dragul de design unic al site-ului dvs.! Si cel mai important - nu-ți fie frică să experimenteze cu un design și îmbunătăți continuu. Dintr-o dată creați (prin experimente) este cel care va atrage utilizatorii, și vor spune: „Wow, îmi place acest design, ce altceva este interesant este pe acest site!» 😉.
Doriți să afișați descrierea elementului selectat într-o unitate arbitrară (de exemplu, div)? Dacă da, atunci trebuie să utilizați jQuery, folosind această bibliotecă pentru a face acest lucru cel mai simplu mod.
1) Puteți adăuga * atribut pentru a datelor fiecare element din listă
2) determina care dintre elementele listei a fost selectată
3) Utilizarea jQuery substitut ce informații de la * atribut div a datelor bloc.