Buna ziua tuturor! Bine ați venit la noul curs de formare! În acest tutorial, vă voi arăta cum să creați un buton folosind jQuery, din care să se extindă lista de meniuri. Puteți vedea acest efect în acțiune la adresa psd.tutsplus.com în colțul din dreapta sus.
Când faceți clic pe buton, blocul cu lista de link-uri este deschis și când butonul este apăsat din nou, blocul se prăbușește. Acest lucru se poate realiza cu ajutorul jQuery, iar în această lecție vă voi arăta cum. Să începem. Mai întâi, să ne creăm butonul, apoi să ne concentrăm complet pe cod. Deschideți Photoshop și creați un nou document cu dimensiunea butonului viitor. Puteți crea un buton de orice dimensiune. Dimensiunea butonului meu este de 182 x 32 pixeli. Faceți dublu clic pe stratul "Fundal" și adăugați un stil simplu "Gradient Overlay".
În partea dreaptă a butonului, adăugați o mică săgeată albă și un divider vertical de două culori: # 302f2f și # 252525.
În partea stângă, introduceți o imagine mică și un text. Nu voi descrie toate detaliile creării unui buton, deoarece veți crea propriul dvs., potrivit pentru site-ul dvs. Acesta este modul în care arată butonul meu. (Salvați imaginea cu butonul din dosarul imagine.)
Acum, Notepad deschis și de a salva un document gol ca styles.css în dosarul „meniu de alunecare“ de pe desktop. Închideți notebook-ul, deschideți dosarul „alunecare meniu“ și de a crea în ea două dosare noi: „js“ și „imagini“. Du-te la pagina principală a site-ului și a descărca biblioteca jquery.com „jquery-1.4.4.min.js“, redenumiți fișierul la doar „jquery“ și salvați-l în folderul „js“. Deschideți Dreamweaver și creați un nou fișier HTML. Salvați-l direct pe desktop, în niciun dosar. (Numele acestui fișier nu joacă un rol important, asa ca suna-l ce-ți place, de exemplu, „sliding_menu.html“.) In Dreamweaver, comutați în modul Cod.
Poate ați observat că am înregistrat trei fișiere: styles.css, jquery.js și, al treilea, slider.js ( „dar, de asemenea, nu avem deja“ - s-ar putea spune). Acum trebuie să creați un fișier numit slider.js. Deschideți notepad-ul și salvați documentul gol slider.js în folderul js. Deschideți acum acest fișier în Dreamweaver și introduceți următorul cod.
Permiteți-mi să explic fragmentul de cod de mai sus. Prima linie înseamnă că, atunci când este încărcat un document, funcția se numește, în acest caz, este o funcție a meniului drop-down. Următoarea linie înseamnă că, odată ce a făcut clic pe imaginea de menu_class de clasă, se desfășoară meniul. Apoi vine al treilea rând. Meniul se va micșora la viteză medie. Puteți seta viteza să încetinească (încet) sau rapid (rapid). A doua și a treia linii sunt foarte importante, deoarece ele conțin elemente legate de CSS-fișier, și anume, img.menu_class și ul.the_menu. Noi nu descriu aceste stiluri, dar fă-o de îndată ce începe să creeze meniul nostru. Mergeți la documentul HTML în modul cod astfel încât să putem începe crearea meniului nostru.
Deschideți fișierul CSS în Dreamweaver. Să stabilim câteva stiluri pentru partea principală a documentului nostru.
Aveți nevoie de un stil simplu și de fundal. Setați fontul și dimensiunea dorită. De asemenea, am schimbat culoarea de fundal de la alb la gri închis. Adăugați un stil pentru liste numerotate și neumerate. Adăugați o margine la imaginea butonului. Puteți desena un chenar în Photoshop-e în figură, dar mi se pare că este mai ușor dobvait-l prin CSS, astfel încât este mai ușor să se schimbe o bucată de cod, decât de fiecare dată pentru a deschide Photoshop și redesena imaginea.
Următoarele stiluri se referă la meniul care se va desfășura după apăsarea butonului.
În acest fragment de cod, puteți modifica lățimea casetei de meniu drop-down. Meniul meu are o lățime de 300 de pixeli, dar puteți specifica orice lățime. De asemenea, am setat grosimea marginii acestui bloc la 1 pixel, care corespunde grosimii marginii butonului. Următoarea parte a codului se referă la culoarea meniului pop-up bloc de fundal, precum și setează culoarea textului, dimensiunea și comportamentul de link-uri atunci când treceți peste ele.
Și câteva cuvinte despre poziționare. Pentru a alinia aspectul butonului, nu utilizați alinierea blocului (div) în centru sau pe marginea dreaptă, deoarece caseta de meniu nu se va alinia corect. Pentru a alinia corect aspectul butonului, închideți blocul cu meniul din altă etichetă div și poziționați-l după cum doriți.
De asemenea, puteți adăuga ceva la discreția dvs., de exemplu, imagini pentru fiecare element din lista de linkuri de meniuri.
Ultimele 5 lecții din rubrica "jQuery"
Astăzi dorim să vă spunem despre biblioteca TypeIt - un plugin jQuery gratuit. Cu aceasta, puteți simula tastarea. Dacă totul este ajustat corect, puteți obține un efect foarte realist.
jQuery plugin pentru crearea unei cronologii.
jQuery plugin pentru crearea unei diagrame Gantt.
Un exemplu de încărcare a unui fișier prin PHP și jQuery ajax.
SerginhoLD
haha)) chiar și aceasta are o sursă a lecției))) ei înșiși chtol astfel de gunoi este dificil de scris?)
Ruslan Dimitriev +1
Da, era mai interesant. (
profesor08
efectul închiderii meniului ar trebui să funcționeze atunci când elementul de focalizare este pierdut: onBlur
profesor08
Și, în general, toate acestea pot fi organizate doar în CSS.
Ruslan Dimitriev
aleksandr kolesnik
Mulțumesc! Mai mult decât atât, pentru fani, ca mine. Și cei care consideră acest lucru prea simplu - site-ul probabil greșit.
Am o întrebare, am făcut astfel de patru meniuri unul pentru celălalt. Totul funcționează bine. Dar vreau să adaug ceva altceva. Că atunci când deschideți unul din meniuri, astfel încât ceilalți să se închidă automat, adică există întotdeauna un meniu deschis pe care îl voi deschide. Cum se poate realiza acest lucru? Vă mulțumim anticipat pentru răspuns.
La naiba, atunci. Fac totul ca tine, dar asta a fost o problemă. Meniul este deschis când este apăsat, dar dacă există o imagine sub meniul de pe pagină, acesta închide acest meniu și nu pot face nimic despre el :-(
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: