Přistávací menu. Posouvání vstupní stránky na celou obrazovku – návrh cílové stránky. Jak udělat takový design vstupní stránky

Dnes vám chci upozornit na začátek lekce na téma: jak vytvořit jednoduchý banner pro váš web. Souhlasíte, banner zdobí jakýkoli web, přitahuje pozornost návštěvníků a může být použit pro reklamní účely.

Slovo banner pochází z anglické slovo„banner“, což znamená „vlajka“ nebo „průhlednost“. V moderní výklad pro webové stránky je banner něco grafický obrázek, která za svůj cíl předpokládá:
- reklama na produkt nebo službu,
— zpráva o jakékoli důležité události v životě webu (soutěž, propagace, zahájení školení...)
- prostě pozitivní informace pro návštěvníky webu za účelem zlepšení image (přání k svátku, pozitivní fráze a motivátory, které návštěvníky webu rozesmějí a zvednou náladu...)

Hlavní typy bannerů na internetu
Bannery, založené na typu grafického obrázku, který zobrazují na webových stránkách, existují ve třech hlavních typech: statické, animované a flashové.

Statické bannery používají jeden obrázek bez pohybu. Tento obrázek může být jen obrázek, pozadí nebo obrázek s nápisy, nebo jen nápisy. Obrázek může být jako v formátu jpg a v formátu gif(pokud má obrázek animační efekty).

Animované bannery (GIF) jsou několik sekvenčních obrázků, které se navzájem nahrazují a vytvářejí „efekt pohybu“. Každý snímek se mění postupně, přičemž se bere v úvahu nastavená rychlost závěrky (zpoždění) každého snímku. Tento typ banneru obvykle používá jednoduchý skript, plynulost pohybů v něm závisí na počtu mezirámy dávání vizuální efekt pohyby. Zároveň však platí, že čím složitější je scénář, tím více banner „váží“. I to je třeba vzít v úvahu při tvorbě animovaného banneru. Optimální množství rámy - 5-6 pro tento typ bannerů.

Flash bannery jsou výsledkem procesu programování a obvykle se vytvářejí v speciální programy, typ Adobe Flash. Tyto bannery používají vektorová grafika, který umožňuje vytvářet animační efekty s malou „váhou“ banneru a je možné jej také použít zvukové efekty, kvalitní flash bannery jsou náročné na výrobu a proto jejich vývoj nejčastěji provádějí kvalifikovaní specialisté.

Standardní velikosti bannerů
Webové stránky obvykle používají bannery standardních velikostí. Bannery mohou být vodorovné, svislé a čtvercové. Vytvořil jsem cheat sheet obrázky, které vám, jak doufám, pomohou při tvorbě banneru a které si můžete v případě potřeby vytisknout. Klikněte na odkaz s velikostmi bannerů, které vás zajímají, a objeví se před vámi obrázek!

Vytvoření statického banneru pro web
K vytvoření statického banneru budete potřebovat Photoshop nebo jiný grafický editor. Proces vytváření je poměrně jednoduchý a nevyžaduje velké úsilí. Skládá se z následujících operací:
vybrat velikost banneru,
hotový obrázek (pozadí, obrázek, koláž, animovaný obrázek...) přivedeme na velikost vybraného banneru,
vytvořit vnější obrys banneru,
napsat požadovaný text,
Výsledný banner uložíme ve formátu jpg, png nebo gif.

Pokud v nějakém máte alespoň minimální zkušenosti grafický editor, pak pro vás nebude těžké vytvořit jednoduchý statický banner. Jako nápovědu můžete použít můj ve Photoshopu.

Toto je banner, který jsem vytvořil pro svůj web ve Photoshopu.

Nebo můžete využít bezplatnou online službu

V tomto programu je velmi snadné a rychlé vytvořit statický banner, i když neznáte žádný grafický editor.
Pokusím se vám sdělit hlavní kroky při práci s tímto serverem.

2- Nabídka Rozvržení nabízí:
2.1 - vyberte velikost banneru (výchozí velikost, vlastní velikost banneru a standardní velikost banner z rozevíracího seznamu),
2.2 — výběr pozadí banneru: prosté pozadí s výběrem barvy, kterou potřebujete; gradientní pozadí - můžete si vybrat libovolné z navrženého seznamu; pozadí (obrázek, pozadí, koláž) je vaše, které si můžete stáhnout z počítače.

3- Po každé manipulaci s bannerem stiskněte tlačítko „Změnit banner“ a podívejte se, jaké změny ve vašem banneru nastaly. Pokud vám vše vyhovuje, přejděte na další tlačítko v hlavní nabídce.

