Share
Deci le-ați văzut pe site-urile altor persoane și doriți să știți cum puteți avea și voi unul? Meniul de navigare derulant văzut pe multe site-uri este foarte ușor de reprodus în WordPress. Ajutați cititorii să iasă, să-i dați clic pe meniu din orice punct al paginii. Iată cum…
Primul lucru este primul: trebuie să existe un meniu pentru ao afișa pe pagină. Să creăm un nou, numit "topnavigation“. Iată codul cel mai de bază pentru a configura acel meniu în dvs. functions.php fişier:
Accentsconagua
register_nav_menus (array ('topnavigation' => __ ('Top Navigation', 'NAME TEME NAME GOES HERE'))); Dacă ai deja un a register_nav_menus setați funcția, adăugați funcția "topnavigation"linia de meniu la funcția respectivă.
Du-te în tabloul de bord, deschideți fila meniurilor. Creați un nou meniu și alocați-l spațiului pe care tocmai l-ați numit "Top Navigation". Apoi completați meniul cu paginile. Tocmai am plecat pentru o locuință, un magazin, evenimente și un blog - folosiți ceea ce vă place.
Trebuie să apelați meniul dvs. chiar în partea superioară a corpului dvs. în header.php fişier. Este foarte important să înfășurați meniul într-un ambalaj div din propria voastră alegere. Am ales a div denumit topnavigation. Va trebui să facem totul în asta div mutați-vă cu pagina mai târziu. Acesta este cel mai simplu mod de a face acest lucru.
Utilizați următorul cod în header.php:
"topnavigație")); ?>
Acest lucru ar trebui să vă dea ceva care arată astfel pe pagina dvs.:
Desigur, tema ta va fi diferită. Mina este doar o instalare de bază underscores.me cu o rețea simplă de la Get Skeleton.
După aceea putem începe stilul. Ca să vedem ce facem, să începem prin adăugarea unui pic de CSS pentru a da o culoare de fundal și dorim ca acesta să aibă o lățime de 100%, astfel încât să nu pară ciudat atunci când o facem derulată într-o clipă.
Utilizați următorul cod în style.css sau oricare ar fi numita foaia de stil:
#topnavigation width: 100%; fundal-culoare: # 999;
Actualizați-vă pagina și veți vedea (dacă ați urmat) acest lucru:
Acum vrem să ne asigurăm că legăturile noastre intră în centrul acelui bar gri. Deci vom crea un element nav în jurul meniului de navigare:
Apoi trebuie să oferim acelui stil nou. Putem face acest lucru așa:
#topnavigation nav width: 940px; // lățimea containerului dvs. div ar putea fi marjă diferită: 0 auto; #topnavigație li afișare: inline; padding: 10px; margine: 20px 0;
Aceste două lucruri împreună vor face ca meniul nav din pagina dvs. să arate astfel:
În cele din urmă, suntem gata să facem parcurgerea ei. Cel mai bun mod de a face acest lucru este să-l fixați în partea superioară a ferestrei și apoi să faceți "hover" peste toate celelalte elemente de pe pagină.
Actualizați-vă #topnavigation stil să arate astfel:
#topnavigation width: 100%; fundal-culoare: # 999; poziție: fixă; // Așezați-l în partea de sus a ferestrei z-index: 1; // Faceți float peste toate celelalte elemente înălțime: 50px; // ne dă un punct de referință pentru lucrul final
Dar dacă vă reîncărcați fereastra, veți observa că, deoarece navigația plutește, a permis întregului conținut să meargă sub ea.
Pentru a obține acest lucru, adăugați o marjă în partea de sus a containerului div cu orice altceva în ea. În șablonul meu, asta div se numește #pagină. Aș adăuga acest lucru în fișierul meu CSS:
#page padding-top: 60px; // Înălțimea divului meu topnavigation plus un plus de umplutură suplimentară pentru plăcerea vizuală
Acest lucru vă va lăsa în felul următor:
După aceea, puteți să vă simțiți liber să schițezi navigația în conținutul inimii tale!
