Jak na plynule posuvné menu v OptimizePressu

Datum

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
Některé společnosti používají tento styl stránek (one page) pro celé webové stránky. Tyto dlouhé jednostránkové weby jsou čím dál oblíbenější. smooth-scroll-menu 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:
  • 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
Při čtení tohoto článku by se vám mohli hodit informace i z článku CSS vychytávky pro OptimizePress. Můžeme začít…

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:
  1. Javascriptový kód – vytvoří animovaný navigační efekt (plynulý posun)
  2. URL odkaz – odkaz který po kliknutí posune stránku na požadované místo
  3. 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.

long-form-landing-page

Krok 2

Následně klikněte na tužku u toto tlačítka se šipkou: link-se-sipkou Zkopírujte si Link URL #sekce2 (nebojte se, číslo dva můžete kdykoli změnit) sekce2

Krok 3

Následně je potřeba zkopírovat tento kousek kódu: sekce2-1 To uděláte jednoduše editací řádku (row): sekce2-2

Krok 4

Zkopírujte HTML <a id=“sekce2″></a> zobrazené níže. sekce2-3

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: otehr-scripts

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 sloupci add-new-row

Krok 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-link 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. text-link1

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. step3

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>
V praxi by to mohlo vypadat nějak takhle:
  • 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>
Je to srozumitelné? Máte to? Dobře… pokračujeme. Nyní upravíme první řádek (row), kde chceme aby se nám posun zastavil po kliknutí v menu. Vybereme Row (řádek) a přes tužku půjdeme do úprav. Do pole Code before row (kód před prvkem) vložíme <a id=“sekce1″></a> do druhého řádku <a id=“sekce2″></a> a tak dále. row-option1 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: row-option2

Krok 5

V posledním kroku je třeba vložit Javascriptový kód do Page Setting (Nastavení stránky) > Other Scripts (Další scripty) > Footer (Patička) – je to to samé místo, odkud jsme ho kopírovali z šablony Long Form Landing Page. otehr-scripts 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.

Jak vytvořit skokové skrolovací menu

Pokud jste postupovali podle návodu výše a vytvořili si plynule posuvné menu, zjistili jste, jak je to snadné. Za prvé, v tomto druhém návodu NEPOTŘEBUJETE žádný Javascriptový kód pro toto menu. Za druhé, postupujte podle kroků 1-3 v návodu na vytvoření plynulého posuvného menu a poté se vraťte sem.

Krok 4

Dále budete muset přidat kotevní kód do každého řádku, kde budete chtít, aby se vám posuv z menu zastavil. Nyní namísto použití  <a id=“sekce2″></a> v Code before row (kód před prvkem) použijete: <a name=“sekce1″></a> Všimněte si, že je použit text name namísto id. row-option4 Poté co upravíte každý řádek, stránka by měla v LiveEditoru vypadat takto: row-option3 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í: row-option5 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: row-option6 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…

Další
články