Jeste li ikada bili na web lokaciji i otkrili da je navigacijski meni uvijek vidljiv na vrhu?

U principu, navigacijski se izbornici prikazuju na takav način da nestaju prilikom pomicanja stranice. Uvijek vidljivi navigacijski izbornici lebde i takvi su bez obzira na to kako se korisnik pomiče prema dolje.

U ovom tutorialu ćemo vam pokazati kako lako stvoriti plutajući meni na svom WordPress blogu.

Ako još niste kreirali web stranicu ili blog na WordPress-u, pozivamo vas da konsultujete Kako instalirati WordPress blog u 7 sljedećih koraka, Kako pronaći, instalirati i aktivirati WordPress temu na svom blogu

Ako je gotovo, uđimo u ono što nas se tiče danas.

1 metoda: Kako dodati plutajući meni na WordPressu pomoću dodatka

Ova metoda je lakša i brza. Ako još niste postavili navigacijske menije, možete naučite kako to učiniti.

Prvo što trebate je instalirati i aktivirati dodatak " Lepljivi meni (ili bilo šta!) Na skrolu ". Ako ne znate kako instalirati dodatak, vi možete pročitati naš vodič.

Nakon aktivacije morate posjetiti " Podešavanja »Lepljiv meni Da biste konfigurirali postavke ovog dodatka.

Prvo morate unijeti CSS ID-ove za navigacijski meni koji želite plutati.

Za pronalaženje korištenog CSS-a morat ćete upotrijebiti alat "pregleda".

Idite na svoju web stranicu i pomaknite miša na navigacijski meni. Nakon toga morate desnom tipkom miša kliknuti i odabrati "Uvidi".

Idite dalje otkrivanjem Kako prilagoditi WordPress tema sa žutim olovka

Ovo će (po defaultu) podeliti ekran vašeg pregledača i moći ćete da vidite izvorni kod vašeg navigacijskog menija. Morate pronaći liniju sličnu ovoj:

U ovom primjeru, CSS ID našeg navigacijskog izbornika je " site Navigation ".

Samo naprijed i unesite CSS ID izbornika u postavke dodatka na sljedeći način "# site-navigation".

Sljedeća opcija u postavkama dodatka je postavljanje prostora između vrha zaslona i plutajućeg navigacijskog menija. Ovu postavku možete koristiti ako se vaš izbornik preklapa sa stavkom koju ne želite sakriti. Inače, zanemarite ovu postavku.

Nakon toga trebate kliknuti na okvir neposredno pored opcije: "Check Bar Admin". To omogućava dodatku da doda malo prostora za WordPress alatnu traku koja je dodana prijavljenim korisnicima.

Sljedeća opcija na stranici s postavkama omogućuje vam sakrivanje navigacijskog menija ako korisnik posjećuje vašu web stranicu pomoću manjeg ekrana, poput mobilnog uređaja.

Možete testirati kako se ovaj izbornik prikazuje na mobilnim uređajima i tablet uređajima. Ako vam se ne sviđa, možete dodati 780px na ovu opciju.

Otkrijte i vi Kako stvoriti odgovorne meni za mobilne WordPress

Ne zaboravite kliknuti na " Spremite postavke Da biste spremili svoje izmene.

Sada možete posjetiti svoju web stranicu da vidite svoj plutajući navigacijski meni u akciji.

2. metod: Kako ručno dodati navigacijski meni

Ova metoda zahtijeva dodavanje prilagođenog CSS koda vašem WordPress tema.

Prije svega morate posjetiti " Izgled> Prilagodi Da biste pokrenuli WordPress Customizer.

Kliknite na Dodatni CSS Zatim u lijevo okno dodajte ovaj CSS kôd.

# site-navigation {background: #fff; visina: 60px; z-index: 170; marža: 0 auto; border-bottom: 1px solid #dadada; Širina: 100%; položaj: fiksni; top: 0; lijevo: 0; desno: 0; tekstualno poravnanje: centar; }

Zamijeni " # Site Navigation Po identifikatoru vašeg navigacijskog menija i kliknite na gumb « rekord ".

Sada možete posjetiti svoju web stranicu da vidite svoj plutajući navigacijski meni u akciji.

Ako se vaš navigacijski meni obično pojavi nakon zaglavlja web stranice, ovaj CSS kôd može preklapati naslov web stranice i zaglavlje.

To se lako može prilagoditi dodavanjem margine na područje zaglavlja pomoću sljedećeg koda:

.site-branding {margin-top: 60px; }

Ovdje završava naš vodič, sada ćete moći stvoriti ili dodati plutajući meni na svojoj web stranici.

Ako tražite druge WordPress plugins koji će vam omogućiti da upravljate menijima, evo nekih WordPress plugins premium posvećen ovom zadatku. 

1. Meni Hero

Ovaj dodatak vam omogućava da kreirate vlastiti prilagođeni WordPress meni u nekoliko prilično jednostavnih koraka. Konkretno, omogućava vam da jednostavno i intuitivno kreirate elegantan i profesionalan WordPress meni. Od najkompleksnijeg mega menija bogatog funkcijama, do najjednostavnijeg padajućeg menija, WordPress dodatak HeroMenu postavlja bilo koji tip izbornika i pokreće ga za nekoliko minuta.

U pogledu funkcija nudi između ostalog: savršeno funkcionalan na PC-u, tabletu i pametnom telefonu, jednostavan za upotrebu, prilagodljiv sadržaj, prilagođeni CSS za dodavanje vlastitih stilova menija, dizajner mega menija, podržani preglednici: Chrome, Firefox, Safari , Opera, IE9 i još mnogo toga.

download | Demo | web hosting

2. Slick Menu

Slick Menu nije samo dodatak za meni za WordPress. Može se koristiti za stvaranje više nivoa menija na neograničen način, kao i bočne trake s bogatim sadržajem, više opcija stila i animiranim efektima.

Svaki nivo izbornika je prilagodljiv bojama pozadine, slikama, video zapisima, prilagođenim fontovima i još mnogo toga. Ovaj dodatak u potpunosti reagira i ima preko 45 animacija za stavke izbornika.

download | Demo | web hosting

3. 8Degree Fly meni

8Degree Fly Menu je a WordPress dodatak premium koji vam omogućava da svojoj web stranici dodate platneni meni kako biste joj dali izgled koji ističe vaše informacije na jednostavan način. Koristi zadanu funkciju WordPress menija da kreira svoje menije.

Moći ćete dodati dodatne elemente u zadane stavke izbornika, poput ikona, slogana izbornika, zaglavlja pseudo-grupiranja i dugog opisa. Takođe dolazi sa WYSIWYG uređivačem koji će vam pomoći da shvatite svoj dugi opis na jednostavan način za upotrebu.Ovim ovim uređivačem možete koristiti i kratke kodove.

download | Demo | web hosting

Ostali preporučeni resursi

Ako želite ići dalje u kreiranju ili prilagođavanju menija svog bloga ili vaše web stranice, također predlažemo da se konzultirate u donjim vezama.

• Kako dati stil svom navigacionom meniju
•  Kako dodati naslov atribut u WordPress menijima
• 8 WordPress plugins za kreiranje megamenu na vašem blogu

zaključak

Evo! To je sve za ovaj vodič, nadam se da će vam omogućiti da dodate plutajući meni na svoj WordPress blog. Pozivamo vas da ovaj članak podijelite sa svojim prijateljima na svojim društvenim mrežama.

Ako imate prijedloge ili primjedbe, oni će biti dobrodošli. A ako ste novi u WordPressu, konsultujte ovo resurs.

...