Un exemplu interesant de meniu jquery

Astăzi se va discuta modul de a face meniul original pe jQuery.

Am decis să scrie această notă pentru că am agitati mai mult de o oră, pentru a face meniuri și tot ce ai citit aici despre a face mea.

În mod repetat văzut pe site-uri, cum ar fi meniul, dar când le-am văzut, am avut dorința de a vedea modul în care acestea sunt puse în aplicare. Cel mai recent necesar pentru a face un meniu similar, dar o decizie concretă, nu am știut să găsească și să vadă cum să facă un astfel de meniu de pe site-urile pe care i-am cunoscut, nu am putut - cu căutarea pentru mine, ca și mai înainte, este dificil.

Mai mult noroc data viitoare

Primul lucru care a avut loc la mine, pentru realizarea acestei sarcini - este crea cu siguranță fotografii, le-a pus în fundal (background proprietate css) și mutați-le folosind funcția animate () biblioteca jQuery. Dar, așa cum sa dovedit insufletit () nu știe cum să funcționeze corect cu fundal poziția de proprietate CSS. sau mai degrabă nu se poate specifica atât argumente X și Y (poziția de fundal: X Y), poate doar X.

După instalarea acestuia, am fost capabil de a crea un meniu folosind imagini în loc de text, dar că opțiunea mi sa părut extrem de incomod, pentru că dacă, de exemplu, vom avea nevoie pentru a schimba numele elementului de meniu, va trebui să redesenare imaginea și realocați în CSS dimensiuni, dar este foarte incomod .

Prin urmare, din această versiune, am refuzat și a decis să-l facă cu CSS și HTML marcare.

a crea un meniu

Pentru a crea un meniu fără utilizarea de cuvinte-imagini, fără a conecta diverse plugin-uri jQuery nu au nevoie de atât de mult.

Să ne uităm la toate etapele:

1. În primul rând, de a crea un meniu în html:

2. Conectați biblioteca jQuery. în cazul în care nu este încă conectat: adăugați următoarea linie la începutul documentului HTML:

jQuery, în acest caz, este conectat la magazia Google. Desigur, vă puteți conecta în alt mod.

După cum puteți vedea, am împărțit stilurile pe „obligatoriu“ și cei care sunt responsabili pentru apariția meniului și nu afectează scriptul corect de operare jquery. Ie dacă eliminați al doilea stil, meniul va continua să lucreze.

4. Adăugați codul jQuery:

Să examinăm un mic fragment de cod. În munu.each (.) Am adăuga link-uri în interiorul tag-ul (a) bloc div cu link-uri text ancora, adică facem ca link-uri ancora două ecuații, care mai târziu se va muta. (.) În munu.hover specificat de acțiune atunci când indică un link: l-am muta de până la 40 de pixeli.

Important! Înțeles marginTop: „- 40px“ trebuie să coincidă neapărat cu valorile proprietăților în înălțime de legare stiluri CSS: 40px și o linie de înălțime: 40px (stiluri CSS cm.).

Asta e tot. Acum, acest meniu poate fi editat fără prea mult tam-tam.

Am spus deja că acest lucru este meniul - o plăsmuire a imaginației mele, așa că aș dori să văd cum să pună în aplicare aceste meniuri pe alte site-uri. Dacă dintr-o dată aveți exemple, vă rugăm să împărtășiți!