4- Vyberte nabídku „Text“.

4.1 - do pole „text“ zadejte požadovaný text řádek po řádku,
4.2 – poté vyberte parametry písma: název, velikost, barvu písma a také rotaci textu pro každý řádek zadaného textu.
Stiskněte tlačítko 3 a posuňte text na samotném banneru tak, jak chcete. Jakmile uspořádáte text tak, jak potřebujete, stiskněte znovu tlačítko 3 a přejděte k dalšímu bodu.

5- Nabídka „Dopad“. Překlad je nesprávný. Nazval bych tento efekt výběru karty pro text. Na této kartě vyberte stín pro každý řádek textu v banneru. Po stisknutí tlačítka 3 uvidíte efekt.

6- Menu „Hranice“. Opět „vada“ překladu. Na této záložce jste vyzváni k výběru lemování vašeho banneru (rámečku).

7- Nabídka Formát. Vyberte formát, ve kterém chcete banner uložit.

8- Pokud se vám výsledná možnost nelíbí, klikněte na tlačítko „Začít nový“, to znamená, že začnete vytvářet nový banner.

9- Abyste si banner mohli uložit jako rozvržení, musíte se zaregistrovat na výše uvedené online službě a poté si můžete vytvořit vlastní databázi bannerů a příště použít dříve vytvořené bannery a provést v nich pouze některé změny (např. pouze text).

10- Služba online vám umožňuje stáhnout si do počítače vytvořený banner, který pak můžete nahrát na svůj web.

11- Kliknutím na tlačítko „Získat kódy“ uvidíte kód banneru, který můžete zkopírovat a poté vložit přímo na svůj web nebo článek.

To je pro dnešek vše. Ať se vám daří!
Vytvořil jsem tento jednoduchý banner pomocí výše uvedeného online službu doslova za 2 minuty.

Příště si povíme, jak vytvořit animovaný banner. Uvidíme se znovu!

Prapor je grafika, často animovaná, reklamní sdělení umístěné na webové stránce a opatřené odkazem na odkaz na inzerovaný zdroj.

Statické a dynamické bannery

Existuje statická a dynamická bannerová reklama. Statický je banner, který je umístěn po placenou dobu na přesně specifikované webové stránce a není nahrazen jiným při opětovném načtení této stránky. To znamená, že každý návštěvník dané stránky vidí v daném časovém období přesně toto reklamní sdělení. Příklady statických bannerů lze vidět na hlavních stránkách velkých zdrojů, obvykle v horní části stránky.

Dynamický tzv. banner, ke kterému se naopak nepřipevňuje konkrétní stránku a je náhodně demonstrován na různých zdrojích, jejichž rozsah je určen na základě přání inzerenta.

Dynamické i statické bannery jsou obvykle umístěny na webových stránkách ve speciálně určených blocích a jsou označeny jako „reklama“.

Specifikace Velikost

Banner může mít v zásadě libovolné svislé nebo vodorovné rozměry - je to jen reklamní obrázek! Ale jako všechno v tomto světě i tyto velikosti prošly standardizací, v důsledku čehož je dnes možné rozlišit několik hlavních typů. Nejběžnější jsou vzorky 468x60. Díky úspěšnému výběru velikosti stran mají takovéto reklamní obrázky dobrou odezvu a navíc skvěle zapadnou do „záhlaví“ většiny webových stránek. Velikosti 125x125, 120x90, 120x60 nejčastěji najdete na stránkách vlevo nebo vpravo ve sloupci nabídky webu. "Tlačítka" (88x31) jsou obvykle umístěna ve spodní části stránky.

Technologie výroby

Kromě rozdílů ve velikosti se bannery mohou lišit technologií výroby. Dříve podporováno formát JPEG a stejný statický GIF standard 87a. Později se objevil nový formát grafika pro Web – PNG (Portable Network Graphics), která umožňovala využití dost velký počet květiny a rozdal malý původní velikost soubor. Nejběžnějším a nejstarším formátem je GIF. Nejlépe se hodí pro neanimované nebo jednoduché animované bannery. Při použití formátu GIF je velikost velmi malá (což je dobré, protože zvyšuje pravděpodobnost, že uživatel načte banner až do konce).

V dnešním díle vám řeknu, co je to banner, jaké jsou hlavní typy bannerů, jejich velikosti a účel.

Co je to banner? Hlavní typy bannerů Ve venkovní reklamě Ve sportu

