Už jste někdy viděli jedno z těch pestrých menu, které se hladce posouvá dolů po stránce po klepnutí na odkaz? Nebo že okamžitě skočí dolů na nějakou část dané stránky?
Vsadím se, že jste se sami sebe ptali, jak se to dá udělat.
V tomto článku vám ukáži jak na plynule posuvné menu v OptimizePressu po kliknutí na odkaz, ale i skokové menu bez plynulého posuvu.
Výhody tohoto rolovacího menu jsou:
Po přečtení tohoto návodu budete moci přidávat plynule posuvné menu na jakoukoli z vašich stávajících vstupních stránek (landing page).
Co se v tomto návodu naučíte:
Zkopírujte si Link URL #sekce2 (nebojte se, číslo dva můžete kdykoli změnit)
To uděláte jednoduše editací řádku (row):
Text URL odkazu je stejný jako v prvním příkladu #sekce1 – Sekce 1. Zde už si dávejte vlastní názvy, které chcete mít v menu.
Takhle vypadá moje stránka (v LiveEditoru) poté, co jsem vložil kód na každý řádek. Tento příklad ukazuje jen tři řádky:
Pokud jste provedly všechny výše uvedené kroky, měli byste mít funkční plynule skrolující menu na vaší stránce. Pokud se vám něco nedaří, podívejte se na video nahoře od OptimizePressu.
Poté co upravíte každý řádek, stránka by měla v LiveEditoru vypadat takto:
A v mžiku máte jednoduché skokové navigační menu.
Jednoduché, že?
Možná budete chtít využít tento styl navigace vedle vašeho loga. Pokud ano, jednoduše vytvoříte nový Row (řádek), který umožňuje prostor pro logo jako v tomto rozložení:
Přidejte své odkazy tak, jak jsme to udělali výše a přidejte element (prvek) obrázku pro vaše logo. Takže to bude vypadat např. takto:
Zde máte dva různé způsoby jak vytvořit navigační plynule posuvné menu v OptimizePressu.
Hodně zábavy při vytváření vašich vlastních menu…
- Lepší uživatelský komfort – tím, že poskytujete jasné vazby mezi relevantním obsahem je pro uživatele snadnější navigace po stránce
- Rychle načtený obsah – protože je obsah na jedné stránce, zdá se, že po kliknutí na odkaz jste rychle u dalšího obsahu
- Jak vytvořit menu s plynulým posunem dolů po stránce na určité místo
- Jak vytvořit menu se skokem dolů na určité místo
Co budete potřebovat?
Věřte tomu nebo ne, že vše co potřebujete je již uvnitř OptimizePressu. Zde je to, co potřebujete a jak to získáte:- Javascriptový kód – vytvoří animovaný navigační efekt (plynulý posun)
- URL odkaz – odkaz který po kliknutí posune stránku na požadované místo
- Kotvící odkaz – bod na stránce, kde se rolování zastaví
Krok 1
Nejdříve vytvořte novou stránku a zvolte Long Form Landing Page. V případě že nevidíte tuto šablonu, ujistěte se, že používáte nejnovější verzi OptimizePressu, případně se přihlaste do členské sekce OptimizePressu odkud si tuto šablonu můžete stáhnout. Najdete ji v Downloads > Extra Downlods.
Krok 2
Následně klikněte na tužku u toto tlačítka se šipkou:Krok 3
Následně je potřeba zkopírovat tento kousek kódu:Krok 4
Zkopírujte HTML <a id=“sekce2″></a> zobrazené níže.Krok 5
V LiveEditoru běžte na Page Setting (Nastavení stránky) > Other Scripts (Další scripty) a zkopírujte kousek Javascriptu zobrazeného níže:Případně ho máte zde ode mně k dispozici. Stahujte ZDE…
A je HOTOVO!Uložte si všechny části kódů do textového souboru, do Evernote nebo kamkoli jinam, odkud si je budete moci příště snadno zkopírovat. Nyní máte všechny HTML kódy a scripty, které potřebujete a můžete začít budovat své vlastní rolovací menu na jiných stránkách.
Plynule posuvné menu a skokové menu – video Tutorial
[mwvideo url=https://youtu.be/QBb8g7dKIRE is_saved=1][/mwvideo]Převzato ze stránek OptimizePress
Jak vytvořit plynule posuvné menu
Nyní můžete tvořit skutečné posuvné navigační menu s vytvořenými kotevními odkazy. Zde je návod jak se takovéto menu tvořilo v šabloně Long Form Landing Page v OptimizePressu. Na nové stránce, kde chcete tvořit menu nezapomeňte vložit Javascriptový kód, který jste si uložili do textového souboru nebo si ho ode mně stáhli.Krok 1
Nejprve přidejte nový řádek se 4 sloupciKrok 2
Nyní se pustíme do tvorby navigačních odkazů nebo menu. Přidejte Element (prvek) Headline (nadpis) a text nadpisu Sekce 1 (nebo jakkoli chcete) a z textu udělejte odkaz.Krok 3
Poté co jsem vytvořil první nadpis (Sekce 1), vytvoříme další nadpisy stejným způsobem. (Sekce 2, Sekce 3, Sekce 4). Pro příklad jsem použil názvy Sekce, vy už používejte názvy, které chcete v menu použít. Např. O nás, Kontakt nebo cokoli jiného co budete v menu chtít.Krok 4
Následně jsem zkopíroval kotvící kód <a id=“sekce2″></a> a vložil ten samý kousek kódu do každého řádku, kde jsem chtěl, aby můj odkaz skroloval (kde má zastavit). Zde je malé shrnutí propojení, aby to bylo naprosto jasné. Odkazy, které jsem vytvořil v navigačním menu, přijdou ke každému řádku na stránce.- Odkaz URL #sekce1 přejde na <a id=“sekce1″></a>
- Odkaz URL #sekce2 přejde na <a id=“sekce2″></a>
- Odkaz URL #sekce3 přejde na <a id=“sekce3″></a>
- Odkaz URL #sekce4 přejde na <a id=“sekce4″></a>
- Odkaz URL #onas přejde na <a id=“onas“></a>
- Odkaz URL #kontakt přejde na <a id=“kontakt“></a>
- Odkaz URL # přejde na <a id=“onas“></a>
- Odkaz URL #onas přejde na <a id=“onas“></a>