Cum sa iti faci propriul bar antet adeziv ca MakeUseOf
Acum o lună am introdus un nou element de interfață pentru MakeUseOf - o bară de navigare și căutare plutitoare. Feedback-ul pe care l-am primit este aproape în întregime pozitiv, traficul de căutare internă a ratat, iar unii cititori se întrebau cum să facă unul pentru propriul site, așa că am crezut că aș împărtăși.
Vom folosi jQuery pentru a lipi bara în partea de sus a ecranului - dar numai după un anumit punct. Voi face toate acestea în tema WordPress implicită - Twenty Eleven, deși, desigur, poate fi aplicată oricărei teme sau site-uri pe care înțelegeți suficient cum să modificați.
HTML-ul
În primul rând, deschideți temele header.php și identificați bara de navigare pe care o vom face lipicioasă. Așa cum am spus, codul de mai jos este pentru implicit douăzeci și unsprezece; a ta poate varia.
Mai întâi, adăugați un nou container DIV care înconjoară această întreagă secțiune a NAV.
De asemenea, hai să mutăm bara de căutare implicită aici. Veți observa că este adăugat în mod implicit în partea dreaptă sus a temei; găsiți linia și lipiți-o în secțiunea de navigare. Ștergeți toate celelalte instanțe ale acestuia în acest fișier.
Dacă salvați și actualizați acum, veți vedea că formularul de căutare nu apare de fapt în bara de navigare - este afișat în partea din dreapta sus. Asta pentru că a fost poziționat absolut în CSS și vom șterge totul într-o secundă.
CSS
Deschideți fișierul principal stil.css și găsiți secțiunea pentru formularul de căutare:
#branding #searchform ...
Înlocuiți orice este în interior (ar trebui să fie capabil de aproximativ patru linii, inclusiv unele poziționare absolută) cu acest lucru:
#branding #searchform float: left; fundal: alb; margine: 7px;
Simțiți-vă liber să reglați culoarea sau marginea. Schimbați plutitorul dacă preferați să apară în partea dreaptă a barei. În această temă, căutarea este setată să se extindă atunci când utilizatorul face clic în interiorul acesteia; acest lucru nu face parte din acest tutorial, dar puteți vedea un efect similar asupra căutării noastre în MakeUseOf.
jQuery
Dacă vă întrebați de ce folosim jQuery pentru a face acest lucru, este simplu: CSS este fix și nu poate fi ajustat dinamic. În timp ce am putea folosi CSS pentru a face un antet lipicios, ar fi trebuit să fie elementul de top al paginii. Problema pe care o avem este că meniul nostru nu este elementul de vârf, deci nu putem începe să fie lipicios. Aici se utilizează jQuery; putem verifica când utilizatorul trece un anumit punct; apoi, și numai atunci, fă-o lipicioasă.
Începeți prin adăugarea jQuery la tema dvs. Este posibil ca tema dvs. să fie deja încărcată; dacă nu, nu vă faceți griji. Puteți să-l enqueue, adăugând următorul cod la funcțiile dvs..php, după cum urmează:
Sau puteți doar să o ocoliți pe WordPress și să o hardcoreze în fișierul antet. Undeva în capul tău, trebuie doar să adaugi această linie:
Dacă utilizați prima metodă, va fi încărcată în noConflict mod, ceea ce înseamnă că va trebui să utilizați “jQuery” în codul dvs. pentru a accesa funcțiile jQuery. Dacă utilizați a doua metodă de a adăuga direct la antetul dvs., puteți utiliza accesoriul standard jQuery din $. Voi presupune a doua metodă din codul de mai jos.
Deci, pentru a adăuga un cod jQuery real, plasați următoarele undeva la sfârșitul paginii header.php - Mi-am pus a mea chiar in fata
Primul lucru pe care scenariul îl face este să dau seama de unde începe bara de navigare și își amintește această valoare. În al doilea rând, ne atașăm la evenimentul de defilare - aceasta înseamnă că de fiecare dată când utilizatorul derulează pagina, putem rula acest bloc de cod. Când rulează codul, există două moduri de a merge:
1. Dacă fereastra a trecut prin bara de navigare, facem un CSS fix (acesta este “lipicios” parte).
2. Dacă partea superioară a ferestrei este mai mare decât poziția inițială a barei de navigare (adică utilizatorul a derulat din nou înapoi), l-am readus în poziția statică implicită.
Există două puncte pe care vreau să le atrag atenția:
- +288 este acolo pentru a repara bug-ul de a obține o poziție incorectă; fără ea, bara își declanșează prea curând starea lipicioasă - eliminați-o pentru a vedea ce vreau să spun. Acest lucru nu va fi necesar în toate temele și, probabil, puteți găsi o soluție mai bună.
- Pentru a remedia problema modificării lățimii barei de navigare atunci când aceasta se află în starea lipicioasă, editați stil.css, linia 550, pentru a citi 1000px in loc de 100%
Asta este, bara de navigare ar trebui să fie acum lipicioasă.
Rezumat:
Înlocuirea completă header.php cod pentru acest tutorial pot fi găsite la acest pastebin; și înlocuitorul style.css aici . Speram că te-ai bucurat de acest mic tutorial; dacă aveți probleme, postați în comentarii sau întrebați-vă la răspunsurile MakeUseOf, dar vă rugăm să rețineți că faceți site-ul dvs. accesibil publicului, pentru a mă putea descurca și pentru a mă uita singur. Dacă sunteți nou aici, asigurați-vă că verificați toate celelalte articole de blogging și dezvoltare web.
Explorați mai multe despre: Web Design, Dezvoltare Web, Teme Wordpress.