Na sportovní hry Bannery se obvykle používají jednorázově. Jsou určeny k poskytování podpory jednotlivému sportovci nebo týmu, nebo naopak k vyjádření nespokojenosti s něčím nebo někým.

Banner na internetu - co to je a proč je potřeba?

Myslím, že každý uživatel internetu banner alespoň jednou viděl. Mnoho lidí je už omrzelo, takže takoví lidé používají speciální nástavec prohlížeč pro blokování reklam na webových stránkách, plugin Adblock a další.

K čemu slouží banner?

Hlavním úkolem banneru je upoutat pozornost návštěvníka webu. A webmasteři, ti kluci, kteří mají své vlastní dobře propagované webové zdroje. Transparenty totiž umisťují proto, aby na nich vydělali. pro některé, bannerová reklama- To je hlavní zdroj zisku.

Historie bannerů

První banner na internetu se objevil už dávno, v minulém tisíciletí, kdy vyhledávače Yandex a Google ještě neexistovaly. Podle starých uživatelů se první banner objevil na internetu v roce 1994. Statický obrázek s vloženým odkazem na reklamní web.

Na tento obrázek se neustále klikalo, protože to bylo něco nového a neznámého.

V podstatě se bannery začaly umisťovat na sebe různými weby, aby přilákaly návštěvníky. Později si ale ti nejpodnikavější kluci začali uvědomovat, že za umístění banneru na svůj web si mohou účtovat peníze, protože jak se liší od pouličního billboardu?

Výsledkem bylo, že velké množství lidí, kteří o tom slyšeli, začalo vytvářet webové stránky, aby vydělali peníze prodejem bannerového prostoru. To je to, co přivedlo internet rychlý růst a do nekonečné číslo opuštěné stránky vytvořené pouze za účelem zisku.

Postupem času doznaly změn i bannery. Zpočátku bylo všechno skvělé, krásné. Ale každým rokem se obdélníková reklama stávala rušivější a začali aktivně bojovat proti bannerům. Dokonce i prohlížeče mají nyní funkci blokování vyskakovacích oken.

V moderní svět Stále se najdou tací, kteří rádi zabarikádují lokalitu vším, co se dá. Ale ti nejrozumnější webmasteři si uvědomili, že je lepší nepoužívat agresivní bannery.

Typy bannerů v online reklamě

Jakýkoli typ banneru je grafický obrázek ve formátu GIF nebo JPEG. Obrázek na nich může být buď statický (stacionární ve formátu jpg) nebo animovaný (pohybující se ve formátu gif; efekt pohybu v takovém banneru vzniká střídáním několika obrázků).

Existují tři typy bannerů:

• Statické bannery jsou jeden grafický obrázek, jako tomu bylo na začátku.
• GIF bannery jsou sekvence rastrových snímků, které se v určitém časovém intervalu navzájem nahrazují. Jedná se o složitější banner, jehož vytvoření vyžaduje určité dovednosti. Samozřejmě bude těžší než statický obrázek.
• Flash bannery nebo Java - takové reklamní bloky lze vyrobit v program Adobe Blikat. Nepoužito rastrová grafika, ale vektorová grafika, která umožňuje získat animaci s malou hmotností banneru. Zajímavá příležitost tohoto typu zvažuje se možnost použití zvukových efektů.

Kde objednat banner?

Internetový banner lze dnes vyrobit na míru každému. Je zde možnost si jej vytvořit sami, nebo si jej můžete objednat na. Na takových stránkách, s dovednostmi výrobce krásné bannery mnoho.

Typy a velikosti bannerů

Bannery jsou různé, osobně si v hlavě představuji takový malý obdélníkový banner nad článkem, 468 x 60 px. Dříve byly často zveřejňovány na webových stránkách.
Podle velikosti se tedy bannery dělí na:

• Vodorovné obdélníky: 728 x 90, 468 x 60, 234 x 60, 88 x 31, 120 x 60, 120 x 90.
• Svislé obdélníky: 300 x 600, 160 x 600, 120 x 600, 120 x 240, 240 x 400.
• Čtverce: 250 x 250, 125 x 125.
• „Téměř čtverce“: 336 x 280, 300 x 250, 180 x 150.

Hlavní úkoly bannerové reklamy

Něco prodat. V v tomto případě, měl by banner nepřímo nebo přímo tlačit uživatele k nákupu:

