Už jste někdy byli na webu a zjistili jste, že navigační nabídka je vždy vidět nahoře?

V zásadě jsou navigační nabídky zobrazeny takovým způsobem, že zmizí při posouvání stránky. Vždy viditelné navigační nabídky se pohybují a jsou tak bez ohledu na to, jak se uživatel posouvá dolů.

V tomto tutoriálu vám ukážeme, jak snadno vytvořit plovoucí nabídku na svém blogu WordPress.

Pokud jste si ještě nevytvořili webovou stránku nebo blog na WordPressu, zveme vás ke konzultaci Jak nainstalovat blog WordPress v 7 krocích dále, Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu

Pokud je hotovo, pojďme se podívat na to, co se nás dnes týká.

Metoda 1: Jak přidat plovoucí nabídku na WordPress pomocí pluginu

Tato metoda je jednodušší a rychlá. Pokud jste ještě nenastavili navigační nabídky, můžete Naučte se, jak na to.

První věcí, kterou musíte udělat, je nainstalovat a aktivovat plugin " Sticky Menu (nebo cokoliv!) My Scroll “. Pokud nevíte, jak nainstalovat plugin, můžete si můžete přečíst náš návod.

Po aktivaci musíte navštívit Nastavení »Rychlé menu Konfigurace nastavení tohoto pluginu.

Nejprve musíte zadat ID CSS navigační nabídky, kterou chcete nastavit jako float.

K vyhledání použitého CSS budete muset použít nástroj „prozkoumat“ ve svém prohlížeči.

Přejděte na svůj web a přesuňte myš do navigační nabídky. Poté musíte kliknout pravým tlačítkem a vybrat "Inspect".

Jděte dále objevováním Jak přizpůsobit WordPress téma s žluté tužky

Tím se rozdělí (ve výchozím nastavení) obrazovka prohlížeče a uvidíte zdrojový kód navigační nabídky. Musíte najít řádek podobný tomuto:

V tomto příkladu je ID CSS naší navigační nabídky „ Navigace stránek ".

Pokračujte a zadejte ID CSS nabídky v nastavení pluginu následovně „# site-navigation“.

Další možností nastavení pluginu je nastavit prostor mezi horní částí obrazovky a plovoucí navigační nabídkou. Toto nastavení můžete použít, pokud se vaše nabídka překrývá s položkou, kterou nechcete skrýt. Jinak toto nastavení ignorujte.

Poté musíte kliknout na políčko hned vedle možnosti: „Check Bar Admin“. To umožňuje pluginu přidat nějaký prostor pro panel nástrojů WordPress, který je přidán pro přihlášené uživatele.

Další možnost na stránce nastavení umožňuje skrýt navigační nabídku, pokud uživatel navštíví váš web pomocí menší obrazovky, například mobilního zařízení.

Můžete otestovat, jak se tato nabídka zobrazuje na mobilních zařízeních a tabletech. Pokud se vám nelíbí, můžete k této možnosti přidat 780px.

Objevte také Jak vytvořit reagující nabídku pro mobilní WordPress

Nezapomeňte kliknout na „ Uložte nastavení Chcete-li uložit změny.

Nyní můžete navštívit svůj web a zobrazit plovoucí navigační nabídku v akci.

Metoda 2: Jak přidat navigační nabídku ručně

Tato metoda vyžaduje přidání vlastního kódu CSS do vašeho WordPress téma.

Nejprve musíte navštívit " Vzhled> Přizpůsobit Spuštění nástroje WordPress Customizer.

Klikněte na Další CSS V levém podokně přidejte tento kód CSS.

# Navigace na webu {background: #fff; výška: 60px; z-index: 170; margin: 0 auto; border-bottom: 1px pevné #dadada; šířka: 100%; Pozice: pevné; Horní: 0; left: 0; vpravo: 0; text-align: centrum; }

Nahradit “ # Navigace stránek Podle identifikátoru vaší navigační nabídky a klikněte na tlačítko « Zadat ".

Nyní můžete navštívit svůj web a zobrazit plovoucí navigační nabídku v akci.

Pokud se vaše navigační nabídka obvykle zobrazí za záhlavím webu, může tento kód CSS překrývat název webu a záhlaví.

To lze snadno upravit přidáním okraje do oblasti záhlaví pomocí následujícího kódu:

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

Tím končí náš výukový program, nyní budete moci na svém webu vytvořit nebo přidat plovoucí nabídku.

Pokud hledáte jiné WordPress pluginy které vám umožní spravovat nabídky, zde jsou některé WordPress pluginy prémie věnované tomuto úkolu. 

1. Menu Hero

Tento plugin vám umožňuje vytvořit si vlastní nabídku WordPress v několika poměrně snadných krocích. Zejména umožňuje snadno a intuitivně vytvořit elegantní a profesionální WordPress menu. Od nejsložitějšího mega menu s bohatými funkcemi až po nejjednodušší rozevírací nabídku, WordPress Plugin HeroMenu nastaví jakýkoli typ nabídky a spustí se během několika minut.

Pokud jde o funkce, které mimo jiné nabízí: dokonale funkční na PC, tabletu a smartphonu, snadno použitelný, přizpůsobitelný obsah, vlastní CSS pro přidání vlastních stylů menu, návrhář mega menu, podporované prohlížeče: Chrome, Firefox, Safari , Opera, IE9 a další.

Stáhnout | Demo | Web hosting

2. Slick Menu

Slick Menu není jen zásuvný modul nabídky pro WordPress. Lze jej použít k vytvoření neomezených úrovní nabídky, stejně jako postranních panelů s bohatým obsahem, více možností stylingu a animovaných efektů.

Každá úroveň nabídky je přizpůsobitelná barvami pozadí, obrázky, videi, vlastními písmy a dalšími. Tento plugin je zcela citlivý a má více než 45 animací pro položky nabídky.

Stáhnout | Demo | Web hosting

3. Nabídka 8Degree Fly

8stupňové Fly Menu je a WordPress Plugin premium, která vám umožňuje přidat na váš web nabídku plátna, abyste získali vzhled, který jednoduchým způsobem zvýrazní vaše informace. K vytváření nabídek používá výchozí funkci nabídky WordPress.

K výchozím položkám nabídky budete moci přidat další prvky, například ikony, slogany nabídek, záhlaví pseudoskupin a dlouhý popis. Součástí je také editor WYSIWYG, který vám pomůže uchopit svůj dlouhý popis uživatelsky přívětivým způsobem a pomocí tohoto editoru můžete také používat krátké kódy.

Stáhnout | Demo | Web hosting

Další doporučené zdroje

Pokud chcete jít dále při vytváření nebo přizpůsobování nabídek vašeho blogu nebo svého webu, doporučujeme vám také nahlédnout do níže uvedených odkazů.

• Jak nastavit styl navigačních menu
•  Jak přidat atribut názvu v menu WordPress
• Doplňky 8 WordPress k vytvoření megamenu na vašem blogu

Proč investovat do čističky vzduchu?

Tady ! To je pro tento návod vše, doufám, že vám umožní přidat plovoucí nabídku na váš blog WordPress. Zveme vás na sdílejte tento článek se svými přáteli na sociálních sítích.

Pokud máte nějaké návrhy nebo připomínky, budou vítány. A pokud jste novým uživatelem WordPress, konzultovat to prostředky.

...