Jeste li ikada bili na web mjestu i otkrili da je navigacijski izbornik uvijek vidljiv na vrhu?

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

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

Ako još niste kreirali web stranicu ili blog na WordPressu, pozivamo vas da pogledate Kako instalirati WordPress blog u 7 sljedećih koraka, Kako pronaći, instalirati i aktivirati WordPress temu na svoj blog

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

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

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

Prvo što trebate je instalirati i aktivirati dodatak " Sticky Izbornik (ili ništa!) Mi Pomaknite ”. Ako ne znate kako instalirati dodatak, vi možete pročitati naš vodič.

Nakon aktivacije morate posjetiti " Postavke »Ljepljiv izbornik Za konfiguriranje postavki ovog dodatka.

Prvo morate unijeti CSS ID-ove navigacijskog izbornika koji želite plutati.

Morat ćete upotrijebiti alat za pregled "preglednika" kako biste pronašli korišteni CSS.

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

Idite dalje otkrivanjem Kako prilagoditi WordPress tema sa žutim olovka

To će (prema zadanom) podijeliti zaslon vašeg preglednika i moći ćete vidjeti izvorni kod svog navigacijskog izbornika. Morate pronaći liniju sličnu ovoj:

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

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

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

Nakon toga morate kliknuti na okvir pored opcije: "Provjeri administratora trake". To dopušta dodatku da doda malo prostora za WordPress alatnu traku koja se dodaje prijavljenim korisnicima.

Sljedeća opcija na stranici s postavkama omogućuje vam sakrivanje navigacijskog izbornika ako korisnik posjećuje vaše web mjesto pomoću manjeg zaslona, ​​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 odgovarajući izbornik za mobilne WordPress

Ne zaboravite kliknuti na " Spremite postavke Da biste spremili promjene.

Sada možete posjetiti svoju web stranicu kako biste vidjeli svoj plutajući navigacijski izbornik u akciji.

2. metoda: Kako ručno dodati navigacijski izbornik

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 navigacija {background: #fff; visina: 60px; z-indeks 170; margin: 0 auto; granica dna: 1px krutina #dadada; Širina: 100%; Položaj: fiksni; vrh: 0; lijevo: 0; desno: 0; text-align: center; }

Zamijeni " # Site Navigation Prema identifikatoru vašeg navigacijskog izbornika i kliknite na gumb « Prijaviti ".

Sada možete posjetiti svoju web stranicu kako biste vidjeli svoj plutajući navigacijski izbornik u akciji.

Ako se vaš navigacijski izbornik obično prikazuje nakon zaglavlja web mjesta, ovaj CSS kôd mogao bi se preklapati s naslovom i zaglavljem web mjesta.

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

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

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

Ako tražite druge WordPress plugins koji će vam omogućiti upravljanje izbornicima, evo nekih WordPress plugins premija posvećena ovom zadatku. 

1. Izbornik junaka

Ovaj vam dodatak omogućuje stvaranje vlastitog prilagođenog WordPress izbornika u nekoliko prilično jednostavnih koraka. Konkretno, omogućuje vam jednostavno i intuitivno stvaranje elegantnog i profesionalnog WordPress izbornika. Od najsloženijeg mega izbornika bogatog značajkama, do najjednostavnijeg padajućeg izbornika, WordPress plugin HeroMenu postavlja bilo koju vrstu izbornika i pokreće ga za nekoliko minuta.

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

Preuzmite | demo | Web hosting

2. Slick izbornik

Izbornik Slick nije samo dodatak za izbornik za WordPress. Može se koristiti za stvaranje više razina izbornika na neograničen način, kao i bočne trake s bogatim sadržajem, višestrukim opcijama stila i animiranim efektima.

Svaka se razina izbornika može prilagoditi bojama pozadine, slikama, videozapisima, prilagođenim fontovima i još mnogo toga. Ovaj dodatak u potpunosti reagira i ima preko 45 animacija za stavke izbornika.

Preuzmite | demo | Web hosting

3. 8Degree Fly izbornik

8Degree Fly Menu je a WordPress plugin premium koji vam omogućuje da svojoj web stranici dodate platneni izbornik kako biste joj dali izgled koji na jednostavan način ističe vaše informacije. Za izradu svojih izbornika koristi zadanu WordPress značajku izbornika.

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

Preuzmite | demo | Web hosting

Ostali preporučeni resursi

Ako želite ići dalje u kreiranju ili prilagođavanju izbornika bloga ili web stranice, predlažemo vam da potražite veze u nastavku.

• Kako dati stil navigacijskim izbornicima
•  Kako dodati atribut naslov u WordPress izbornika
• 8 WordPress dodataka za stvaranje megamenu na svom blogu

Zaključak

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

Ako imate prijedloge ili primjedbe, bit će dobrodošle. A ako ste novi u WordPressu, posavjetujte se s tim izvor.

...