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:
- 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: Zkopírujte si Link URL #sekce2 (nebojte se, číslo dva můžete kdykoli změnit)Krok 3
Následně je potřeba zkopírovat tento kousek kódu: To uděláte jednoduše editací řádku (row):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. 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.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>