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.Cum se creează un meniu flotant wordpress 1

Î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.

Plugin pentru meniul lipicios Wordpress

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.

Plugin de meniu lipicios Wordpress

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

Inspectați un tutorial de cod WordPress

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.

Meniul plutitor Wordpress

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.

Personalizator Wordpress CSS suplimentar

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.

Plugin meniu erou Wordpress receptiv pentru meniul mega

Î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.

Meniu vertical cu meniu Slick Wordpress adaptabil

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.

8Degree fly menu responsive off meniul plugin pentru wordpress

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.

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ă.

...