Treptat se deschide meniul cu ajutorul jQuery, proiectarea și dezvoltarea site-ului

Buna ziua 🙂

Așa cum a promis în ultimul articol, astăzi vă va arăta cum să obțineți o deschidere lină a efectului meniul drop-down, dar nu mai cu ajutorul CSS, și datorită jQuery. Metoda este, de asemenea, comună, și în timp util, am folosit de multe ori. Dar numai ca, orice scenariu, această metodă creează o povară chiar și minimă, dar încă suplimentare pe site-ul. Dacă nu sunteți îngrijorat cu privire la aceasta, la toate, apoi să trecem la punerea în aplicare a meniurile noastre lin jos meniu. Dar, înainte de asta, să ne uităm la ce se întâmplă în cele din urmă.

Doar care sunt interesați se pot uita la metoda anterioară de utilizare a CSS, care este descris în articolul - se deschide ușor un meniu cu CSS

Acum, la afaceri. Ca și în ultimul articol, în primul rând, să scrie codul HTML pentru meniul nostru. takoyzhe cod, în acest articol, pentru a evita confuzia și să fie mai bine înțeleasă. Meniu cu două elemente și ambele au submeniuri.

În continuare, vom trece la script-urile. Și, ca de obicei, mai întâi conectați biblioteca jQuery. Capacul înainte de a capului de închidere sau în subsol, înainte de a adăuga zakryvayuschimsyabody acest cod aici.

Dacă aveți o astfel de linie, sau ceva similar, care a fost deja conectat bibliotecă, apoi din nou, acest lucru nu este în valoare.

Apoi, script-ul care va face o animatie deschide meniul drop-down. Acest cod se adaugă imediat după bibliotecă.

În al doilea rând script-ul indică Haydee meniul nostru. Dacă utilizați această metodă pentru propriul meniu, este firesc să se schimbe numele pe cont propriu. În acest caz - #slow_nav.

Puteți chiar să personalizați animația. În acest scenariu pentru deschiderea și închiderea valoarea este de 400 de milisecunde, este de 0,4 secunde. Dacă doriți, puteți schimba la o valoare mai mare sau mai mică.

Ultimul pas este de a adăuga stiluri. Acestea sunt stiluri foarte similare din ultimul articol, dar le lipsesc proprietățile animații CSS.

De asemenea, stiluri, se adaugă o nouă linie, cu care script-ul funcționează corect. Pentru un element - afișare Set de proprietăți #slow_nav li ul: nici unul;. În cazul în care nu se adaugă meniul drop-down va fi inițial văzut și va dispărea doar după ce cursorul pe ea. Toate celelalte aceleași stiluri ca articolul precedent.

Ca ultima metodă, iar acest lucru poate fi aplicat nu numai la meniul samopisnaya, ci și la aceleași meniuri dinamice, care sunt create de sisteme de gestiune a conținutului, cum ar fi WordPress. Pentru a face acest lucru, ai nevoie de un pic de retuș stiluri și toate. Acesta este primul care a folosit codul HTML nu este necesar, doar stilurile. În stilul pe care doriți să înlocuiți numele Haydee #slow_nav faptul că va fi, bine, poate tweak altceva pe lucrurile mici. Nu voi intra în detalii. Pentru fiecare caz are nevoie de o abordare individuală, atât de rău 🙂

Asta e tot, vă mulțumesc pentru atenție. 🙂

Dacă ați fost utile pentru munca mea, vă poate sprijini site-ul dvs. :)

Bună ziua dragi prieteni

Ai instalat extensia AdBlock sau altele asemenea. Adaugă site-ul meu pe lista albă, și, astfel, vnesesh contribuie la dezvoltarea acesteia. Instrucțiuni despre cum să dezactivați AdBlock doriți această fereastră