Napravite fiksni meni kada se krećete po stranici. Ispravljen meni prilikom pomeranja stranice. Kako popraviti gornji meni u WordPress-u

Koji se sve češće nalaze na stranicama blogova i drugih resursa. Upotreba ovakvih navigacijskih traka je sasvim opravdana. Jedan od glavnih razloga za aktivno korištenje ovih jQuery dodataka je taj što je meni uvijek na dohvat ruke posjetitelja, čak i ako se nalazi na dnu stranice. Osim toga, fiksni meni zauzima malo prostora i ne odvlači pažnju sa glavnog sadržaja. Uopšteno govoreći, fiksni meni poboljšava upotrebljivost sajta.
Sastavio sam kolekciju najboljih, po mom mišljenju, besplatnih jQuery dodataka za implementaciju fiksnog menija. Pokušao sam osigurati da svaki od dodataka bude jedinstven na neki način, tako da se bilo koji dodatak iz odabira može koristiti posebno u vašem projektu. U kolekciji možete pronaći i jednostavne i složenije dodatke sa animacijom itd.
Ako vam je potreban vrlo jednostavan fiksni meni, nešto poput toga kako smo implementirali ljepljivi panel sa društvenim gumbima, možete bez jQuery dodataka, jer učitavanje stranice sa skriptama nije baš dobro, ali o tome ćemo govoriti u sljedećim člancima. Pretplatite se na naš kanal ili stranice kako ne biste propustili zanimljive materijale.
Dakle. Evo 6 jQuery dodataka za kreiranje fiksnog menija.

Auto-Hide Sticky HeaderjQuery dodatak za fiksnu navigaciju, koji radi na sličnom principu kao i gornja skripta, ali manje glatko, iako je, na prvi pogled, malo lakši. Nažalost, ne mogu reći da je navigacija potpuno prilagodljiva, jer na malim ekranima stavke menija postaju samo brojevi, što je vrlo čudno.

Na efektima zaglavlja pomicanja Moćan jQuery dodatak za fiksnu navigacijsku traku. Možete postaviti određene segmente na stranici prilikom pomicanja, po dolasku do kojih se panel transformiše i može se potpuno promijeniti izgled. Na stranici može biti neograničen broj takvih segmenata.

On-Scroll Animated Header Dobar dodatak za implementaciju ljepljive navigacijske trake. Funkcioniše ovako: na samom početku stranice vidimo visoko zaglavlje koje sadrži logo i meni. Prilikom pomicanja, područje zaglavlja sa svim elementima, uključujući logotip i navigaciju, glatko se smanjuje korištenjem svojstava i postaje uska traka zalijepljena za vrh ekrana.

Pozdrav, dragi čitaoci blog stranice. Ovo je više napomena sebi, da ne zaboravim šta sam tačno uradio kada želim sve da vratim. Sve je počelo kada je jedan od čitatelja predložio pisanje o dodatku za WordPress pod nazivom Q2W3 Fixed Widget (Sticky Widget), koji može učiniti bilo koji widget na bočnoj traci plivajući ili, drugim riječima, fiksnim.

One. Dok skrolujete po stranici, videćete da će glavni deo bočne trake ići gore, ali widget koji će se nalaziti na samom dnu ostaće u zoni za pregled bez obzira koliko se pomerite niz tekst. Odmah ću reći šta da objavim kontekstualno oglašavanje ovo je zabranjeno i može biti kažnjeno za to (kao što se pokazalo u komentarima - YAN to dozvoljava, ali Adsense to zabranjuje).

Dodatak je odličan, ali su widgeti onemogućeni u mojoj temi, pa sam odlučio ovaj zadatak koristeći nekoliko redova JavaScript koda koji sam našao na internetu.

Kao rezultat toga, moj gornji meni je fiksiran na samom vrhu prozora za prikaz (u stvari, samo je CSS kod bio dovoljan za ovo, ali ne tražimo lake načine), i Donji dio Bočna traka je fiksirana u gornjem desnom uglu ekrana kada dođete do nje dok skrolujete po stranici. Ne znam da li će ovo biti od koristi, ali rešenje je zaista jednostavno.

Zašto popraviti meni i napraviti plutajuću bočnu traku?

