Share
Quindi li hai visti sui siti Web di altre persone e vuoi sapere come puoi averne uno anche tu? Il menu di navigazione a scorrimento visualizzato su molti siti Web è davvero facile da replicare in WordPress. Aiuta i tuoi lettori, fagli fare clic sul menu da qualsiasi punto della pagina. Ecco come…
Per prima cosa, hai bisogno di un menu per poterlo visualizzare sulla pagina. Creiamo uno nuovo chiamato 'topnavigation'. Ecco il codice più semplice per configurare quel menu nel tuo functions.php file:
Accentsconagua
register_nav_menus (array ('topnavigation' => __ ('Navigazione in alto', 'IL TUO NOME TEMA VA QUI'))); Se hai già un register_nav_menus funzione impostata, aggiungi l 'topnavigation'linea di menu per quella funzione.
Vai nella tua dashboard, apri la scheda dei menu. Crea un nuovo menu e assegnalo allo spazio che hai appena chiamato "Navigazione superiore". Quindi riempire il menu con le pagine. Sono appena andato per una casa, un negozio, eventi e blog - tu usi quello che vuoi.
Devi chiamare il tuo menu nella parte superiore del tuo corpo in header.php file. È molto importante avvolgere quel menu in un wrapper div di tua scelta. Ho scelto un div chiamato topnavigation. Dovremo fare tutto in questo div spostati con la pagina più tardi. Questo è il modo più semplice per farlo.
Utilizzare il seguente codice in header.php:
'topnavigation')); ?>
Questo dovrebbe darti qualcosa di simile alla tua pagina:
Certo, il tuo tema sarà diverso. Il mio è solo un semplice underscore.me installazione con una semplice griglia da Get Skeleton.
Dopo di che possiamo iniziare lo styling. In modo che possiamo vedere cosa stiamo facendo, iniziamo aggiungendo un po 'di CSS per dargli un colore di sfondo e vogliamo che sia largo al 100% in modo che non sembri strano quando lo facciamo scorrere in un attimo.
Utilizzare il seguente codice in style.css o qualunque sia il tuo foglio di stile chiamato:
#topnavigation width: 100%; background-color: # 999;
Aggiorna la tua pagina e tu (se lo hai seguito) vedi questo:
Ora vogliamo essere sicuri che i nostri link siano al centro di quella barra grigia. Quindi creeremo un elemento nav attorno al menu di navigazione:
Quindi dobbiamo dare un po 'di stile al nuovo nav. Possiamo farlo in questo modo:
#topnavigation nav width: 940px; // la larghezza del contenitore div potrebbe essere un margine diverso: 0 auto; #topnavigation li display: inline; imbottitura: 10px; margine: 20px 0;
Queste due cose insieme faranno apparire il menu di navigazione nella tua pagina in questo modo:
Finalmente, siamo pronti a farlo scorrere. Il modo migliore per farlo è correggerlo nella parte superiore della finestra e quindi farlo 'passare il mouse' sopra tutti gli altri elementi della pagina.
Aggiorna il tuo #topnavigation stile per assomigliare a questo:
#topnavigation width: 100%; background-color: # 999; posizione: fissa; // incollalo nella parte superiore della finestra z-index: 1; // Fatelo fluttuare sopra tutti gli altri elementi height: 50px; // ci fornisce un punto di riferimento per l'ultima cosa
Ma se ricarichi la tua finestra, noterai che, poiché la navigazione è mobile, ha permesso a tutti gli altri contenuti di andare al di sotto.
Per aggirare questo, aggiungi un margine nella parte superiore del contenitore div con tutto il resto. Nel mio modello, quello div è chiamato #pagina. Quindi lo aggiungerò al mio file CSS:
#page padding-top: 60px; // L'altezza del mio div topnavigation più un po 'di padding extra per il piacere visivo
Questo ti lascerà con questo:
Dopodiché, puoi sentirti libero di modificare la navigazione a tuo piacimento!
