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