Zašto popravljati gornji meni, pitate se? Pa, općenito, ovo je mali eksperiment na temu poboljšanja. Čisto hipotetički, možemo pretpostaviti da bi to moglo uzrokovati povećanje broja pregledanih stranica i vremena koje korisnik provede na stranici.

S druge strane, pretjerana nametljivost ovakvog fiksnog panela može izazvati negativnu reakciju čitatelja, pa pitanje korisnosti ove akcije ostaje otvoreno. Moraćete da pogledate rezultat nakon nedelju dana korišćenja - ako meni više nije fiksiran (prikovan za gornju ivicu oblasti za gledanje), onda je eksperiment bio neuspešan. Za svaki slučaj, napraviću screenshot kako se sve dogodilo.

Plutajuća bočna traka u WordPress-u je napravljena iz malo drugačijeg razloga - da privuče više pažnje na nešto. U principu, ovdje možete umetnuti i listu kategorija i listu popularnih ili nedavnih objava, koje će opet pokušati poslužiti zadatku poboljšanja onih u ponašanju. Ali najčešće se oglašavanje stavlja u takav plutajući blok (kontekstualno oglašavanje nije dozvoljeno, kao što sam već spomenuo), što bi, čisto hipotetički, trebalo povećati prihod webmastera. Da vidimo rezultat za nedelju dana.

Kako popraviti gornji meni u WordPress-u

Našao sam rješenje za sebe na ovoj stranici - kako popraviti blok ili meni na web stranici. Za upotrebu ovu metodu moraju biti povezani jQuery biblioteka. Kako to učiniti detaljno je opisano u članku o učitavanju sadržaja.

Ako se sjećate, u članku o optimizaciji brzine učitavanja stranice morate pokušati spojiti sve CSS i JS u jedan zajednički (u smislu dva - jedan za stilove, a drugi za skripte). Dakle, u stvari, dodao sam linije koda date odmah ispod u takvu datoteku. Iako ih možete dodati direktno u HTML kod, okružen skriptnim oznakama. Na primjer, to se može učiniti u header.php šablonu unutar oznaka head.

Takođe možete popraviti gornji meni pomoću čisti CSS- da nam pomogne. Zapravo, pozicioniranje se također koristi ovdje koristeći ovo CSS svojstva, ali takođe postaje moguće započeti prikazivanje fiksnog menija ne odmah, već neko vrijeme nakon početka pomicanja (na određenoj udaljenosti od vrha).

U mom slučaju, kod za popravljanje gornjeg menija izgleda ovako:

$(function())( $(window).scroll(function() (var top = $(document).scrollTop(); if (vrh< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Da vas podsjetim da ovaj dio koda možete zalijepiti u:

  • Datoteka sa ekstenzijom .js koja živi u fascikli sa temom koju koristite (/wp-content/themes/theme). Pogodan je za vas samo ako je za njega u datoteci header.php napisana linija za učitavanje zajedno sa web stranicama vašeg sajta, što može izgledati ovako:
  • Zaključno, možete koristiti sam fajl header.php ovaj kod između otvaranja i zatvaranja head tagova i umotavanja u oznake skripte, na primjer ovako: $(function())( $(window).scroll(function() (var top = $(document).scrollTop(); if (vrh< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Takođe možete napisati ovaj kod u skript oznake na bilo kom drugom mjestu. Glavna stvar je da se opterećuje prave stranice blog. Na primjer, možete to učiniti u footer.php prije završne oznake tijela.

    • Sada pogledajmo direktno ovaj kod. Ispada da je 10 piksela od vrha relativno pozicioniranje je zamijenjen fiksnim (pogledajte članak na linku datom malo gore). Ako je potrebno, u redu sa else možete odabrati vrijednost koja nije nula kao vrijednost za vrh, a zatim će se meni fiksiran na vrhu povući od gornje ivice prozora za prikaz za datu vrijednost piksela (po mom mišljenju, ovo je nepotrebno).

    Za razliku od originalnog koda, morao sam dodati i širinu: "100%", jer bi se inače veličina menija smanjila u širini, što bi pokvarilo cijelu sliku.

    Gledajte, radi jasnoće, navest ću Html kod sa kojim se formira gornji meni u mom WordPress šablon blog (živi u mom header.php fajlu od ):

    U vašem predlošku će najvjerovatnije prikaz stavki izbornika biti specificiran pomoću, na primjer, takve konstrukcije (funkcije), ali to nije važno.