Ați parcurs vreodată un site web și ați constatat că un meniu de navigare este întotdeauna vizibil în partea de sus?
În principiu, meniurile de navigare sunt afișate în așa fel încât să dispară atunci când derulați pagina. Meniurile de navigare mereu vizibile plutesc și sunt așa, indiferent de modul în care utilizatorul derulează în jos.
În acest tutorial, vă vom arăta cum puteți crea cu ușurință un meniu plutitor pe blogul dvs. WordPress.
Dacă nu ați creat încă un site web sau un blog pe WordPress, vă invităm să consultați Cum se instalează un blog WordPress în 7 pași în continuare, Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs.
Dacă se face, hai să intrăm în ceea ce ne privește astăzi.
Metoda 1: Cum să adăugați un meniu plutitor pe WordPress folosind un plugin
Această metodă este mai ușoară și rapidă. Dacă nu ați configurat încă meniurile de navigare, puteți învață cum să o faci.
Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul " Meniu Sticky (sau ceva!) Noi Derulează “. Dacă nu știți cum să instalați un plugin, dumneavoastră poate citi tutorialul nostru.
După activare, trebuie să vizitați " Setări »Meniu lipicios Pentru a configura setările acestui plugin.
Mai întâi, trebuie să introduceți ID-urile CSS pentru meniul de navigare pe care doriți să îl plutiți.
Va trebui să utilizați instrumentul „inspectați” al browserului pentru a găsi CSS-ul folosit.
Accesați site-ul dvs. web și mutați mouse-ul în meniul de navigare. După aceea, trebuie să faceți clic dreapta și să selectați „Inspectați”.
Mergeți mai departe descoperind Cum de a personaliza o temă WordPress cu galben Creion
Aceasta va împărți (implicit) ecranul browserului dvs. și veți putea vedea codul sursă din meniul dvs. de navigare. Trebuie să găsiți o linie similară cu aceasta:
În acest exemplu, ID-ul CSS din meniul nostru de navigare este " site-ul de navigare ".
Continuați și introduceți ID-ul CSS al meniului în setările pluginului, după cum urmează „# site-navigation”.
Următoarea opțiune din setările pluginului este să setați spațiul dintre partea de sus a ecranului și meniul de navigare plutitor. Puteți utiliza această setare dacă meniul dvs. se suprapune cu un element pe care nu doriți să îl ascundeți. În caz contrar, ignorați această setare.
După aceea, trebuie să faceți clic pe caseta din dreptul opțiunii: „Verificați administratorul barei”. Acest lucru permite pluginului să adauge spațiu pentru bara de instrumente WordPress care este adăugată pentru utilizatorii conectați.
Următoarea opțiune din pagina de setări vă permite să ascundeți meniul de navigare dacă un utilizator vă vizitează site-ul web utilizând un ecran mai mic, cum ar fi un dispozitiv mobil.
Puteți testa modul în care acest meniu este afișat pe dispozitive mobile și tablete. Dacă nu vă place, puteți adăuga 780 px la această opțiune.
Descoperă și tu Cum de a crea un meniu receptiv pentru WordPress mobil
Nu uitați să faceți clic pe „ Salvați setările Pentru a salva modificările.
Acum puteți vizita site-ul dvs. web pentru a vedea meniul plutitor de navigație în acțiune.
Metoda 2: Cum se adaugă manual un meniu de navigare
Această metodă necesită adăugarea unui cod CSS personalizat la dvs WordPress temă.
În primul rând, trebuie să vizitați " Aspect> Personalizare Pentru a lansa personalizatorul WordPress.
Faceți clic pe CSS suplimentare În panoul din stânga, apoi adăugați acest cod CSS.
# site-navigation {fundal: #fff; înălțime: 60px; z-index: 170; margine: 0 auto; frontală de fundal: 1px solid #dadada; lățime: 100%; Poziția: fix; sus: 0; stânga: 0; dreapta: 0; text-align: centru; }
Înlocuiți " # Site-ul de navigare Prin identificatorul meniului dvs. de navigare și faceți clic pe butonul « Registru ".
Acum puteți vizita site-ul dvs. web pentru a vedea meniul plutitor de navigare în acțiune.
Dacă meniul dvs. de navigare apare în mod normal după antetul site-ului, acest cod CSS ar putea suprapune titlul și antetul site-ului web.
Acest lucru poate fi ajustat cu ușurință adăugând o marjă pe zona antetului folosind următorul cod:
.site-branding {margin-top: 60px; }
Aici se termină tutorialul nostru, acum veți putea crea sau adăuga un meniu flotant pe site-ul dvs. web.
Daca esti in cautarea altora WordPress plugin-uri care vă va permite să gestionați meniurile, iată câteva WordPress plugin-uri premium dedicat acestei sarcini.
1. Meniul eroilor
Acest plugin vă permite să vă creați propriul meniu WordPress personalizat în câțiva pași destul de simpli. În special, vă permite să creați ușor și intuitiv un meniu WordPress elegant și profesional. De la cel mai complex mega meniu, bogat în funcții, până la cel mai simplu meniu derulant, WordPress plug-in HeroMenu configurați orice tip de meniu și activați-l în câteva minute.
În ceea ce privește funcțiile, acesta oferă, printre altele, perfect funcțional pe PC, tabletă și smartphone, ușor de folosit, conținut personalizabil, CSS personalizat pentru a adăuga propriile stiluri de meniu, mega designer de meniuri, browsere acceptate: Chrome, Firefox, Safari , Opera, IE9 și multe altele.
Descarca | Demo | web hosting
2. Micsorează meniul
Micsorează meniul nu este doar un plugin de meniu pentru WordPress. Poate fi folosit pentru a crea mai multe niveluri de meniu într-un mod nelimitat, precum și bare laterale cu conținut bogat, mai multe opțiuni de stil și efecte animate.
Fiecare nivel de meniu este personalizabil cu culori de fundal, imagini, videoclipuri, fonturi personalizate și multe altele. Acest plugin este complet receptiv și are peste 45 de animații pentru elementele de meniu.
Descarca | Demo | web hosting
3. 8Degree Fly Menu
8Degree Fly Menu este a WordPress plug-in premium care vă permite să adăugați un meniu canvas pe site-ul dvs., pentru a-i oferi un aspect care vă evidențiază informațiile într-un mod simplu. Folosește caracteristica implicită de meniu WordPress pentru a-și crea meniurile.
Veți putea adăuga elemente suplimentare la elementele implicite din meniu, cum ar fi pictograme, sloganuri de meniu, un antet de pseudo-grupare și o descriere lungă. De asemenea, vine cu un editor WYSIWYG pentru a vă ajuta să înțelegeți descrierea lungă într-un mod ușor de utilizat. Cu acest editor puteți utiliza și shortcodes.
Descarca | Demo | web hosting
Alte resurse recomandate
Dacă doriți să mergeți mai departe în crearea sau personalizarea meniurilor blogului sau site-ului dvs. web, vă sugerăm să consultați și linkurile de mai jos.
- Cum să dați stil meniurilor de navigare
- Cum se adaugă un atribut titlu în meniuri WordPress
- Pluginurile 8 WordPress pentru a crea un megamenu pe blogul tău
Concluzie
Aici ! Gata pentru acest tutorial, sper că vă va permite să adăugați un meniu plutitor pe blogul dvs. WordPress. Vă invităm la împărtășește acest articol cu prietenii de pe rețelele de socializare.
Dacă aveți sugestii sau observații, acestea vor fi binevenite. Și dacă ești nou la WordPress, consultați acest lucru resursă.
...
bonjour,
În primul rând, vă mulțumesc pentru acest tutorial care face treaba perfect!
Dar, oricât de mult am căutat pe net, nu am putut găsi răspunsul la întrebarea mea:
Cum fac, odată ce meniul flotant este creat (în CSS sau cu extensia, orice), astfel încât secțiunile mele să apară după meniu și nu în spatele meniului?
Este deosebit de enervant în cazul meu, deoarece este o singură pagină, iar elementele din meniul meu se referă, așadar, la secțiuni ale paginilor, care de fiecare dată merg în spatele meniului meu ...
te vorbește?
Vă mulțumim anticipat!
Mă întrebam dacă este posibil să facem cuprinsul unei pagini „lipicios” ...
bonjour,
Nu a fost testat încă. Nu vă pot răspunde.
Bună ziua; hi
Am încercat cu o temă descărcată (wallstreet), dar, în timp ce urmez instrucțiunile dvs., nimic nu se schimbă ... Nu știu ce lipsește ...
Îmi place și aș vrea să o pot folosi ...
mulțumesc
Raul
hi,
Încercați să dezactivați toate celelalte plugin-uri WordPress și urmăriți ecranul următor.
Vă mulțumim pentru tutorialul dvs., simplu, așa cum salut totul este să știți!
bonjour,
Mă bucur că am fost de ajutor.