• Nejprve je nutné upoutat pozornost na produkt se zaměřením na zobrazený obrázek - tím se inzerent snaží nejen upozornit na produkt, ale pracuje na vytvoření pozitivního obrazu v myslích mas.
• Obrázek nebo animace mohou vzbudit zájem a zaujmout potenciálního klienta.
• Existuje mnoho triků, jak přilákat publikum, jedním z nich je podcenění. Například tam bude napsáno: budete překvapeni, že se za měsíc můžete stát milionářem, když...“, takových příkladů je tuna. Hlavní věc je přimět je, aby klikli na banner a provedli úplný přechod.
• Někdy stačí k motivaci uživatele k akci pouze kvalitní komplexní obsah. Někdo se zajímá o téma učení webového programování, ale banner ve skutečnosti říká toto ( volný kurz programování webu pro začátečníky). V tomto případě člověk klikne, protože ho to zajímá. Žádné reklamní triky, jen informace.
• Někdy se bannery instalují proto, aby se na ně neklikalo, ale aby byly jednoduše rozpoznány.

Jak vyrobit banner?

Toto je téma na samostatný článek, takže jen řeknu, že to lze provést pomocí standardního Malování, Photoshopu nebo online služby http://bannerovich.ru.

Po vytvoření musíte nahrát obrázek do kořenového adresáře webu a vložit skript na požadované místo, pracovat s widgety.

width=”200″ height=”200″ /> je šířka a výška. Banner by samozřejmě měl být nakreslen ve stejných rozměrech.

To je vše, nyní víte, co je banner, jak jej nainstalovat na web, proč je vůbec potřeba, odkud celé toto téma pochází a jaký dopad měl banner na internet jako celek.

Navigace dává pocit ovládání, což samo o sobě není špatné. Ale co pravidlo „jedna stránka, jeden cíl“? Na tuto otázku neexistuje jednoznačná odpověď (jako na většinu optimalizačních otázek), ale existuje několik skvělých případových studií, které vám mohou pomoci při rozhodování.

Optimalizace vstupní stránky

Přistání je nedílnou součástí strategie zvyšování zisků. V průměru se objem potenciálních zákazníků zvýší o 55 %, když společnosti zvýší počet vstupních stránek. Výzkumy však ukazují, že pouze 22 % společností je spokojeno se svým .

Vidíte všechny tyto prvky výše? Odpoutají pozornost a odvedou vás od vstupní stránky. Navigace, která vás odvádí od vaší vstupní stránky, maří účel její existence.

Vstupní stránka je autonomní stránka, na kterou se návštěvník dostane přes reklamní odkaz nebo z výsledků vyhledávání. Jeho úkolem je povzbudit uživatele k akci. Získejte například demo produktu nebo se zaregistrujte na webinář.

Je jasné, že navigace zde nemá moc smysl, ale pouze 16 % vstupních stránek ji neobsahuje. Předpokládá se, že v rozvržení vstupní stránky jsou potřeba odkazy na přechod do jiných sekcí. Podívejme se, co ukazují dělené testy.

Pouzdro "pro" navigaci

• porozumět vaší poloze;
• Snadno přejděte do dalších sekcí.

Existují tři typy navigace:

• hlavní;
• místní;
• kontextuální.

Tento typ představuje hlavní menu webu. Každý prvek v něm vede do určité části zdroje. Záhlaví na stránce Edgar je příkladem hlavní navigace:

Místní navigace

Toto jsou podsekce hlavní navigace ve formátu rozevírací nabídky, které strukturují informace. Na výše uvedené vstupní stránce Zoho je takové menu.

Kontextová navigace

Všechny tři typy jsou nezbytné k zobrazení zdroje a uspořádání obsahu na něm. Usnadňují přechod ze stránky na stránku a hlouběji se seznámíte s firmou.

Podle WordStreamu obsahuje až 96 % vstupních stránek alespoň jeden odkaz, který návštěvníka odvede pryč. Čísla říkají:

• pouze 4 % vstupních stránek nemají vůbec žádné odkazy;
• 81 % stránek obsahuje 1 až 9 odkazů;
• 14 % používá více než 10 navigačních prvků.

Umístění odkazů umožňuje řešit jiné problémy, než je hlavní účel vstupní stránky. Například sociální tlačítka. sítě zvyšují počet účastníků.

Vezměme si jako příklad stránku Meltwater.

Vstupní stránka nejen představuje produkt kliknutím na tlačítko CTA, ale také otevírá cestu k dalším sekcím prostřednictvím navigace. Koho nezajímá hlavní účel stránky, může se hodit něco jiného. Ukazuje se, že i když odkazy odvedou návštěvníka pryč, nakonec pro výsledek fungují.

