Lag en fast meny når du blar på siden. Fast meny når du ruller siden. Hvordan fikse toppmenyen i WordPress

Som blir funnet oftere og oftere på sidene til blogger og andre ressurser. Bruken av slike navigasjonslinjer er ganske berettiget. En av hovedgrunnene til den aktive bruken av disse jQuery-pluginene er at menyen alltid er tilgjengelig for den besøkende, selv om den er nederst på siden. I tillegg tar en fast meny liten plass og distraherer ikke oppmerksomheten fra hovedinnholdet. Generelt sett forbedrer en fast meny brukervennligheten til nettstedet.
Jeg har satt sammen en samling av de beste, etter min mening, gratis jQuery-plugins for å implementere en fast meny. Jeg prøvde å sikre at hver av pluginene var unike på en eller annen måte, slik at enhver plugin fra utvalget kunne brukes spesifikt i prosjektet ditt. I samlingen kan du finne både enkle og mer komplekse plugins med animasjon osv.
Hvis du trenger en veldig enkel fast meny, noe som hvordan vi implementerte et klebrig panel med sosiale knapper, kan du klare deg uten jQuery-plugins, fordi det ikke er veldig bra å laste siden med skript, men vi vil snakke om dette i de følgende artiklene. Abonner på vår kanal eller sider for ikke å gå glipp av interessant materiale.
Så. Her er 6 jQuery-plugins for å lage en fast meny.

Auto-Hide Sticky HeaderjQuery fast navigasjonsplugin, som fungerer på et lignende prinsipp som skriptet ovenfor, men mindre jevnt, selv om det ved første øyekast er litt enklere. Dessverre kan jeg ikke si at navigasjonen er fullt adaptiv, siden menyelementene på små skjermer blir bare tall, noe som er veldig rart.

On Scroll Header EffectsKraftig jQuery-plugin for fast navigasjonslinje. Du kan angi visse segmenter på siden når du ruller, når du når som panelet forvandles og kan endres fullstendig utseende. Det kan være et hvilket som helst antall slike segmenter på en side.

On-Scroll Animated Header En god plugin for å implementere en klebrig navigasjonslinje. Det fungerer slik: helt i begynnelsen av siden ser vi en høy overskrift som inneholder logoen og menyen. Når du ruller, reduseres overskriftsområdet med alle elementer, inkludert logoen og navigasjonen, jevnt ved hjelp av egenskaper og blir en smal stripe festet til toppen av skjermen.

Hei, kjære lesere av bloggsiden. Dette er mer et notat til meg selv, for ikke å glemme hva jeg gjorde da jeg vil returnere alt. Det hele startet da en av leserne foreslo å skrive om en plugin for WordPress kalt Q2W3 Fixed Widget (Sticky Widget), som kan få hvilken som helst widget i sidefeltet til å flyte eller med andre ord fikset.

De. Når du blar på siden, vil du se at hoveddelen av sidefeltet vil gå opp, men widgeten som vil være plassert helt nederst vil forbli i visningsområdet uansett hvor langt du beveger deg nedover i teksten. Jeg sier med en gang hva jeg skal legge ut kontekstuell annonsering dette er forbudt og kan straffes for det (som det viste seg i kommentarene - YAN tillater dette, men Adsense forbyr å gjøre dette).

Programtillegget er flott, men widgets er deaktivert i temaet mitt, så jeg bestemte meg denne oppgaven ved å bruke noen få linjer med JavaScript-kode som jeg fant på Internett.

Som et resultat er toppmenyen min fikset helt øverst i visningsporten (faktisk var det bare CSS-kode som var nok for dette, men vi leter ikke etter enkle måter), og Nedre del Sidefeltet er festet øverst til høyre på skjermen når du kommer til det mens du ruller siden. Jeg vet ikke om dette vil være til noen nytte, men løsningen er veldig enkel.

Hvorfor fikse menyen og lage en flytende sidefelt?

