Crearea listelor derulante

Ce anume face acest script? În primul rând, comută clasa activă când faceți clic pe un element. Aceasta înseamnă că, dacă shell-ul nu are această clasă, acesta adaugă și apoi, dacă celălalt este activ, îl elimină în consecință. În al doilea rând, vă permite să închideți lista atunci când faceți clic pe orice alt loc de pe ecran.







Acum înțelegem cum funcționează acest lucru și este timpul să creați niște liste derulante!

Să începem cu ceva simplu.

Avem nevoie de câteva lucruri: clasa de împachetare, lista derulantă (ascunsă) și numele care va fi plasat în eticheta Span. Vom folosi și ancore.

Să ne uităm la stilurile la care ne vom concentra atenția. Să începem cu învelișul:

Mai întâi am stabilit lățimea meniului derulant și a unor plăcuțe și margini. Apoi l-am întrebat câteva stiluri. Și, în final, am stabilit câțiva parametri pentru font. Apoi, să setăm stilurile pentru titlu.







Cred ca toata lumea stie cum sa creeze un triunghi mic folosind css. Vom avea un buton, dar fără o săgeată pentru lista drop-down, nu va juca nici un rol. Să ne ocupăm de lista noastră!

wrap-dropdown -1

Ce am făcut noi? Am setat poziția absolută pentru listă și l-am pus în spatele butonului (sus: 100%;). Am setat-o ​​la aceeași lățime ca și pentru butonul cu valorile stânga și dreapta - o. Și ceea ce este încă foarte important - a ascuns-o, reducând transparența la 0. Proprietățile pointer-evenimente: nici una, dar asta nu înseamnă că nu este.

Iată câteva stiluri pentru lista de articole:

Deci, avem un buton și elemente ascunse ale meniului drop-down. Acum ne uităm la meniul deschis care apare când faceți clic pe buton.

Aici sunt trei lucruri:

  • Mai întâi, vom afișa lista drop-down, setând opacitatea la 1. Nu uitați că indicatorul eveniment va stabili valoarea auto.
  • Apoi, schimbăm direcția și culoarea săgeții mici.
  • Apoi schimbați fundalul, utilizați gradientul.






Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: