Už ste niekedy prechádzali webovú stránku a zistili ste, že navrchu je vždy viditeľné navigačné menu?

Navigačné ponuky sa v zásade zobrazujú tak, že pri posúvaní stránky zmiznú. Vždy viditeľné navigačné ponuky plávajú a sú teda bez ohľadu na to, ako sa používateľ posúva nadol.

V tomto návode vám ukážeme, ako ľahko vytvoriť plávajúcu ponuku na svojom blogu WordPress.

Ak ste ešte nevytvorili webovú stránku alebo blog na WordPress, pozývame vás, aby ste si prečítali Ako nainštalovať blog WordPress v nasledujúcich 7 krokoch, Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu

Ak je to hotové, poďme na to, čo sa nás dnes týka.

Metóda 1: Ako pridať plávajúcu ponuku na WordPress pomocou doplnku

Táto metóda je jednoduchšia a rýchla. Ak ste ešte nenastavili navigačné ponuky, môžete Naučte sa, ako na to.

Prvá vec, ktorú musíte urobiť, je nainštalovať a aktivovať doplnok " Sticky Menu (alebo čokoľvek!) My Scroll ". Ak neviete, ako nainštalovať doplnok, môžete si môžete prečítať náš návod.

Po aktivácii musíte navštíviť stránku „ Nastavenia »Sticky Menu Konfigurácia nastavení tohto doplnku.

Najskôr musíte zadať ID CSS pre navigačnú ponuku, ktorú chcete presunúť.

Na vyhľadanie použitého CSS budete musieť použiť nástroj „skontrolovať“ vo svojom prehliadači.

Prejdite na svoj web a presuňte myš do navigačnej ponuky. Potom musíte kliknúť pravým tlačidlom myši a vybrať príkaz „Skontrolovať“.

Choďte ďalej objavovaním Ako prispôsobiť WordPress tému s žlté ceruzky

Týmto sa v predvolenom nastavení rozdelí obrazovka prehliadača a uvidíte zdrojový kód navigačnej ponuky. Musíte nájsť riadok podobný tomuto:

V tomto príklade je ID CSS našej navigačnej ponuky „ Navigácia stránok ".

Pokračujte ďalej a zadajte ID CSS ponuky v nastaveniach doplnku nasledujúcim spôsobom „# site-navigation“.

Ďalšou možnosťou v nastaveniach doplnku je nastavenie medzery medzi hornou časťou obrazovky a plávajúcou navigačnou ponukou. Toto nastavenie môžete použiť, ak sa vaša ponuka prekrýva s položkou, ktorú nechcete skryť. V opačnom prípade toto nastavenie ignorujte.

Potom musíte kliknúť na políčko hneď vedľa možnosti: „Check Bar Admin“. To umožňuje doplnku pridať nejaké miesto pre panel nástrojov WordPress, ktorý sa pridáva pre prihlásených používateľov.

Ďalšia možnosť na stránke s nastaveniami vám umožňuje skryť navigačné menu, ak používateľ navštevuje vaše webové stránky pomocou menšej obrazovky, napríklad mobilného zariadenia.

Môžete vyskúšať, ako sa táto ponuka zobrazuje na mobilných zariadeniach a tabletoch. Ak sa vám nepáči, môžete k tejto možnosti pridať 780px.

Objavte tiež Ako vytvoriť reagujúce ponuku pre mobilné WordPress

Nezabudnite kliknúť na „ Uložte nastavenia Ak chcete uložiť zmeny.

Teraz môžete navštíviť svoj web a pozrieť si svoje pohyblivé navigačné menu v akcii.

Metóda 2: Ako pridať navigačné menu ručne

Táto metóda vyžaduje pridanie vlastného kódu CSS do vášho WordPress tému.

Najskôr musíte navštíviť “ Vzhľad> Prispôsobiť Spustenie programu WordPress Customizer.

Kliknite na Dodatočné CSS Na ľavej table potom pridajte tento kód CSS.