Hvorfor fikse toppmenyen, spør du? Vel, generelt er dette et lite eksperiment på temaet forbedring. Rent hypotetisk kan vi anta at dette kan føre til en økning i antall sider som vises og tiden brukeren bruker på siden.

På den annen side kan den overdrevne påtrengningen til et slikt fast panel forårsake en negativ reaksjon fra leserne, så spørsmålet om nytten av denne handlingen forblir åpen. Du må se på resultatet etter en ukes bruk - hvis menyen ikke lenger er fast (spikret til den øvre kanten av visningsområdet), så var eksperimentet en fiasko. I tilfelle skal jeg ta et skjermbilde av hvordan det hele skjedde.

En flytende sidebar i WordPress er laget av en litt annen grunn – for å tiltrekke seg mer oppmerksomhet til noe. I prinsippet kan du her sette inn både en liste over kategorier og en liste over populære eller nylige innlegg, som igjen vil prøve å tjene oppgaven med å forbedre atferdsmessige. Men oftest plasseres reklame i en slik flytende blokk (kontekstuell annonsering er ikke tillatt, som jeg allerede har nevnt), noe som rent hypotetisk burde øke webmasterens inntekt. La oss se resultatet om en uke.

Hvordan fikse toppmenyen i WordPress

Jeg fant en løsning for meg selv på denne siden - hvordan fikse en blokk eller meny på en nettside. For bruk denne metoden må kobles til jQuery bibliotek. Hvordan du gjør dette ble beskrevet i detalj i artikkelen om lasting av innhold.

Hvis du husker, i artikkelen om optimalisering av sidelastingshastighet, må du prøve å kombinere all CSS og JS til en felles (i betydningen to - en for stiler og den andre for skript). Så faktisk la jeg kodelinjene gitt rett nedenfor til en slik fil. Selv om du kan legge dem direkte til HTML-kode, omgitt av skriptkoder. Dette kan for eksempel gjøres i header.php-malen inne i head-taggene.

Du kan også fikse toppmenyen ved å bruke ren CSS- for å hjelpe oss. Egentlig brukes også posisjonering her ved å bruke dette CSS-egenskaper, men det blir også mulig å begynne å vise en fast meny ikke umiddelbart, men en tid etter at rullingen starter (i en viss avstand fra toppen).

I mitt tilfelle ser koden for å fikse toppmenyen slik ut:

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

La meg minne deg på at du kan lime inn denne kodebiten i:

  • En fil med filtypen .js som ligger i mappen med temaet du bruker (/wp-content/themes/theme). Den passer bare for deg hvis en linje er skrevet for den i header.php-filen for å laste den sammen med nettsidene til nettstedet ditt, som kan se slik ut:
  • Du kan bruke selve header.php-filen, avslutningsvis denne koden mellom åpnings- og lukkehodetaggene og pakke den inn i skripttagger, for eksempel slik: $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (topp< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Du kan også skrive denne koden i skriptkoder hvor som helst. Hovedsaken er at den laster på de riktige sidene blogg. Du kan for eksempel gjøre det i footer.php før den avsluttende body-taggen.

    • La oss nå se direkte på denne koden. Det viser seg at 10 piksler fra toppen relativ posisjonering erstattes av en fast (se artikkelen på lenken rett ovenfor). Om nødvendig kan du i linjen med else velge ikke-null som verdi for topp, og deretter vil menyen som er fast på toppen gå tilbake fra den øvre kanten av viewporten ved å gitt verdi piksler (etter min mening er dette unødvendig).

    I motsetning til originalkoden måtte jeg også legge til bredde: "100%", for ellers ville menystørrelsen minke i bredden, noe som ville ødelegge hele bildet.

    Se, for klarhet vil jeg gi HTML-koden som toppmenyen er dannet med i min WordPress mal blogg (den ligger i header.php-filen min fra ):

    I malen din vil mest sannsynlig visning av menyelementer spesifiseres ved hjelp av for eksempel en slik konstruksjon (funksjon), men dette er ikke viktig.