Crearea unei bare de navigare pentru site-ul, în lampă de lavă stil

Pasul 1 Crearea de marcare pentru meniul nostru de navigație

Rețineți că am atribuit ID «selectat» pagina de start. Pentru cele mai multe site-uri, aceasta este o abordare destul de standard; vă permite să urmăriți pagina curentă în lista (aprox. Trans. în meniul Lava Lamp), respectiv, descriind-o ca un anumit element.

Tehnologii moderne de dezvoltare web

AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web

Apoi, avem nevoie pentru a decide modul în care cele mai bune pentru a pune în aplicare funcționalitatea Lava Lamp. Pentru a avea capacitatea de a reutiliza, vom aranja acest mic script ca un plug-in și numesc așa:

Așa că am decis să construiască un plug-in, să mergem mai departe - a crea un nou fișier pentru acest script și să facă un link către acesta în marcajul nostru. Noi o numim jquery.spasticNav.js.

Pasul 2 începe să facă un plugin

Acum, jQuery va fi trecut la plugin-ul nostru și nu va fi notată cu simbolul $.

Mai mult, de obicei, cele mai bune practici - da utilizatorilor plugin-ul cât mai mult posibil de flexibilitate. În esență, noi oferim opțiuni de transfer de la apelarea constantele obiect plug-in, care va conține un set de setări personalizate. În opinia mea, acestea ar trebui să fie capabil să:

Setați suma de suprapunere pentru îngroșarea mica noastră (de exemplu, cursorul) ca cursorul depășește înălțimea meniului de navigare.

Set de resetare, ceea ce va duce la cursorul înapoi la poziția curentă pagină (cu condiția ca utilizatorul nu face clic pe link-ul)

Setați culoarea cursorului. Această setare poate fi, de asemenea, realizată și cu ajutorul CSS, dar utilizarea opțiunii plug-in-ul este mai convenabil.

Personalizeaza efectul relaxării.

Acum, noi numim plug-in și să alocați o funcție. $ .fn - este pur și simplu un alias pentru jquery.prototype.

Știind că schimbările în comportament poate fi un plug, trebuie să fim siguri că acceptați setările ca parametru.

Pasul 3 Opțiuni de configurare

Acum, că am identificat plug, următorul pas este de a crea opțiunile de configurare.

Mai sus, am stabilit opțiunile variabile pentru a defini anumite proprietăți și valorile lor implicite, iar apoi extinderea valorilor pe care utilizatorul transmite când îl numește pe ștecher. Astfel, a trecut opțiunea noastră, înlocuiți setările implicite. De exemplu, atunci când eu numesc acest plugin, tu treci:

Aceste două proprietăți vor înlocui setările implicite, în timp ce restul setărilor vor rămâne aceleași.

Pasul funcționalitatea 4 Realiza

Acum suntem gata să se plimbe prin fiecare element al setărilor trecut la acest plug-in, și să pună în aplicare funcționalitatea Lava Lamp. Amintiți-vă, nu putem presupune că utilizatorul va trece acest plug-in-un singur element. El poate, dacă vrea să treacă o referință la o clasă care se referă la mai multe elemente, dintre care avem nevoie pentru a obține funcționalitatea care aveți nevoie. Ca atare, noi numim this.each, pentru a obține în jurul valorii de fiecare element dintr-un set închis.

nav. „Caches“ acest lucru, împachetate în obiectul jQuery.

currentPageItem. Acesta conține elementul listă al cărui id atribut este setat la „selectat“. Vom trece al doilea parametru pentru a stabili contextul în care pentru a începe căutarea. Astfel, nu avem nevoie pentru a obține toate dom, pentru a găsi acest element.

pată de cerneală. Din cauza lipsei unui cuvânt mai bun, această variabilă se va referi la lumina de fundal, care va urma mouse-ul, atunci când l-am cheltui pe meniu.

Acum, că ne-am declarat / variabilele initializatã, să creeze, ca să spunem așa, cursorul în sine.

lățime. Ia currentPageItem lățime, inclusiv chenare și padding.

înălțime. Ia-înălțime currentPageItem, inclusiv chenare și padding. De asemenea, se adaugă valoarea de suprapunere a opțiunilor de cursor, astfel încât acesta a extins dincolo de meniu.