Případ proti navigaci

Navigační odkazy na vstupní stránce nefungují, protože to není jedna ze stránek vašeho webu a měla by se od ní odlišovat. Odkazy v prvním okně zdroje vám pomohou studovat informace při přechodu z jedné stránky na druhou. Na vstupní stránce jednoduše odvedou uživatele.

Nezáleží na tom, jak atraktivní je nadpis, jak chytře jsou informace podané nebo jak kvalitní je . Navigační odkaz vás odvede od cíle konverze a nelze předvídat, zda se návštěvník vrátí. Rozsah pozornosti uživatele je omezený, takže jej musíte zaujmout od začátku a odstranit rušivé vlivy.

To platí i pro zápatí (zápatí stránky), vyplněné odkazy. Představte si návštěvníka, který si prohlíží vaši vstupní stránku a chystá se kliknout na tlačítko s výzvou k akci, ale najednou ho vyruší odkazy níže. To ovlivní vaši konverzi.

Například na vstupní stránce loterie Better Homes and Gardens je velká šance, že se návštěvník bude chtít dozvědět více o Meredith Corporation a odchýlí se od cesty vedoucí ke kliknutí na tlačítko CTA.

Příkladů je dost, nyní se podívejme, co dělené testy říkají o vlivu odkazů na konverzi. Test je nejlepší způsob, jak zjistit, co je na vstupní stránce efektivní a co destruktivní. Chcete-li vidět pozitivní dopad odstranění navigačních odkazů, podívejte se na příklad AmeriFirst.

Marketéři chtěli zlepšit výkon, ale váhali s přepracováním celé stránky ze strachu ze ztráty důvěry zákazníků. Bylo přijato rozhodnutí odstranit navigační lištu, díky čemuž byla stránka přehlednější a vedlo k 30-40% nárůstu konverzí. Zde jsou rozdíly mezi těmito dvěma stránkami:

Podobně Hubspot testoval pět vstupních stránek s vysokým objemem provozu. Verze A, na rozdíl od verze B, měla horní a spodní navigační lištu a tlačítka sociálních sítí.

Data ukazují, že odstranění všech navigačních odkazů zvýšilo konverze.

Je obzvláště zajímavé, že vyloučení navigace ze středu konverzního trychtýře vedlo ke zvýšení o 16 % a 28 % a z horní části trychtýře - 0–4 %.
Když tým Minders otestoval svou vstupní stránku a odstranil navigační panel, během měsíce se konverze zvýšila z 9,2 % na 17,6 %.

Test číslo čtyři. Yuppiechef je přední online prodejce prémiového kuchyňského nádobí se sídlem v Jižní Africe. Testovali odstranění navigační lišty, aby se návštěvníci nenechali rozptylovat od hlavního konverzního úkolu registrace k vytvoření online seznamu svatebních darů.

Po odstranění navigační lišty se stalo toto:

Tato možnost zvýšila konverzi na 100 %.

Pokud na vstupní stránce nejsou žádné nadbytečné odkazy (kromě tlačítka CTA), nic neodvádí pozornost uživatele od hlavního úkolu. Vstupní stránka bez odkazů je zaměřena na jednu akci, což znamená, že jí návštěvník bude věnovat pozornost. Navigační odkazy však nejsou jen rušivým prvkem – jsou plné materiálních ztrát.

Pokud k propagaci používáte vstupní stránku, pak platíte za každého návštěvníka. A pokud stránka nevede k cíli konverze, jednoduše přicházíte o peníze. Bez ohledu na to, jak vytvoříte vstupní stránku - pomocí šablony nebo od začátku, navigační odkazy odvádějí návštěvníky od hlavního úkolu a přecházejí na vedlejší.

Je vhodné upřesnit, že je zcela normální umisťovat odkazy, které usnadňují navigaci a práci na stránce. Dlouhé vstupní stránky cvičí umisťování pohyblivých navigačních panelů, které pomáhají přecházet z jednoho bloku informací do druhého.

Stránka agentury Conversion XL má nabídku, která vám umožňuje pohybovat se po vstupní stránce bez posouvání.

Pokud je na stránce mnoho informací, nabídka v záhlaví vám umožní okamžitě přejít do požadované sekce. To je pohodlnější než nekonečné posouvání sekcí.

Stránka aplikace Google funguje takto:

Závěr

Na rozdíl od webu by měla vstupní stránka vést ke konkrétní akci a zaměřit na ni pozornost. Když přidáte odkazy, zvýší se šance na ztrátu návštěvníků.

