Share
Cu câteva săptămâni în urmă, am creat un scenariu care a demonstrat cum să construiți un meniu de navigare pe trei niveluri. Într-un e-mail de răspuns, unul dintre cititorii noștri a solicitat un tutorial cu privire la modul de a construi un meniu stil lămpi lava. Din fericire, este o sarcină simplă, mai ales atunci când utilizați o bibliotecă JavaScript. Vom construi unul de la zero astăzi.
Înainte de a putea crea această funcționalitate elegantă, avem nevoie de o bază de la care să lucrăm. În editorul de coduri preferate, creați o listă neordonată pentru navigarea dvs. și importați atât interfața jQuery, cât și jQuery, prin Google.
SplashNav Plugin
- Acasă
- Despre
- Blog
- Mai multe despre portofoliul meu
- a lua legatura
Rețineți cum am dat un id de "selectat" la pagina de pornire. Acest lucru este destul de standard în majoritatea site-urilor web; permite utilizarea pentru a viza pagina curentă și pentru a schimba în mod corespunzător elementul respectiv.
Apoi, trebuie să decidem cum să implementăm cel mai bine funcționalitatea lămpii cu lavă. Pentru a permite reutilizarea, vom împacheta acest script mic într-un plugin și îl vom numi:
$ ( '# Nav') spasticNav ().;
Deoarece am decis să construim un plugin, să mergem mai departe și să creăm un fișier nou pentru scriptul respectiv și să-l referim la marcajul nostru. O vom numi jquery.spasticNav.js.
Pentru a reduce numărul de variabile globale pe care trebuie să le creăm, precum și pentru a elimina orice posibilitate a simbolului $ care se confruntă cu alte biblioteci JavaScript, să închidem plugin-ul nostru într-o funcție anonimă care se execută automat.
(funcția ($) ) (jQuery);
Acum, jQuery va fi trecut în pluginul nostru și va fi reprezentat prin simbolul $.
Apoi, este, în general, o bună practică de a oferi utilizatorilor pluginului o flexibilitate cât mai mare posibil. Ca atare, le vom da opțiunea de a trece într-un literal obiect atunci când sună pluginul pentru a suprascrie o serie de setări. După cum văd, ar trebui să poată:
Acum, vom numi plugin-ul nostru, și vom face egal cu o funcție. $ .fn este pur și simplu un alias pentru jquery.prototype.
$ .fn.spasticNav = funcție (opțiuni) ;
Știind că vom permite aceste suprascrieri, trebuie să ne asigurăm că acceptăm un parametru "opțiuni".
Acum, când am denumit pluginul nostru, următorul pas este să creați opțiunile de configurare.
opțiuni = $ .extend (suprapunere: 20, viteză: 500, resetare: 1500, culoare: '# 0b2b61', relaxare: 'easeOutExpo', opțiuni);
Deasupra, luăm variabila de opțiuni, setăm câteva proprietăți și valori implicite, apoi extinzându-l cu orice (dacă este ceva) pe care utilizatorul îl trece când sună pluginul. În acest fel, opțiunile pe care le vor trece vor suprascrie setările noastre implicite. De exemplu, dacă, atunci când numesc acest plugin, trec:
Accentsconagua
$ ('# nav') spasticNav (viteza: 2000, relaxare: 'easeOutElastic'); Aceste două proprietăți vor suprascrie setările implicite, în timp ce restul opțiunilor vor rămâne aceleași.
Acum, suntem gata să navigăm prin fiecare element care a fost transmis acestui plugin și să implementăm funcționalitatea lămpii cu lavă. Rețineți că nu putem presupune că utilizatorul va trece un singur element în acest plugin. Ar putea, dacă doreau, să facă o referință la o clasă, care se referă la mai multe elemente care ar trebui să primească această funcție. Ca atare, vom apela acest lucru pentru a itera peste fiecare element din setul înfășurat.
returnați acest lucru (funcția () );
În cadrul acestei funcții, vom crea câteva variabile. Nu toți vor avea imediat valori, dar din moment ce motorul JavaScript va ridica oricum toate numele de variabile în partea de sus a funcției (în spatele scenei), este în general o practică bună să le declarați în partea de sus și apoi să le inițializați mai târziu.
var nav = $ (acest), currentPageItem = $ ('selectat', nav), blob, reset; Acum că am declarat / inițializat variabilele noastre, să creăm blobul real, ca să spunem așa.
$ (“') .css (width: currentPageItem.outerWidth (), height: currentPageItem.outerHeight () + options.overlap, stânga: currentPageItem.position () 2, fundal Culoare: options.color) appendTo (this);
Motivul pentru care apelăm metoda CSS, mai degrabă decât să adăugăm doar o clasă, se datorează faptului că aceste valori variază în funcție de elementul listei paginii curente. Ca atare, trebuie să folosim JavaScript pentru a le recupera valorile.
În final, adăugăm acest nou element de listă la acest, sau #nav.
Apoi, trebuie să stocăm o referință la #blob. În acest fel, nu trebuie să căutăm DOM ori de câte ori dorim să-l accesăm. Am declarat pată de cerneală variabilă în partea superioară a funcției. Acum, să o inițializăm.
blob = $ ('blob', nav); Acum trebuie să "ascultăm" când utilizatorul se deplasează peste unul din elementele listă (cu excepția blobului, desigur) din meniul nostru de navigare. Când o vor face, vom seta proprietățile de lățime și stânga ale pensulei egale cu cele ale elementului listat în prezent.
$ (li: not (#blob) ', nav) .hover (functie () // mouse peste clearTimeout (resetare); blob.animate (left: $ (acest) .width (), duration: options.speed, relaxare: options.easing, queue: false); (width: currentPageItem.outerWidth (), left: currentPageItem.position (left), options.speed), options.reset););
Pentru a rezuma scriptul de mai sus ...
Și asta este tot ce există! Acesta este un plugin foarte simplu. Următorul pas este să stilizăm meniul nostru de navigare.
Fără stil, meniul nostru ar trebui să pară similar cu acesta:
Să facem mai întâi stilul "nav" ul. Deschideți fișierul dvs. stil.css și adăugați:
#nav position: relative; fundal: # 292929; plutește la stânga;
Apoi, vom modela fiecare element de listă.
#nav li float: stânga; listă: nu există; frontieră-dreapta: 1px solid # 4a4a4a; margine stângă: 1px solid negru;
Acest lucru plutește pur și simplu fiecare element de listă spre stânga și adaugă o margine pentru fiecare parte.
Mergând de-a lungul, trebuie să stilizăm în continuare etichetele de ancorare din meniul nostru de navigare.
#nav li a culoare: # e3e3e3; poziție: relativă; z-index: 2; plutește la stânga; font-size: 30px; font-family: helvetica, arial, sans-serif; text-decoration: nici unul; padding: 30px 45px;
Am setat o culoare, plutitoare în stânga, setând câteva valori ale fontului și o cantitate sănătoasă de umplutură. Luați notă de proprietatea z-index. Aceasta este o necesitate și va fi explicată în scurt timp. Totuși, rețineți că, pentru a regla indexul z, trebuie să setăm un context de poziționare, pe care l-am făcut.
Deoarece nu implementăm o foaie de stiluri de resetare completă, hai să ne asigurăm că vom elimina orice margini implicite și umplutură pe ul și li, pentru a salva eventualele dureri de cap.
ul, li marja: 0; umplutura: 0;
Ultimul pas este de a modela blobul în sine!
#blob frontieră-dreapta: 1px solid # 0059ec; frontieră-stânga: 1px solid # 0059ec; poziția: absolută; top: 0; z-index: 1; fundal: # 0b2b61; fundal: -moz-linear-gradient (sus, # 0b2b61, # 1153c0); fundal: -webkit-gradient (liniar, partea stângă sus, partea stângă a stânga, de la (# 0b2b61), la (# 1153c0)); -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 2px 3px 10px # 011331; -webkit-box-shadow: 2px 3px 10px # 011331;
Încă o dată, setăm câteva culori destul de bune pentru granițele noastre și adăugăm câteva culori de fundal (inclusiv gradienți CSS3 / border / shadows pentru Firefox și Safari / Chrome). Încă o dată, vedem proprietatea z-index. Fără aceasta, blob-ul va afișa mai presus de tot textul din meniul de navigare. Pentru a contracara acest lucru, trebuie să fim siguri că proprietatea indexului z este mai mică decât cea a articolului din listă! De asemenea, trebuie să setăm poziția la absolut pentru a ajusta valorile de sus și de la stânga cu plugin-ul nostru.
Cam despre asta e! Cu un efort minim, am creat un meniu de navigare foarte frumos, de la zero. Anunță-mă dacă aveți întrebări! Vă mulțumim pentru citire și vizionare.