la stânga. Setează proprietatea cursorului din stânga este identic cu currentPageItem poziția din stânga. (Ar trebui să stabilească poziția noastră în contextul CSS pentru această valoare să elaboreze o acțiune).

top. În mod similar, valoarea setată superioară și centrează cursorului vertical.

Tehnologii moderne de dezvoltare web

AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web

backgroundColor. Aceasta stabilește culoarea de fundal.

În cele din urmă, vom adăuga noul element în această listă sau #nav.

În continuare, trebuie să păstreze o referință la #blob. Astfel, noi nu trebuie să caute DOM de fiecare dată când vrem să-l acceseze. Am declarat deja o pată de cerneală variabilă în partea de sus a funcției. Acum, să-l inițializa.

Pasul 5 Eveniment Hover

Acum trebuie să „asculte“ atunci când utilizatorul deține peste (trece peste), unul dintre elementele din listă (cu excepția cursorului, desigur) în meniul nostru de navigare. Când o va face, vom stabili lățimea proprietățile și marginea stângă a cursorului egal cu elementul din listă, care tocmai a efectuat mouse-ul.

Pentru suma scrisă de mai sus ...

Obținem toate elementele din listă - nu #blob - în interiorul meniul de navigare, iar când mouse-ul peste ele să dețină, executați funcția.

Anima cursorul și setați proprietățile marginii din stânga și lățimea egală cu elementul listei, pe care a efectuat mouse-ul.

Se trece constanta obiect ca al doilea parametru animație prin setarea duratei și efectul de a atenua egale cu cele pe care le-am identificat în opțiunile noastre de configurare. coadă Parametru (linia) este setat la fals (false), pentru a preveni o repetare a animației.

Atunci când mouse-ul este îndepărtat, numit setTimeout, care mută cursorul înapoi la elementul corespunzător paginii curente. Dacă nu o facem, atunci când utilizatorul face clic pe un link de navigare selectată, meniul va arata ca și în cazul în care este deja pe o altă pagină. Astfel, într-o a doua sau cam asa ceva, această funcție animă cursorul înapoi la currentPageItem.

Asta e tot ce ai nevoie! Acest lucru este - plugin super-simplu. Următorul pas este proiectarea meniul nostru de navigare.

Pasul 6 sub Aspect

Să mai întâi să elibereze „nav“ ul. Deschideți fișierul style.css și adăugați:

Apoi așezați fiecare element din listă.

Acest stil pur si simplu face posibil să se deplaseze liber la fiecare element al listei la stânga și adaugă fiecare muchie laterală.

Trecând mai departe, trebuie să emită tag-uri hyperlink-uri în meniul nostru de navigare.

Am stabilit culoarea, setați marginea din stânga a plutitoare, stabilește valori de la font și o adâncitură destul de mare. Notă proprietatea z-index. Este o necesitate, și va fi în curând explicate. Cu toate acestea, amintiți-vă că pentru a pune în ordine z-index, trebuie să instalați contextul de poziționare a ceea ce am făcut.

Din moment ce nu vindem o foaie de stil care resetează complet toate valorile, să ne asigurăm că toți au adus la zero Marjele implicite și padding în UL și li nostru, doar pentru a se proteja de eventualele probleme.

Ultimul pas - pentru a aplica stilul însuși cursorul!

Și iată-ne din nou limitele stabilite pentru culorile frumoase și adăugați o culoare de fundal (inclusiv gradienți / frontieră / umbra CSS3 pentru Firefox și Safari / Chrome). Aici vom vedea din nou aceeași proprietate z-index. Fără ea, cursorul va fi afișat în partea de sus a tot textul din meniul de navigare (de exemplu, închide). Pentru a contracara acest lucru, trebuie să ne asigurăm că proprietatea sa z-index este mai mică decât aceeași proprietate a elementului din listă! De asemenea, trebuie să se stabilească poziția absolută pentru a putea ajusta valorile din stânga și de sus în codul pluginul nostru.

concluzie

Tradus și editat de: Victor Horn și Andrew Bernatsky. Echipa webformyself.

Tehnologii moderne de dezvoltare web

AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram