În această lecție vom face o bară de navigare care rămâne în vigoare atunci când parcurgeți conținutul paginii. Și, bineînțeles, aplicați câteva trucuri pentru a îmbunătăți aspectul și funcționalitatea.
Benzi sunt un element destul de popular de web design. Ele se găsesc adesea în varianta cu capete triunghiulare. Benzile desfac discontinuu paradigma de design plat în blocuri separate. În această lecție, vom demonstra o modalitate alternativă de a forma apariția panglicilor, ceea ce le conferă un aspect mai elegant, spre deosebire de capetele triunghiulare obișnuite.
În această lecție vom folosi elementul HTML5 nav ca un container pentru o listă orizontală de linkuri. Și, de asemenea, descrie cum se face mai plăcut pentru ochi folosind CSS.
Pasul 1. Container pentru navigare
Fără îndoială, deja cunoașteți un set mare de elemente noi introduse de HTML5. În acest exemplu, folosim două dintre ele.
Vom folosi o definiție de lățime explicită pentru bara de navigare. Acesta va avea 28 de pixeli mai mare decât containerul de reținere, iar poziția protuberanțelor sale este asigurată de un câmp stâng negativ. De asemenea, asigurați colțuri ușor rotunjite ale feței superioare cu raza de margine * și o mică indentare definită arbitrar.
Apoi adăugăm o listă neordonată de linkuri către bara de navigare și setăm proprietatea de afișare: bloc inline pentru elementele sale. pentru a le trimite într-o singură linie. Nu avem nevoie de etichete de listă, deci adăugăm stilul de listă: niciuna din proprietăți.
În prezent, panoul nostru va arăta astfel:
Pasul 2: capetele rotunde ale benzii
Acum, dacă CSS a permis abilitatea de a avea mai multe elemente pseudo (de exemplu, după :: după), am putea face ca marginile rotunjite ale barei de navigare să fie corecte semantic. Dar va trebui să folosim două elemente divice din semantica de la sfârșitul navei. Definiți clasele nav-stânga și nav-dreapta pentru ele. Acestea au 14px de lățime și 14px înălțime, sunt poziționate absolut la 14px din partea de jos a navei.
Familia de proprietăți cu raza de graniță poate lua 2 valori pentru fiecare unghi. De asemenea, puteți utiliza procente pentru a seta lățimea, care este o metodă destul de convenabilă - vă permite să adaptați automat raza de curbură la modificările dimensiunii dreptunghiului.
Umbrele mici care finalizează crearea aspectului panoului sunt create folosind pseudo-elemente. după. Înălțimea și lățimea lor, precum și raza curburii cadrului, sunt stabilite în procente.
Acum bara de navigare va arăta astfel:
Pasul 3: Script
Include jQuery și Waypoints în codul paginii.
Primul lucru pe care trebuie să-l faceți este să înregistrați punctul folosind metoda. Waypoint () pentru element. Desigur, nu se întâmplă nimic - trebuie să definiți o funcție pentru a gestiona evenimentul. Cea mai ușoară modalitate de a determina funcția este să transmiteți parametrii funcției .waypoint ().
Puteți încerca plugin-ul în acțiune: adăugați următorul cod în scenariu și urmăriți mesajul care va apărea pe măsură ce defilați bara de navigare.
Acum, pentru a obține efectul dorit, trebuie să complici procesul. În primul rând, vom înfășura bara de navigare într-un container care va fi un punct și va servi drept loc convenabil (a se vedea codul de mai jos).
În CSS, vom crea următoarea regulă.
Și schimbați script-ul după cum urmează:
Sunteți destul de competent să puneți întrebarea: "Ce se întâmplă aici?". Probabil că ați ghicit că legăm punctul de la containerele nav-container. dar de data aceasta folosim o altă metodă. În loc să trecem direct funcția de manipulare la metoda Waypoint (), o încapsulăm într-un obiect. Nu există mare diferență pentru funcționare. Obiectul pe care îl transmitem poate conține mai multe opțiuni, ceea ce îl va face suficient de convenabil pentru o utilizare ulterioară.
Funcționatorul de funcții pe care l-am definit are doi parametri. Primul este obiectul standard al evenimentului jQuery. care nu ne interesează. Al doilea este plugin-ul specific pentru Waypoints, care este șirul "în jos" sau "sus". în funcție de direcția derulării prin care se atinge punctul.
Se răcește? Cu toate acestea, dacă derulați lent pagina dincolo de punctul care tocmai a fost creat, veți putea observa "saltul" conținutului cauzat de eliminarea barei de navigare din fluxul de documente. Pe lângă aspectul rasfatat, acest comportament poate duce la erori incomprehensibile la ieșirea conținutului paginii. Din fericire, această eroare este ușor de rezolvat - adăugăm următorul cod la funcția de procesare și nu va mai exista un salt.
Pasul 4. Offset vertical
Primul lucru care trebuie luat în considerare este spațiul suplimentar deasupra elementului fix. Folosind o variabilă de compensare facilitează decizia: pentru a comuta offset pentru a adăuga 15px: 15px la .waypoint metoda de opțiuni () și schimba în partea de sus: 0px pe partea de sus: 15px .sticky în regulile de clasă.
Un mic gradient de deasupra bara de navigare poate îmbunătăți designul. Adăugați-o cu ușurință cu ajutorul unui element div element suplimentar în elementul nav și codul CSS pentru el:
Pasul 5. Funcția offset
Una dintre marile caracteristici ale pluginului este definiția dinamică a offsetului de puncte:
În acest exemplu, mânerul va fi pornit când utilizatorul a derulat deja pagina 50px sub fundul elementului (nu trebuie să cunoașteți înălțimea elementului).
Notă: aceste compensări generate (precum și cele specificate în procente) vor fi calculate de fiecare dată când fereastra este redimensionată. Adăugați noi puncte sau modificați opțiunile punctuale. Dacă efectuați operații care afectează punctele de poziționare (cum ar fi schimbarea DOM paginii sau șablon) trebuie să apelați $ .waypoints (Refresh) pentru a converti pozițiile.
În contextul lecției noastre, folosim această funcție pentru a aluneca ușor bara de navigare din partea de sus:
Aici operațiile standard ale jQuery: adăugarea sau eliminarea clasei lipicioase a elementului nav. Modificați poziționarea verticală utilizând metoda .css (). și apoi executați .animate (). Metoda .stop () este folosită pentru a preveni posibilele erori prin eliminarea coadă de evenimente jQuery.
Pasul 6. Selectați și defilați parcurgerea
Poate fi foarte util să selectați elementele care corespund poziției curente de pe pagină. Cu ajutorul plug-in-ului Waypoints, sarcina este ușor de rezolvat. Trebuie să adăugați următoarele linii în script:
Codul pe care îl folosim în handler este destul de evident:
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.
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 în mod 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: