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ší. 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: 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 sloupci 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 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> 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>lt;/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. 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: 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. 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. 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
VELIKONOČNÍ MENU OD 30.3.2018 DO VYPRODÁNÍ ZÁSOB JSME PRO VÁS PŘIPRAVILI VELIKONOČNÍ MENU!! PŘEDKRM: 100 g FILÍROVANÉ KACHNÍ PRSO S OMÁČKOU Z LESNÍCH BRUSINEK S BAGETOU 75 Kč POLÉVKA: 0,3 l ŠPENÁTOVÁ POLÉVKA SE ZAKYSANOU S
SVATOMARTINSKÉ MENU NA JEŽKOVĚ STATKU OD 8.11.2019 JSME SI PRO VÁS PŘIPRAVILI SVATOMARTINSKÉ MENU POLÉVKA: 0,3 l HUSÍ KALDOUN S JÁTROVÝMI KNEDLÍČKY 40 KČ PŘEDKRM: 100 g HUSÍ JATÝRKA ZPRUDKA OPEČENÁ S JABLEČNÝM CHUTNEY, BAGETA 65 KČ HLAVNÍ CHOD: 1 ks HU
Potřebujete zabezpečit vaše okna a uvažujete o pořízení mříží? Máme pro vás mnohem zajímavější řešení. Nerezová posuvné okenice s možností uzamčení, podporují architektonický a estetický vzhled celé budovy. Splňují požadavky na exteriérovou ochranu budovy
projít na článekNovinky na Ježkově statku od 11.5.2020 Od 11.5.2020 pro Vás otevíráme letní zahrádku Otevírací doba je od 11:00 do 20:00 Poslední objednávku na jídlo přijímáme do 19:30 Nachystáno pro Vás máme naše stálé menu a denní menu Veškerá jídla Vám rádi nachystá
OptimizePress PlusPack plugin nové funkce, nastavení, styly. Už dlouhou dobu to vypadalo, že OptimizePress usnul na vavřínech. V aktualizacích, které vycházeli od OptimizePressu byli většinou jen opravy reagující na nové verze WordPressu, ale nových funk
projít na článek