Na běžném zdroji je navigace nezbytná. Návštěvníkovi se také vyplatí poskytnout mapu webu, protože potřebuje zobrazit několik stránek s různými nabídkami. Ale umísťování odkazů na vstupní stránku je zbytečné, protože je nepravděpodobné, že se ztratíte na jediné stránce vytvořené pro konkrétní úkol.

Takže data jsou neúprosná. Vstupní stránka by měla sloužit jednomu účelu. Neměli byste svým návštěvníkům dávat celou řadu důvodů, proč vás opustit.

Ahoj přátelé, kolegové! jak se máš? Doufám, že se všem daří skvěle :) Dnes si uděláme jednoduché adaptivní menu pro naši vstupní stránku. Lidé se na to ptají stále častěji a já si takové otázky zapisuji a ve volném čase se snažím psát články na tato témata.

Děkuji, že mi tímto způsobem dáváte nové nápady a pomáháte rozvíjet blog. Mimochodem, na jaké téma byste si chtěli přečíst další článek? Napište prosím do komentářů, je to pro mě velmi důležité. Nyní začněme...

Jak vytvořit responzivní menu pro web

Google potvrdil, že od poloviny dubna se odezva webových stránek pro mobilní zařízení stane jedním z hodnotících faktorů. V tomto ohledu jsou všechny materiály o tom, jak přizpůsobit vaši vstupní stránku, relevantnější než kdy jindy. Dnes nebudu vysvětlovat nic složitého, ale naopak vám řeknu, jak vytvořit velmi jednoduché adaptivní menu s minimem času.

V podstatě to bude html + css, ale ke zpracování kliknutí budete potřebovat velmi malý skript. Tak…

Responzivní horizontální menu

Začněme s html. Nejprve zahrňme knihovnu jquery. Pravděpodobně jej používáte již delší dobu, takže se ujistěte, že jej nepřipojujete podruhé:

Nyní značení. Běžný neuspořádaný seznam a malý div, který obsahuje ikonu nabídky. Bude vidět pouze při nízkém rozlišení.

Cena ke stažení

Kontakty

Recenze

Jak vidíte, není to nic složitého, myslím, že si to můžete vylepšit sami podle potřeby.
Nyní přidáme styly:

#menu ( pozadí: #2ba9c0; šířka: 100 %; odsazení: 10px 0; zarovnání textu: na střed; ) #menu a ( barva: #fff; text-decoration: none; odsazení: 12px 12px; ) #menu a: hover ( border-bottom: 4px solid #fff; background: #078ecb; ) .itemsMenu li ( display:inline; padding-right: 35px; width:100%; margin: 0 auto; ) .itemsMenu li img( vertical-align : middle; margin-right: 10px; .iconMenu ( barva: #fff; kurzor: ukazatel; displej: žádný; ) .showitems ( display:block !důležité; ) @media screen and (max-width: 600px) ( # menu a( padding-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0 ))

Nyní, když zmenšíte okno prohlížeče, uvidíte následující obrázek:

Opravdu bych nerada popisovala každý řádek, protože blog není o layoutu jako takovém. Pokusím se to vysvětlit.

Nejprve nastavíme vlastnost display:inline na prvky li, aby se zobrazovaly vodorovně vedle sebe. Mohl jsem použít float:left, ale rozhodl jsem se to udělat tímto způsobem. A skryjte ikonu nabídky s vlastností display:none. Když je rozlišení obrazovky menší než 600 pixelů, odstraňte vložení z prvků li, skryjte je a zobrazte ikonu. Stručně řečeno - ano.

Nyní potřebujeme jednoduchý skript, který by zpracoval kliknutí na ikonu nabídky a ukázal její prvky:

$(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" showitems"); ) else ( $(".itemsMenu").addClass("showitems"); ) )); ));

Takhle. Vzal jsem to samostatný soubor a zahrnul jej před závěrečnou značku těla.

To je vše. Tímto způsobem můžete rychle dokončit jednoduché responzivní menu Pro vstupní stránka.

Samozřejmě existují nevýhody. Odsazení se určuje v pixelech, ale můžete nastavit všechny vzdálenosti procento. Prostě to nebylo potřeba. Pokud by se jednalo o plnohodnotný web, tak bych použil ikony svg nebo fontů, ne png a přepočítal bych odsazení v procentech. A tak to bylo trochu improvizované :) Doufám, že je vše jasné? Nashledanou.