Při posouvání stránky vytvořte pevné menu. Opraveno menu při rolování stránky. Jak opravit hlavní nabídku ve WordPressu

Které se stále častěji nacházejí na stránkách blogů a dalších zdrojů. Použití takových navigačních lišt je zcela oprávněné. Jedním z hlavních důvodů aktivního používání těchto jQuery pluginů je to, že menu má návštěvník vždy na dosah ruky, i když je ve spodní části stránky. Pevné menu navíc zabírá málo místa a neodvádí pozornost od hlavního obsahu. Obecně řečeno, pevná nabídka zlepšuje použitelnost webu.
Dal jsem dohromady sbírku nejlepších, podle mého názoru, bezplatných pluginů jQuery pro implementaci pevného menu. Snažil jsem se zajistit, aby každý z pluginů byl nějakým způsobem jedinečný, aby bylo možné jakýkoli plugin z výběru použít konkrétně ve vašem projektu. V kolekci najdete jednoduché i složitější pluginy s animací atp.
Pokud potřebujete velmi jednoduché pevné menu, něco jako jak jsme implementovali sticky panel se sociálními tlačítky, obejdete se bez pluginů jQuery, protože načítání stránky se skripty není moc dobré, ale o tom si povíme v následujících článcích. Přihlaste se k odběru našeho kanálu nebo stránek, aby vám neunikly zajímavé materiály.
Tak. Zde je 6 pluginů jQuery pro vytvoření pevného menu.

Auto-Hide Sticky HeaderjQuery opravil navigační plugin, který funguje na podobném principu jako skript výše, ale méně plynule, i když na první pohled trochu jednodušší. Bohužel nemohu říci, že navigace je plně adaptivní, protože na malých obrazovkách se položky nabídky stávají pouze čísly, což je velmi zvláštní.

On Scroll Header EffectsVýkonný plugin jQuery pro pevnou navigační lištu. Při rolování můžete na stránce nastavit určité segmenty, po jejichž dosažení se panel transformuje a může se zcela změnit vzhled. Na stránce může být libovolný počet takových segmentů.

On-Scroll Animated Header Dobrý plugin pro implementaci lepivého navigačního panelu. Funguje to takto: na samém začátku stránky vidíme vysoké záhlaví obsahující logo a nabídku. Při rolování se oblast záhlaví se všemi prvky, včetně loga a navigace, pomocí vlastností plynule zmenšuje a stává se úzkým pruhem přilepeným k horní části obrazovky.

Dobrý den, milí čtenáři tohoto blogu. To je spíš poznámka pro sebe, abych nezapomněl, co jsem přesně udělal, když chci všechno vrátit zpět. Všechno to začalo tím, že jeden ze čtenářů navrhl napsat o pluginu pro WordPress s názvem Q2W3 Fixed Widget (Sticky Widget), díky kterému bude jakýkoli widget v postranním panelu plovoucí nebo jinými slovy opravený.

Tito. Při posouvání stránky uvidíte, že hlavní část postranního panelu půjde nahoru, ale widget, který se bude nacházet úplně dole, zůstane v zobrazovací oblasti bez ohledu na to, jak daleko posunete text dolů. Hned řeknu, co zveřejnit kontextová reklama to je zakázáno a může být za to potrestáno (jak se ukázalo v komentářích - YAN to umožňuje, ale Adsense to zakazuje).

Plugin je skvělý, ale v mém motivu jsou vypnuté widgety, tak jsem se rozhodl tento úkol pomocí několika řádků kódu JavaScript, který jsem našel na internetu.

Výsledkem je, že moje horní menu je opraveno úplně nahoře ve výřezu (ve skutečnosti mi na to stačil pouze CSS kód, ale nehledáme jednoduché způsoby) a Spodní část Když na něj dosáhnete při posouvání stránky, je postranní panel pevně umístěn v pravé horní části obrazovky. Nevím, jestli to bude k něčemu, ale řešení je opravdu jednoduché.

Proč opravit nabídku a vytvořit plovoucí postranní panel?

Proč opravovat horní menu, ptáte se? Obecně se jedná o malý experiment na téma zlepšení. Čistě hypoteticky můžeme předpokládat, že by to mohlo způsobit nárůst počtu zobrazených stránek a času stráveného uživatelem na webu.

Na druhou stranu přílišná rušivost takto pevného panelu může vyvolat negativní reakce čtenářů, takže otázka užitečnosti této akce zůstává otevřená. Na výsledek se budete muset podívat po týdnu používání – pokud nabídka již není pevná (přibitá k hornímu okraji zobrazovací plochy), experiment selhal. Pro každý případ udělám snímek obrazovky, jak se to všechno stalo.

Plovoucí postranní panel ve WordPressu je vyroben z trochu jiného důvodu – upoutat na něco více pozornosti. V zásadě zde můžete vložit jak seznam kategorií, tak seznam populárních či posledních příspěvků, které se opět pokusí posloužit za úkol zlepšit ty behaviorální. Nejčastěji se ale reklama umísťuje do takového plovoucího bloku (kontextová reklama není povolena, jak jsem již zmínil), což by čistě hypoteticky mělo zvýšit příjem webmastera. Výsledek uvidíme za týden.

Jak opravit hlavní nabídku ve WordPressu

Na této stránce jsem pro sebe našel řešení – jak opravit blok nebo nabídku na webu. K použití tato metoda musí být připojen knihovna jQuery. Jak to udělat, bylo podrobně popsáno v článku o načítání obsahu.

Pokud si vzpomínáte, v článku o optimalizaci rychlosti načítání stránek je potřeba zkusit spojit všechny CSS a JS do jednoho společného (ve smyslu dvou - jednoho pro styly a druhého pro skripty). Takže ve skutečnosti jsem do takového souboru přidal řádky kódu uvedené níže. I když je můžete přidat přímo do HTML kód, obklopený značkami skriptu. To lze například provést v šabloně header.php uvnitř značek head.

Můžete také opravit horní nabídku pomocí čisté CSS- aby nám pomohl. Ve skutečnosti se zde používá také polohování pomocí tohoto Vlastnosti CSS, ale také je možné začít zobrazovat pevnou nabídku ne okamžitě, ale nějakou dobu poté, co začne rolování (v určité vzdálenosti od vrcholu).

V mém případě kód pro opravu horní nabídky vypadá 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"}); }); });

Dovolte mi připomenout, že tento kus kódu můžete vložit do:

  • Soubor s příponou .js, který se nachází ve složce s motivem, který používáte (/wp-content/themes/theme). Je pro vás vhodný pouze v případě, že je pro něj v souboru header.php napsán řádek pro jeho načtení spolu s webovými stránkami vašeho webu, který může vypadat takto:
  • Můžete použít samotný soubor header.php, na závěr tento kód mezi otevírací a zavírací značku head a její zabalení do značek skriptu, například takto: $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); (horní< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Tento kód můžete také napsat do značek skriptu na libovolném jiném místě. Hlavní je, že se to nabíjí ty správné stránky blog. Můžete to udělat například v footer.php před koncovou značkou body.

    • Nyní se podívejme přímo na tento kód. Ukazuje se, že 10 pixelů shora relativní polohování je nahrazena pevnou (viz článek na výše uvedeném odkazu). Je-li to nutné, můžete v řádku s else vybrat nenulovou hodnotu jako hodnotu pro horní a poté se nabídka upevněná v horní části vzdálí od horního okraje výřezu o daná hodnota pixelů (podle mě je to zbytečné).

    Na rozdíl od původního kódu jsem musel přidat i šířku: "100%", protože jinak by se velikost nabídky zmenšila na šířku, což by zkazilo celý obrázek.

    Podívejte se, pro přehlednost poskytnu Html kód, se kterým se tvoří horní menu v mém WordPress šablona blog (žije v mém souboru header.php od ):

    Ve vaší šabloně bude nejspíše zobrazení položek menu specifikováno pomocí např. takové konstrukce (funkce), ale to není důležité.