# Navigácia na webe {background: #fff; výška: 60px; z-index: 170; margin: 0 auto; border-bottom: 1px pevné #dadada; šírka: 100%; Pozícia: pevné; Horná: 0; left: 0; vpravo: 0; text-align: centrum; }

Nahradiť “ # Navigácia stránok Pri identifikátore vašej navigačnej ponuky kliknite na tlačidlo « Registrovať ".

Teraz môžete navštíviť svoj web a pozrieť si svoje pohyblivé navigačné menu v akcii.

Ak sa vaša navigačná ponuka zvyčajne zobrazuje za hlavičkou webu, tento kód CSS by mohol prekrývať názov a hlavičku webu.

To sa dá ľahko upraviť pridaním okraja do oblasti hlavičky pomocou nasledujúceho kódu:

.site značkami {margin-top: 60px; }

Týmto sa končí náš návod, teraz budete môcť na svojej webovej stránke vytvoriť alebo pridať pohyblivé menu.

Ak hľadáte iné WordPress pluginy ktoré vám umožnia spravovať menu, tu sú niektoré WordPress pluginy prémiu venovanú tejto úlohe. 

1. menu Hero

Tento doplnok vám umožňuje vytvoriť si vlastnú ponuku WordPress v niekoľkých pomerne jednoduchých krokoch. Umožňuje vám najmä jednoducho a intuitívne vytvárať elegantné a profesionálne WordPress menu. Od najkomplexnejšej mega ponuky s bohatými funkciami až po najjednoduchšiu rozbaľovaciu ponuku WordPress Plugin HeroMenu nastaví akýkoľvek typ ponuky a uvedie ho do chodu v priebehu niekoľkých minút.

Pokiaľ ide o funkcie, ktoré okrem iného ponúka: dokonale funkčné na PC, tabletoch a smartfónoch, ľahko použiteľné, prispôsobiteľný obsah, vlastné CSS na pridanie vlastných štýlov ponuky, návrhár mega ponúk, podporované prehliadače: Chrome, Firefox, Safari , Opera, IE9 a ďalšie.

Stiahnuť | demo | web hosting

2. Slick Menu

Slick Menu nie je iba doplnok ponuky pre WordPress. Môže byť použitý na neobmedzené vytváranie viacerých úrovní ponuky, ako aj bočných panelov s bohatým obsahom, viacerými možnosťami štýlov a animovanými efektmi.

Každú úroveň ponuky je možné upraviť pomocou farieb pozadia, obrázkov, videí, vlastných typov písma a ďalších. Tento doplnok je úplne citlivý a má viac ako 45 animácií pre položky ponuky.

Stiahnuť | demo | web hosting

3. Menu 8Degree Fly

8stupňové Fly Menu je a WordPress Plugin premium, ktorý vám umožňuje pridať na váš web ponuku plátna, aby ste získali vzhľad, ktorý jednoduchým spôsobom zvýrazní vaše informácie. Na vytváranie svojich ponúk používa predvolenú funkciu ponuky WordPress.

K predvoleným položkám ponuky budete môcť pridať ďalšie prvky, ako napríklad ikony, slogany ponúk, hlavičku pseudoskupín a dlhý popis. Je tiež dodávaný s editorom WYSIWYG, ktorý vám uľahčí pochopenie vášho dlhého opisu užívateľsky prívetivým spôsobom.

Stiahnuť | demo | web hosting

Ďalšie odporúčané zdroje

Ak chcete ísť ďalej pri vytváraní alebo prispôsobovaní ponúk blogu alebo svojich webových stránok, odporúčame vám tiež navštíviť odkazy uvedené nižšie.

• Ako pridať štýl do menu navigácie
•  Ako pridať atribút názvu v menu WordPress
• Doplnky 8 WordPress na vytvorenie megamenu vo vašom blogu

záver

Tu ! To je pre tento návod všetko, dúfam, že vám umožní pridať plávajúce menu do vášho blogu WordPress. Pozývame vás na zdieľajte tento článok so svojimi priateľmi na sociálnych sieťach.

Ak máte nejaké návrhy alebo pripomienky, budú vítané. A ak ste novým používateľom WordPress, konzultovať to prostriedky.

...