Pri posúvaní stránky vytvorte pevné menu. Opravené menu pri posúvaní stránky. Ako opraviť hornú ponuku vo WordPress

Ktoré sa čoraz častejšie nachádzajú na stránkach blogov a iných zdrojov. Použitie takýchto navigačných panelov je celkom opodstatnené. Jedným z hlavných dôvodov aktívneho používania týchto jQuery pluginov je, že menu má návštevník vždy na dosah ruky, aj keď je v spodnej časti stránky. Pevné menu navyše zaberá málo miesta a neodvádza pozornosť od hlavného obsahu. Vo všeobecnosti platí, že pevné menu zlepšuje použiteľnosť stránky.
Zostavil som zbierku najlepších, podľa môjho názoru, bezplatných doplnkov jQuery na implementáciu pevného menu. Snažil som sa zabezpečiť, aby každý z pluginov bol nejakým spôsobom jedinečný, aby sa ktorýkoľvek plugin z výberu dal použiť konkrétne vo vašom projekte. V kolekcii nájdete jednoduché aj zložitejšie pluginy s animáciou atď.
Ak potrebujete veľmi jednoduché pevné menu, niečo také, ako sme implementovali lepiaci panel so sociálnymi tlačidlami, vystačíte si s pluginmi jQuery, pretože načítanie stránky pomocou skriptov nie je príliš dobré, ale o tom si povieme v nasledujúcich článkoch. Prihláste sa na odber nášho kanála alebo stránok, aby ste nezmeškali zaujímavé materiály.
Takže. Tu je 6 doplnkov jQuery na vytvorenie pevného menu.

Auto-Hide Sticky HeaderjQuery opravil navigačný plugin, ktorý funguje na podobnom princípe ako skript vyššie, no menej plynulo, aj keď na prvý pohľad trochu jednoduchšie. Bohužiaľ nemôžem povedať, že navigácia je plne prispôsobivá, pretože na malých obrazovkách sa položky ponuky stávajú iba číslami, čo je veľmi zvláštne.

On Scroll Header Effects Výkonný doplnok jQuery pre pevný navigačný panel. Na stránke môžete pri rolovaní nastaviť určité segmenty, po dosiahnutí ktorých sa panel transformuje a môže sa úplne zmeniť vzhľad. Na stránke môže byť ľubovoľný počet takýchto segmentov.

On-Scroll Animated Header Dobrý doplnok na implementáciu lepiacej navigačnej lišty. Funguje to takto: na úplnom začiatku stránky vidíme vysokú hlavičku obsahujúcu logo a menu. Pri rolovaní sa oblasť hlavičky so všetkými prvkami vrátane loga a navigácie pomocou vlastností plynulo zmenšuje a stáva sa úzkym pásikom prilepeným k hornej časti obrazovky.

Dobrý deň, milí čitatelia blogu. Toto je skôr poznámka pre seba, aby som nezabudol, čo som presne urobil, keď chcem všetko vrátiť späť. Všetko to začalo, keď jeden z čitateľov navrhol písať o doplnku pre WordPress s názvom Q2W3 Fixed Widget (Sticky Widget), vďaka ktorému bude akýkoľvek widget v bočnom paneli plávajúci alebo, inými slovami, opravený.

Tie. Pri posúvaní stránky uvidíte, že hlavná časť bočného panela pôjde nahor, ale miniaplikácia, ktorá sa bude nachádzať úplne dole, zostane v oblasti zobrazenia bez ohľadu na to, ako ďaleko sa posuniete v texte. Hneď poviem, čo uverejniť kontextová reklama je to zakázané a môže byť za to potrestané (ako sa ukázalo v komentároch - YAN to umožňuje, ale Adsense to zakazuje).

Plugin je skvelý, ale v mojej téme sú vypnuté widgety, tak som sa rozhodol túto úlohu pomocou niekoľkých riadkov kódu JavaScript, ktorý som našiel na internete.

Výsledkom je, že moja horná ponuka je opravená úplne hore vo výreze (v skutočnosti na to stačil iba kód CSS, ale nehľadáme jednoduché spôsoby) a Spodná časť Bočný panel je upevnený v pravom hornom rohu obrazovky, keď sa naň dostanete počas posúvania stránky. Neviem, či to bude užitočné, ale riešenie je naozaj jednoduché.

Prečo opraviť menu a vytvoriť plávajúci bočný panel?

Prečo opraviť horné menu, pýtate sa? Vo všeobecnosti ide o malý experiment na tému zlepšenia. Čisto hypoteticky môžeme predpokladať, že by to mohlo spôsobiť zvýšenie počtu prezeraných stránok a času stráveného používateľom na stránke.

Na druhej strane prílišná dotieravosť takéhoto pevného panelu môže vyvolať negatívnu reakciu čitateľov, takže otázka užitočnosti tejto akcie zostáva otvorená. Na výsledok sa budete musieť pozrieť po týždni používania – ak už ponuka nie je pevná (pribitá k hornému okraju zobrazovacej plochy), experiment zlyhal. Pre každý prípad urobím snímku obrazovky, ako sa to celé stalo.

Plávajúci bočný panel vo WordPress je vyrobený z trochu iného dôvodu – aby na niečo upútal väčšiu pozornosť. V zásade sem môžete vložiť zoznam kategórií aj zoznam populárnych alebo najnovších príspevkov, ktoré sa opäť pokúsia poslúžiť na zlepšenie správania. Najčastejšie sa však reklama umiestňuje do takéhoto plávajúceho bloku (kontextová reklama nie je povolená, ako som už spomínal), čo by malo čisto hypoteticky zvýšiť príjem webmastera. Výsledok uvidíme o týždeň.

Ako opraviť hornú ponuku vo WordPress

Na tejto stránke som našiel riešenie pre seba - ako opraviť blok alebo menu na webovej stránke. Na použitie túto metódu musí byť pripojený knižnica jQuery. Ako to urobiť, bolo podrobne popísané v článku o načítaní obsahu.

Ak si pamätáte, v článku o optimalizácii rýchlosti načítania stránky treba skúsiť spojiť všetky CSS a JS do jedného spoločného (v zmysle dvoch - jeden pre štýly a druhý pre skripty). V skutočnosti som do takéhoto súboru pridal riadky kódu uvedené nižšie. Aj keď ich môžete pridať priamo do HTML kód obklopený značkami skriptu. Môžete to urobiť napríklad v šablóne header.php vo vnútri značiek head.

Horné menu môžete opraviť aj pomocou čistý CSS- pomôcť nám. V skutočnosti sa tu používa aj polohovanie pomocou tohto CSS vlastnosti, ale je tiež možné začať zobrazovať pevnú ponuku nie okamžite, ale nejaký čas po začatí rolovania (v určitej vzdialenosti od vrchu).

V mojom prípade kód na opravu horného menu vyzerá takto:

$(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"}); }); });

Dovoľte mi pripomenúť, že tento kúsok kódu môžete vložiť do:

  • Súbor s príponou .js, ktorý sa nachádza v priečinku s témou, ktorú používate (/wp-content/themes/theme). Je pre vás vhodný iba vtedy, ak je preň v súbore header.php napísaný riadok na jeho načítanie spolu s webovými stránkami vášho webu, ktorý môže vyzerať takto:
  • Na záver môžete použiť samotný súbor header.php tento kód medzi otváraciu a zatváraciu značku head a jej zabalenie do značiek skriptu, napríklad takto: $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); ak (hore< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Tento kód môžete napísať aj do značiek skriptu na akomkoľvek inom mieste. Hlavné je, že sa načítava tie správne stránky blog. Môžete to urobiť napríklad v footer.php pred koncovou značkou body.

    • Teraz sa pozrime priamo na tento kód. Ukazuje sa, že 10 pixelov zhora relatívne umiestnenie je nahradený pevným (pozri článok na vyššie uvedenom odkaze). Ak je to potrebné, potom v riadku s else môžete vybrať nenulovú hodnotu ako hodnotu pre vrchol a potom ponuka fixovaná v hornej časti ustúpi od horného okraja výrezu o daná hodnota pixelov (podľa mňa je to zbytočné).

    Na rozdiel od pôvodného kódu som musel pridať aj šírku: "100%", pretože inak by sa veľkosť menu zmenšila na šírku, čo by pokazilo celý obrázok.

    Pozrite sa, pre prehľadnosť poskytnem Html kód, pomocou ktorého sa tvorí horné menu v mojom WordPress šablóna blog (žije v mojom súbore header.php od ):

    Vo vašej šablóne bude pravdepodobne zobrazovanie položiek ponuky špecifikované napríklad pomocou takejto konštrukcie (funkcie), ale to nie je dôležité.