În acest articol, vom dezvolta un simplu meniu drop-down cu jQuery. Mai întâi, uita-te la fișierul demo. Sperăm că știți puțin din elementele de bază ale jQuery și CSS. Aspectele cheie ale creării acestui meniu drop-down sunt utilizarea parametrilor CSS: poziția, top, stânga, z-index.
Folosind acești parametri, putem fi siguri că meniul nostru va apărea doar sub link-ul, care a fost aplicată peste și doar va acoperi toate celelalte elemente. De asemenea, vom afișa meniul atunci când vom trece peste și vom dispărea când cursorul este în lateral. Pentru a implementa aceste evenimente, vom folosi funcțiile jQuery: mouseenter și mouseleave. Și asta e tot ce avem nevoie pentru a crea un meniu drop-down!
Faceți clic pe link-ul fișierului demo și veți vedea ce vom dezvolta acum.
Consultați codul HTML pentru meniul derulant:
După cum puteți vedea, aici vom folosi liste neordonate pentru a implementa elementele de meniu. Fiecărui link de meniu i se atribuie o clasă de meniu drop-down, iar meniul drop-down este acoperit de clasa de subliniere. Numele de clase vor fi folosite de jQuery pentru a determina ce meniu trebuie afișat.
Citiți CSS:
Cea mai mare parte a codului CSS este folosit pentru a formata meniul (puteți da aspectul meniului la discreția dvs.), dar există și câteva puncte importante:
1 - Eliminarea filelor cu stil listă: none;
2 - Știm că listele sunt elemente de bloc și apar mereu în ordine verticală. Pentru a le poziționa pe orizontală, le dăm un parametru al elementelor de linie și le aliniem pe partea stângă cu codul:
3 - În mod implicit, link-urile sunt elemente inline. Le transformăm în elemente de bloc folosind blocul de afișare (astfel încât le putem da acum valoarea lățimii).
4 - Ascundeți întregul meniu prin:
Imaginează-ți zilele de demult, atunci când meniurile trage în jos au fost puse în aplicare prin intermediul unui cod de grosier j # 097; vascript, în plus, a existat o grămadă nevoie de cod inutile. Dar astăzi, tot ce avem nevoie este jQuery:
Lucru foarte interesant și simplu. Să vă explicăm cum funcționează. Pentru început și, ca de obicei, acoperim codul nostru în controlerul jQuery:
Să ne asigurăm că am ascuns (ascundeți ()) toate meniurile deschise anterioare înainte ca cursorul mouse-ului să sară la următorul link:
Iată ce conține codul HTML:
Atunci când mouse-ul trece peste legatura cu clasa unui drop-down, ne mutăm înapoi cu părinte () și se va opri la „li“, și apoi utilizați următoarea (), ne aflăm în meniul vertical din dreapta, „li“, va exista un sub-clasă Link-uri (sublinks). Astfel, jQuery simplifică procesul de a găsi noi ce fel de meniu vertical pentru a afișa atunci când cursorul mouse-ului trece peste legatura specifice.
Apoi, aplicăm un cod CSS în meniul drop-down, astfel încât să fie afișat specific sub linkul pe care se află cursorul:
Codul este foarte important, deoarece ne garantează că meniul drop-down este afișat exact sub un anumit link. Dacă poziția este setată la absolută, putem plasa elementul în orice zonă a paginii noastre. În continuare, vom determina link-urile pe primele poziții pe care cursorul este folosind $ (aceasta) .offset (). Sus (aceasta se referă la elementul de meniu curent sub cursor), și se adaugă la acesta este înălțimea, pentru meniuri să apară chiar sub link-ul. Ceva similar se face cu parametrul stâng. Apoi vom folosi indexul z pentru a vă asigura că meniul nostru este afișat pe lângă celelalte elemente.
Apoi, afișăm un meniu derulant prin alunecarea (slideDown) la o viteză de 300 milisecunde utilizând:
Desigur, puteți utiliza alte variante de animație fadeIn, animație cu propriile stiluri și așa mai departe.
Acum trebuie să distrag atenția de la conceptul afișării meniului derulant și să îl ascundem. Avem nevoie de acest fragment de cod aici:
Pentru a ascunde meniul drop-down, folosim slideUp, un antonim pentru slideDown. Considerăm că submeniul este o variabilă pe care am creat-o pentru a defini un meniu drop-down specific.
Astfel, avem un meniu atractiv la nivel de joy pe jQuery.
Articole similare
Trimiteți-le prietenilor: