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.
...
Dobrý deň,
V prvom rade vám ďakujem za tento návod, ktorý robí túto prácu perfektne!
Ale bez ohľadu na to, ako veľmi som prehľadával internet, nemohol som nájsť odpoveď na svoju otázku:
Ako to urobiť, akonáhle je vytvorená plávajúca ponuka (v CSS alebo s ľubovoľnou príponou), aby sa moje sekcie zobrazovali po ponuke a nie za ponukou?
Je to v mojom prípade obzvlášť nepríjemné, pretože je to jednostranná stránka, a preto položky môjho menu odkazujú na sekcie stránok, ktoré sa za mojím menu pohybujú vždy hore ...
hovorí vám to?
Ďakujem vopred!
Zaujímalo by ma, či je možné urobiť z obsahu stránky "lepkavý" ...
Dobrý deň,
Nikdy testované. Nemôžem ti odpovedať.
Hello; ahoj
Skúšal som to so stiahnutou témou (wallstreet), ale pri dodržaní vašich pokynov sa nič nezmení ... neviem, čo chýba ...
Páči sa mi to a bol by som rád, keby som ich mohol použiť ...
ďakujem
raul
Dobrý deň,
Skúste deaktivovať všetky ostatné doplnky WordPress a sledujte displej ďalej.
Ďakujem vám za váš návod, jednoduché ako ahoj všetko je vedieť!
Dobrý deň,
Som rád, že som bol nápomocný.