Come fare la tua barra di intestazione appiccicosa come MakeUseOf

Circa un mese fa, abbiamo introdotto un nuovo elemento di interfaccia per MakeUseOf: una barra di navigazione e di ricerca mobile. Il feedback che stiamo ottenendo è quasi del tutto positivo, il traffico di ricerca interno è salito alle stelle e alcuni lettori hanno chiesto come realizzarne uno per il proprio sito, quindi ho pensato di condividere.

Useremo jQuery per incollare la barra nella parte superiore dello schermo, ma solo oltre un certo punto. Farò tutto questo nel tema predefinito di WordPress - Twenty Eleven, anche se ovviamente può essere applicato a qualsiasi tema o sito web che tu abbia sufficientemente capito come modificare.

L'HTML

Per prima cosa, apri i temi header.php e identifica la barra di navigazione che renderemo appiccicosi. Come ho detto, il codice sotto riportato è per il ventunesimo di default; il tuo può variare.

Innanzitutto, aggiungi un nuovo contenitore DIV che circonda l'intera sezione NAV.

Inoltre, spostiamo la barra di ricerca predefinita qui. Noterai che è aggiunto di default in alto a destra del tema; trova la linea e incollalo nella nostra sezione di navigazione. Elimina tutte le altre istanze in questo file.

Se salvi e aggiorni ora, vedrai che il modulo di ricerca in realtà non compare nella barra di navigazione, ma è ancora visibile in alto a destra. Questo perché è stato posizionato assolutamente con i CSS, e cancelleremo tutto in un secondo.

Il CSS

Apri il file style.css principale e trova la sezione per il modulo di ricerca:

 #branding #searchform ...

Sostituisci ciò che è dentro (dovrebbe essere in grado di circa quattro righe, incluso un posizionamento assoluto) con questo:

 #branding #searchform float: left; sfondo: bianco; margine: 7px; 

Sentiti libero di regolare il colore o il margine. Cambia il galleggiante se preferisci che sia apparso a destra della barra. In questo tema, la ricerca è impostata per espandersi quando l'utente fa clic al suo interno; questo è fuori dallo scopo di questo tutorial, ma puoi vedere un effetto simile sulla nostra Ricerca MakeUseOf.

jQuery

Se ti stai chiedendo perché stiamo usando jQuery per farlo, è semplice: i CSS sono corretti e non possono essere regolati dinamicamente. Mentre potremmo usare il CSS per creare un'intestazione appiccicosa, dovrebbe essere l'elemento principale della pagina. Il problema che abbiamo è che il nostro menu non è l'elemento principale, quindi non possiamo iniziare con l'essere appiccicoso. Qui è dove viene usato jQuery; possiamo controllare quando l'utente supera un certo punto; allora, e solo allora, rendilo appiccicoso.

Inizia aggiungendo jQuery al tuo tema. Il tema potrebbe già averlo caricato; se no, non preoccuparti. Puoi accodarlo, aggiungendo il seguente codice al tuo functions.php, in questo modo:

Oppure puoi semplicemente bypassare completamente WordPress e inserirlo nel file di intestazione. Da qualche parte nella tua testa, aggiungi questa riga:

Se usi il primo metodo, verrà caricato noConflict modalità, il che significa che dovrai usarlo “jQuery” nel tuo codice per accedere alle funzioni di jQuery. Se si utilizza il secondo metodo per aggiungerlo direttamente all'intestazione, è possibile utilizzare l'accessor jQuery standard di $. Assumerò il secondo metodo nel codice qui sotto.

Quindi, per aggiungere del codice jQuery reale, posiziona il seguente da qualche parte alla fine del tuo header.php - Ho messo il mio proprio prima del