Ako urobiť navigáciu v css. Navigačné lišty pomocou CSS

Vo svojej práci venoval veľa času vývoju rôznych typov navigácie pre webové stránky, a to pomocou . Rozhodol som sa spojiť všetky novinky na túto tému a uverejniť ich ako druh zbierky lekcií o vytváraní navigačného menu. Prehľad predstavuje rôzne typy menu, pokiaľ ide o štýl prevedenia a funkčnosť, viacúrovňové s rozbaľovacími podmenu, menu v populárnom štýle „akordeón“, vertikálne a horizontálne s dynamickými efektmi, jednoduché a zložité v štruktúre.
Na základe týchto lekcií, na základe uvedených príkladov, experimentovania a s trochou fantázie môžete jednoducho urobiť svoju webovú stránku tak, aby vynikla z davu, bola veľkolepá a nezabudnuteľná.

✓ Kliknutím na nadpis sa dostanete priamo na stránku s podrobným popisom celého procesu a kliknutím na obrázok prejdete na stránku s ukážkou fungovania Vami zvoleného menu ツ

Toto úžasné menu bolo vytvorené pomocou čistých štýlov a funkcií CSS3, bez akýchkoľvek ďalších obrázkových súborov alebo javascriptu. S modernými prehliadačmi, ktoré podporujú nové štandardy CSS3, je možné využiť všetky magické vlastnosti mágie CSS3 v dizajne webových stránok. Uvedením tejto techniky tvorby jedálneho lístka do praxe môžete dosiahnuť úžasné výsledky.

V tomto návode sa naučíte používať štýly a nové vlastnosti CSS3, bez použitia javascriptu alebo obrázkov si vytvoríte skvelé, funkčné a rýchle menu štýlu akordeónu.

Podrobný návod na vytvorenie krásneho menu v štýle akordeónu pomocou CSS a jQuery. Menu bolo testované a funguje skvele vo všetkých moderných prehliadačoch. Použitím funkcie lineárneho prechodu css3 v dizajne je toto menu výraznejšie a dynamickejšie.

Lekcia predstavuje celý proces vytvárania zaujímavého, vertikálneho menu pre webovú stránku, postaveného výlučne na použití CSS a malého súboru s obrázkom, ktorý môžete v prípade potreby ľahko upraviť podľa svojich potrieb.

Ako pokračovanie predchádzajúcej lekcie bol pridaný podrobný popis možnosti vytvorenia vertikálneho menu s vnorenými podpoložkami

Malá, ale zároveň podrobná lekcia o vytváraní kvalitného navigačného bloku v štýle „Akordeón“ s malým množstvom kódu HTML, CSS a JavaScript s krásnym rozhraním.

Ďalšie zaujímavé riešenie z hľadiska vytvorenia viacúrovňového navigačného menu pomocou jQuery. Kompatibilita konečného produktu s rôznymi prehliadačmi, animácia JQuery a gradient CSS3 robia navigačný blok ešte atraktívnejším.

Páči sa mi riešenie, aby sa ponuky správali ako rozbaľovacie ponuky. Remeselníci často používajú JavaScript na dosiahnutie tohto efektu, ale tento tutoriál ukazuje, ako dosiahnuť to, čo chcete, iba pomocou čistých štýlov a funkcií CSS.

Preklad a prispôsobená verzia lekcie o vytvorení krásneho, horizontálneho menu v štýle „Lava-Lamp“ Na internete je veľa verzií menu vyrobených v tomto štýle, na základe vedomostí získaných z lekcie si môžete voľne vytvárať. niečo svoje.

To je zatiaľ všetko. Táto kolekcia predstavuje len malú časť toho, čo sa dá urobiť, pokiaľ ide o vytváranie krásnych, individuálnych a hlavne funkčných navigačných ponúk pre vaše projekty. Dúfam, že niekto nájde pre seba vhodnú možnosť a použije ju pri svojej práci na zlepšovaní stránky. Ak sa niekomu článok páčil, komentujte, zdieľajte s priateľmi cez Twitter, Google+ a iné sociálne siete. alebo si môžete článok uložiť ako záložku

Navigačné menu je pomerne jednoduchým dizajnovým prvkom. Vytvoríme neusporiadaný zoznam, nastavíme jeho štýl ľavého odsadenia a vytvarujeme jeho vzhľad. Adaptívny dizajn, ktorý si získava na popularite, však kladie nové požiadavky na menu.

V tomto návode vytvoríme jednoduché, ale efektívne responzívne menu, ktoré sa dá veľmi ľahko prispôsobiť na použitie v akomkoľvek projekte.

Pridanie zoznamu

Pridajme jednoduchý neusporiadaný zoznam s ôsmimi odkazmi. Ukážka lekcie je veľmi citlivá na počet položiek ponuky, konkrétne, všetky nastavenia sa vykonávajú pre osem položiek.

RUSELLER
O nás
klientov
Tvorba
Zvuk
Stiahnuť ▼
Blog
Kontakt

Pridávanie podpisov

Aby bola ponuka zaujímavejšia a užitočnejšia, pridajte pod nadpis hlavnej ponuky riadok textu. Existuje mnoho spôsobov, ako vyriešiť takýto jednoduchý problém. V našom návode jednoducho vložíme zalomenie riadku a pridáme malý prvok pre druhý riadok. Týmto spôsobom môžeme upravovať štýl titulku bez použitia ďalších prvkov div, tried a ID.

RUSELLER
Domov
O nás
náš tím
klientov
Naši priatelia
Tvorba
Naša práca
Zvuk
Vypočujte si nás
Stiahnuť ▼
Užitočné
Blog
Prečítajte si o nás
Kontakt
Napíšte nám

Takto bude vyzerať naše menu po vykonaných operáciách:

Začnime definovať štýly

Kód CSS začneme tak, že použijeme univerzálny selektor na resetovanie okrajov a výplne a priradíme vlastnosť box-sizing: border-box všetkým prvkom stránky. Tento krok nám pomôže jednoducho nastaviť veľkosti prvkov v percentách aj pri použití rámov.

* ( padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

Skôr ako začneme definovať štýly prvkov, nastavíme sadu vlastností pre nadradený prvok. Najprv nastavme jeho šírku na 90 %. Teraz sa náš kontajner roztiahne, aby pokryl všetok dostupný priestor, ale v dizajne zostane priestor na vytvorenie voľnej zóny. Kontajner tiež nastavíme v strede pomocou automatického určenia veľkostí polí.

Taktiež upravíme štýl nezoradeného zoznamu, aby sme sa vyhli používaniu štítkov.

Štýly menu

Teraz začnime definovať štýly pre položky ponuky.

Nav li a ( displej: blok; plávajúci: vľavo; šírka: 12,5 %; výplň: 10px; pozadie: #444; pravý okraj: 1px plný #fff; farba: #fff; písmo: 700 13px/1,4 "PT Serif" , Helvetica, Verdana, Arial, bezpätkové zdobenie textu: žiadne text-transform: veľké písmená ) /*MALÝ TEXT*/ nav small ( farba: #aaa; písmo: 100 11px/1 Helvetica, Verdana, Arial, sans; -serif-transformácia textu: žiadna;

Najprv definujeme formulár pre každú položku zoznamu. Vyrobíme všetky prvky bloku odkazov, posunieme ich doľava, nastavíme šírku a malé odsadenie. Získame pomerne veľký obdĺžnik Šírka 12,5% sa získa ako výsledok výpočtov 100% / 8 (počet položiek menu).

Potom určíme vzhľad. Nastavte pozadie a rám.

Dokončí všetky štýly textu ponuky. Použité písmo je PT Serif, ktoré nájdete na webovej stránke Webové písma Google.

Pre podpisy nastavte farbu, odstráňte transformáciu veľkých písmen a použite font Helvetica.

Zmení sa pri umiestnení kurzora myši na položku ponuky

Keď umiestnite kurzor myši na položku ponuky, stmavne. Transformácia sa používa na vytvorenie dodatočného efektu.

Nav li a ( pozadie: #444; pravý okraj: 1px plný #fff; farba: #fff; displej: blok; plávajúci: vľavo; písmo: 700 13px/1,4 "PT Serif", Helvetica, Verdana, Arial, sans- pätka: 10px: šírka: 12,5%; : prechod na pozadí 0,5 s ľahkosť;

Oprava rámu

Teraz sa poďme zaoberať malou vizuálnou chybou v rámci nášho jedálneho lístka. Každá položka má biely okraj, ktorý slúži ako oddeľovač. To znamená, že posledný bod nepotrebuje rám. Použime špeciálnu pseudotriedu.

/*HRANICIA POSLEDNEJ POLOŽKY*/ nav li:last-child a ( border: none; )

Na obrázku nižšie je zobrazené menu na špeciálnom sivom pozadí, kde je vidieť rozdiel medzi možnosťami.

Prispôsobenie menu

Tento projekt je dobrým príkladom medzi fluidným a responzívnym dizajnom. Naša ponuka má momentálne gumené prevedenie (šírka sa určuje v percentách), ale nie prispôsobivé. Ak začnete zmenšovať šírku obrazovky, ponuka sa zmení na hrozný dizajn:

Na nápravu situácie využijeme mediálne dopyty. Najlepší spôsob, ako nájsť aplikačný bod mediálneho dotazu, je test.

1220 pixelov

Prvé problémy nastávajú pri šírke okolo 1200 px. Dlhý text niektorých odsekov sa začína rozpadávať, pretože nemá dostatočnú šírku.

Ak chcete situáciu napraviť, stačí zmeniť veľkosť písma:

@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px)( nav li a (font: 700 10px/1.4 "PT Serif", Helvetica, Verdana, Arial, bezpätkové) ; ) nav small ( font: 100 10px/1 Helvetica, Verdana, Arial, bezpätkové; ) )

930 pixelov

Ďalší bod, ktorý sa zobrazí pri zmenšení veľkosti obrazovky, je 930 pixelov. Tu sa jedálny lístok viac rozpadá.

Okrem opravy veľkosti písma je potrebné prebudovať menu do dvoch riadkov.

@media only screen and (max-width: 930px), only screen and (max-device-width: 930px)( nav li a (šírka: 25%; border-bottom: 1px solid #fff; font: 700 11px/1.4) "PT Serif", Helvetica, Verdana, Arial, bezpätkové ) nav li:posledné-dieťa a, navigačné li:n-té-child(4) a (pravé ohraničenie: žiadne; ) nav li:n-té-child(5; ) a, nav li:nth-child(6) a, nav li:n-th-child(7) a, nav li:nth-child(8) a ( border-bottom: none; ) )

580px a 320px

Dvojriadkový formát funguje dobre až do šírky obrazovky menšej ako 600 pixelov a potom sa tiež skreslí.

Tu preskupujeme dizajn ponuky do dvoch stĺpcov so štyrmi riadkami. A pri veľkostiach obrazoviek menších ako 320 pixelov je potrebné zmenšiť aj veľkosť písma.

@media only screen and (max-width: 580px), only screen and (max-device-width: 580px)( nav li a (šírka: 50%; písmo: 700 12px/1,4 "PT Serif", Helvetica, Verdana, Arial, sans-serif-top: 12px; a ( border-bottom: 1px solid #fff; ) ) @media only screen and (max-width: 320px), only screen and (max-device-width: 320px)( nav li a (font: 700 11px/1.4" PT Serif", Helvetica, Verdana, Arial, sans-serif) )

Teraz sa naša ponuka prispôsobí veľkosti obrazovky.

Záver

Vytvorenie prispôsobeného dizajnu je pomerne náročný proces. Veľa času sa strávi starostlivým testovaním a výberom hodnôt.

Dobrý deň všetkým, ktorí práve čítajú túto publikáciu. Dnes vám chcem povedať o jednom z nástrojov na vytváranie webových stránok, bez ktorého sa nezaobíde žiadny webový zdroj. Toto je ponuka lokality, alebo ako sa tiež hovorí mapa lokality. Dnes existuje neobmedzené množstvo druhov a podtypov jedálnych lístkov.

Vývojári internetových obchodov, blogov, vzdelávacích služieb a iných zdrojov experimentujú a vytvárajú stále viac nových a nezvyčajných máp. Po prečítaní článku sa dozviete, do akých hlavných skupín sú rozdelené všetky typy navigačných panelov, budete si môcť každý z nich vyskúšať a tiež sa naučíte, ako napísať kód menu pre html web. Teraz poďme na vec!

Nástroje na vytvorenie navigačnej lišty

Existuje niekoľko spôsobov, ako vytvoriť menu v značkovacom jazyku. Ich základnou koncepciou je použitie nečíslovaného zoznamu. V html 4, ktorý je nám známy, teda vývojári píšu značky na stránku

Ako bolo uvedené v predchádzajúcich publikáciách, párový prvok

- jeden prvok zoznamu. Pre prehľadnosť si napíšme kód pre jednoduché menu:

Navigácia
Navigácia na stránke
- Domov
- Novinky týždňa
- Technologický pokrok
- Chat
S príchodom platformy však bol značkovací jazyk doplnený o ďalšie značky. Preto je ponuka moderných webových stránok vytvorená pomocou špeciálnej značky< menu>. Pri používaní sa tento prvok nelíši od zoznamov s odrážkami.

Namiesto jedného< ul>je predpísaný< menu>. Pri posudzovaní z pracovnej stránky sa však objavujú výrazné rozdiely. Takže druhý príklad urýchľuje prácu vyhľadávacích programov a robotov v . Pri analýze štruktúry lokality okamžite pochopia, že tento kúsok kódu je zodpovedný za mapu lokality.

K dispozícii sú horizontálne, vertikálne a rozbaľovacie ponuky. Niekedy je navigačný panel navrhnutý ako obrázok. Odkedy sa technologický segment rozšíril, webové služby sa prispôsobujú, t.j. Štruktúra stránky sa automaticky prispôsobí veľkosti obrazovky zariadenia. Pozrime sa na uvedené skupiny menu.
Vytvorme model horizontálnej navigácie
Tento typ navigácie je najobľúbenejší. Keď je panel navrhnutý horizontálne, všetky položky ponuky sa nachádzajú v hlavičke stránky alebo v „päte“ (niekedy sú navigačné prvky duplikované a zobrazujú sa súčasne v hornej aj dolnej časti).

Ako príklad vytvoríme horizontálny panel, ktorého položky menu budú navrhnuté pomocou CSS (kaskádové štýly), alebo skôr transformované. Takže každý jednotlivý prvok bude umiestnený v skosom obdĺžniku. Zaujatý?

Na transformáciu používame vlastnosť css s názvom transform . Na špecifikáciu transformácie sa používa vstavaná funkcia skewX, ktorá určuje uhol skosenia v stupňoch.

Bohužiaľ, každý prehliadač pracuje s touto vlastnosťou po svojom, napriek predpísaným štandardom. Preto boli vytvorené špeciálne predpony, ktoré to označujú:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
Teraz aplikujme získané vedomosti na písanie príkladu.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Horizontálny panel
Domov

O spoločnosti

Produkty

Kontakty

Horizontálny panel li ( displej: inline-block; okraj-pravý: 6px; pozadie: #FF8C00; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) ; -ms-transform: skewX(-45deg); -moz-transform: skewX(-40deg); li:hover (pozadie: #1C1C1C; )
Domov
O spoločnosti
Produkty
Kontakty

Pre druhý program používame ako základ predchádzajúci kód. Chcel som, aby moje vertikálne položky ponuky mali skôr zaoblené rohy ako skosené.

Na tento účel som použil inú vlastnosť css border-radius .

V predchádzajúcich článkoch som už s týmto parametrom pracoval, takže si nemyslím, že budú problémy s pochopením jeho fungovania.

Vertikálny panel li( display: block; margin: 13px; padding: 13px; background: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; ) a ( color: # fff; ) li:hover ( pozadie: #1C1C1C; )

Domov
O spoločnosti
Produkty
Kontakty

Ako ste si už všimli, hlavnou zmenou v tomto kóde je absencia zobrazenia: inline-block deklarácia, ktorá bola vlastne zodpovedná za horizontálne usporiadanie navigačných položiek.

Pozreli sme sa na hlavné skupiny navigačných panelov, ale existuje niekoľko ďalších druhov alebo ešte lepšie doplnkov.

Niekedy nastanú situácie, keď niektoré body dopĺňajú tie hlavné. V tomto prípade sa nezaobídete bez rozbaľovacích zoznamov. Vytvárajú sa prostredníctvom transformácií pomocou nástrojov css.

Nižšie prikladám kód malého programu, ktorý implementuje tento prístup.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

Telo rozbaľovacieho zoznamu ( padding-left: 30%; font-size: 18px; ) .m-menu ( margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background : #FF8C00; ) .m-menu > li ( poloha: relatívna; zobrazenie: vložený blok; ) .m-menu a ( zobrazenie: blok; ľavý okraj: -2px; odsadenie: 13px; farba: #fff; okraj -left: 3px solid #fff; ) .m-menu a:hover (pozadie: #1C1C1C; ) .m-menu .s-menu (vľavo: 10px; pozícia: absolútna; zobrazenie: žiadne; šírka: 155px; okraj: 0; štýl-zoznamu: žiadny;

Čo je jedným z hlavných prvkov každej internetovej stránky? Samozrejmosťou je navigačné menu. Každé menu je užitočnou súčasťou webovej stránky, pretože prostredníctvom nej môže používateľ prechádzať do iných sekcií stránky. Hlavná interakcia návštevníka s webovou stránkou sa uskutočňuje prostredníctvom navigačného menu. V súčasnosti na webových stránkach nájdete stále atraktívnejšie a pohodlnejšie navigačné menu.

Dnes vám predstavujeme 62 atraktívnych navigačných menu založených na technológii CSS, javascript alebo Flash.

Navigačná ponuka v CSS

Hry ako kasína alebo hady a rebríky, zdobené krásnym farebným menu.

Tu vidíme výbornú jemnú farebnú schému a zaujímavý efekt pri rozširovaní podmenu.

Steven Wittens nám dáva ďalší pohľad na toto menu.

Na stránke UX Booth si môžete pozrieť štýlové, no veľmi jednoduché menu.

Webová stránka MacRabbit samozrejme používa ponuku v štýle MAC OS alebo Apple.

Webová stránka Joyent používa jednoduché, obchodne vyzerajúce menu, ktoré obsahuje zoznam prác spoločnosti.

Prepracovanosť a jednoduchosť tohto portfólia vás určite osloví.

Veľké menu vo forme obrázkov určite upúta vašu pozornosť. Ako vidíte, nie veľmi tradičný spôsob tvorby jedálneho lístka.

Rozbaľovacia ponuka, ktorá používa 2 farby na symbolizáciu aktívnej položky ponuky a neaktívnej položky.

Americká nahrávacia spoločnosť Small Stone recordings používala menu v podobe rádia, alebo v podobe Space Echo Roland SE-201.

Druh mapy, ktorá vám umožní „preskúmať“ celú webovú stránku.

Kruhové menu v štýle Apple s aplikáciami pre iPhone.

Clearleft používal niečo ako kalendár s naplánovanými úlohami ako menu.

Zdá sa, že zvýraznená položka ponuky je stlačená.

Kliknutím na položku ponuky sa zobrazí ďalšia podponuka. Menu vyzerá celkom jednoducho, hoci je natreté na čierno.

Toto menu používa jednoduchý a pekný efekt vznášania.

Veľkosť písmen je taká roztomilá a nezvyčajná a práve to upúta vašu pozornosť.

Vynikajúce riešenie pre použitie blokovej navigácie, ktorá implementuje skvelý efekt vznášania.

Vynikajúca zelená farba a vzhľad ponuky v štýle listov oslovia vaše oko. Je tu tiež výborný efekt, ktorý vám pomôže určiť, v ktorej podsekcii sa práve nachádzate.

Dizajnéri webovej stránky Ronny Pries použili skvelý koncept navigačného menu. Používatelia sa riadia plánom na poschodí.

Ďalším kreatívnym spôsobom, ako implementovať navigačné menu, je použiť obrázok ovocného stromu, cez ktorý môžete prejsť do ďalších podsekcií.

Pozrite si, ako Matt Dempsey kreatívne využíva ťahy štetcom.

Vynikajúca možnosť implementácie navigačného menu.

Vertikálne karty, ktoré vyzerajú ako priečinky, ktoré fungujú priamo na webovej lokalite. Táto metóda sa používa veľmi zriedka, ale funguje a vyzerá skvele.

Navigačné menu implementované v štýle punk rockovej hudby. Pozrite sa, ako Jeff Sarmiento implementoval túto myšlienku.

Niečo ako hierarchia. Ďalší kreatívny spôsob implementácie navigačného menu.

Ikony zvyšujú pocit interakcie s ponukou.

Toto navigačné menu má veľmi zaujímavý efekt pri prejdení kurzorom myši.

Navigácia, ktorá umožňuje vykonať niektoré úpravy pomocou špeciálnych posuvníkov.

Zaujímavé a atraktívne menu v štýle tarotových kariet. Ak kliknete na kartu, okamžite pôjde do ohňa.

Plynulé navigačné menu, ktoré vám dá pocit pohybu vĺn na jazere.

Web Nick Jones používa na navigáciu v portfóliu jednoduchú, ale dynamickú navigačnú ponuku.

Na stránke Marca Ecka je nám prezentovaná navigácia vo forme obrázkovej galérie. Návštevníkom umožňuje prechádzať sa po stránkach umenia a filozofie.

HBO je niečo ako archív filmových dokumentov. Navigačné menu umožňuje interaktívny výber filmov.

Zaujímavé navigačné menu s jednoduchým efektom vznášania. Keď umiestnite kurzor myši na ikonu, zobrazí sa obsah ponuky.

Agentúra pre návrh navigačného menu so sídlom v New Yorku a Fort Lauderdale.

Štýlový dizajn navigácie v novoantickom štýle s freskovým pozadím.

Webová stránka Nick Ad používa flexibilné, no ľahko použiteľné navigačné menu. Kliknite na ľubovoľnú oblasť na stránke a uvidíte zaujímavý efekt.

Kreatívny človek využíva vlastnú tvorbu na prilákanie návštevníkov do svojho portfólia.

Webová stránka sekcie Seven obsahuje zaujímavé menu v štýle brožúry s podmenu.

Navigačná ponuka, ktorá sa otvára a zatvára po výbere určitých položiek.

Na webovej stránke Beside je navigačné menu implementované v dúhovom štýle.

Koncept kartónového portfólia. Veľmi zaujímavý efekt vznášania.

Malé kocky umiestnené spolu fungujú ako navigačné menu.

Farebne nasýtená mapa so „zvukom“ textúry národných havajských papúč, na ktorú je hrdý celý národ.

Stôl s vecami symbolizujúcimi menu: telefón na kontaktovanie administratívy, časopis na prechod do portfólia, noviny na prezeranie noviniek a ďalšie.
Je veľmi zaujímavé, keď sa ako navigácia používajú skutočné veci.

Skvelý kreatívny spôsob implementácie navigačného menu. Každý prvok je svojím spôsobom krásny a všetky oživujú celý web. Takéto metódy sa používajú veľmi zriedkavo, ale je to skutočne magické.

Jednoduché a oku lahodiace navigačné menu v rôznych farbách.

Vyzerá to, že menu je implementované pomocou Flask, ale nie je to tak. Úhľadné, cool a štýlové navigačné menu s efektmi vznášania.

Početné požiadavky mojich vytrvalých čitateľov a jednoducho zvedavých používateľov priniesli svoj účinok. Nakoniec som vytvoril lekciu, v ktorej sa naučíme, ako vytvoriť dynamické menu VKontakte s efektom stlačených tlačidiel! Analogicky s bežnými internetovými stránkami, keď je navštívený odkaz označený špeciálnym spôsobom (stlačené tlačidlo, podčiarknutie atď.) - vytvoríme rovnaký dizajn na VKontakte pomocou vytvorených stránok a grafického dizajnu. Na začiatok si urobíme grafické predlohy vo Photoshope – vytvoríme hlavičku menu a dva typy tlačidiel. Potom vytvoríme niekoľko stránok VKontakte podľa položiek v našej ponuke. A nakoniec urobíme zložitý trik, ktorý v skutočnosti vytvorí ilúziu sledovania odkazu. Lekcia je pomerne zložitá a je vhodná pre tých, ktorí sú presvedčení o funkčnosti Vkontakte. Všetky manipulácie vykonám pomocou príkladu vaša skupina VKontakte, kde sa tento efekt realizuje naživo. Takže, poďme do práce!

Krok 1. Vytvorte hlavičku ponuky vo Photoshope
Vytvorte dokument vo Photoshope so šírkou 600 pixelov. Výška môže byť iná, podľa vášho uváženia. Do hlavičky môžete umiestniť akúkoľvek konkrétnu fotografiu, koláž, informačný banner a iné grafické obrázky. V tomto prípade som použil nasledujúci reklamný banner s rozmermi 600x172 pixelov.

Krok 2. Vytvorte navigačnú lištu vo Photoshope
Teraz musíme vytvoriť navigačný panel. V tomto príklade som ako tlačidlá použil iba text. Ale podľa vlastného uváženia môžete vytvárať farebné tlačidlá a písať na ne text. Robíme to - vo Photoshope vytvorte obdĺžnik s rozmermi 600 x 56 pixelov a v tomto prípade ho vyplňte bielou farbou. Potom napíšeme položky menu na riadok - asi 5-6 položiek, nie viac. Väčší počet bodov bude vyzerať stlačený.

Krok 3. Vytvorte lisovaný navigačný panel vo Photoshope
Teraz musíme vytvoriť aktívne odkazy, ako keby sa na ne klikalo. Použil som bežné podčiarknutie, ale na označenie navštíveného odkazu môžete použiť inú farbu textu alebo pozadia.

Krok 4. Vystrihnite hotové obrázky
V tejto fáze musíme vystrihnúť obrázky z kroku 2 a kroku 3. Mali by sme mať dve sady po piatich tlačidlách – jedno tlačidlo bez podčiarknutia, druhé tlačidlo s podčiarknutím. Tlačidlá pre každú jednotlivú položku (s podčiarknutím a bez podčiarknutia) musia mať rovnakú veľkosť. Na obrázku nižšie je celý náš grafický dizajn – desať tlačidiel a jedna hlavička ponuky.

Krok 5. Vytvorte stránku ponuky VKontakte
Teraz poďme na VKontakte. Našou úlohou je vytvoriť samostatnú stránku s názvom „Menu“. Na tento účel použijeme nasledujúci kód
http://vk.com/pages?oid=-XXX&p=Názov_stránky
kde namiesto XXX nahradíme id našej skupiny a namiesto textu „Názov stránky“ napíšeme Menu. Teraz musíme zistiť ID skupiny. Ako to spraviť? Prejdeme na hlavnú stránku skupiny a pozrieme sa na naše príspevky na stene – hneď pod blokom „Pridať príspevok“ bude napísané „Všetky príspevky“ – kliknite na tento odkaz.

Krok 6. Určite ID skupiny a upravte kód
Ideme na stránku a vidíme takúto adresu URL https://vk.com/wall-78320145?own=1, kde čísla 78320145 v tomto príklade sú id skupiny. Naše údaje nahradíme do zdrojového kódu a získame takýto záznam:
http://vk.com/pages?oid=-78320145&p=Menu(s vašimi číslami!). Vložte tento riadok do panela s adresou prehliadača a stlačte kláves Enter. Takže sme vytvorili novú stránku VKontakte a spočiatku to vyzerá takto.

Krok 7. Vytvorte zostávajúce navigačné stránky VKontakte
Podobným spôsobom vytvárame ďalšie štyri navigačné stránky: Ceny, Ako objednávať, Technické špecifikácie a Otázky. To znamená, že zodpovedajúci kód skopírujeme ešte štyrikrát do panela s adresou prehliadača (s vašimi identifikačnými číslami v príklade nižšie, mojimi číslami):

http://vk.com/pages?oid=-78320145&p=Ceny

http://vk.com/pages?oid=-78320145&p=Ako si objednať

http://vk.com/pages?oid=-78320145&p=Technické špecifikácie

http://vk.com/pages?oid=-78320145&p=Questions
Upozorňujeme, že v dvojslovnom názve stránky (Ako objednať) je medzera medzi slovami nahradená podčiarkovníkom Ako_objednať. Teraz máme päť pripravených stránok pre každú položku ponuky. Portfóliovú stránku sme nevytvorili, pretože sa nachádza na stránke ponuky

Krok 8. Nahrajte fotografie na prvú stránku ponuky
Na vytvorenej, zatiaľ prázdnej stránke (pozri krok 6) v ponuke kliknite na odkaz Upraviť alebo na odkaz Vyplniť obsahom. Potom uvidíme panel úprav. Tu musíme kliknúť na ikonu fotoaparátu s funkciou Nahrať fotografiu. Dôležité! Uistite sa, že ste v režime označovania wiki. Prepínanie režimov reguluje ikona na pravom okraji stránky.

Krok 9. Výsledok po načítaní obrázkov
Načítame naše obrázky, ktoré sme vytvorili v Kroku 1 a Kroku 2. Po načítaní vidíme kód ako na obrázku nižšie a samotné menu vyzerá takto. Po každej zmene kódu nezabudnite kliknúť na položku Uložiť stránku a potom kliknutím na položku Ukážka zobraziť výsledok.

Krok 10. Úprava kódu obrázka
Teraz je našou úlohou nahradiť všetky vlastnosti noborder vlastnosťou nopadding. A vložte skutočné rozmery na prvý obrázok, pretože VKontakte pri nahrávaní zmenšil obrázok na 400 pixelov. Po všetkých zmenách by sme mali dostať nasledujúci kód a menu.

Krok 11. Pridajte odkazy na obrázky
Teraz musíme dať odkazy pre každý obrázok. Odkaz musí byť vložený za nopadding| namiesto medzery pred uzatváracou zátvorkou. Pre prvý obrázok (hlavička ponuky z kroku 1) môžete uviesť odkaz na hlavnú stránku skupiny alebo môžete použiť vlastnosť nolink (preložiť; po odsadení bez medzier). Pre druhú kartu vložte adresu formátovacej stránky strana-78320145_49821289. To znamená, že úplná adresa URL obrázka https://vk.com/page-78320145_49821289, prvú časť s doménou možno vynechať. V prípade odkazov na externé stránky však musí byť adresa URL odkazu uvedená úplne.

Krok 12. Skopírujte kód na zostávajúce navigačné stránky
V tomto pomerne jednoduchom kroku skopírujeme posledný kód z predchádzajúceho kroku a vložíme ho na zvyšné vytvorené stránky - Ceny, Ako objednávať, Referenčné podmienky a Otázky. Sme na stránke, kliknite na Upraviť alebo Vyplniť obsahom (sme v režime označovania wiki), vložte kód a kliknite na Uložiť. A potom aj na ďalšej strane. To znamená, že teraz máme päť strán, z ktorých menu vyzerá úplne rovnako. V ponuke sa už ale dá orientovať – keď kliknete na odkaz, napríklad Ceny, presunieme sa na stránku Ceny atď.

Krok 13. Vytvorenie efektu stlačeného tlačidla
Teraz musíme zmeniť jeden obrázok na každej z piatich strán (tlačidlo bez podčiarknutia nahradiť tlačidlom s podčiarknutím). Napríklad na prvej strane Menu načítame nový obrázok a potom nahradíme adresu starého obrázku v kóde novým (podčiarknuté červenou farbou). Potom prejdeme na stránku Ceny, nahráme obrázok s podčiarknutými cenami a zmeníme ho v kóde na adresu nového obrázku. Potom prejdeme na stránky Ako objednať, Podmienky a Otázky a urobíme rovnakú operáciu rovnakým spôsobom.

Finálny.
V dôsledku toho sme získali navigačný efekt, keď kliknete na odkaz ponuky a stane sa aktívnym. Ale keďže je grafický dizajn na všetkých stránkach takmer rovnaký, s výnimkou aktívneho odkazu, vzniká ilúzia navigácie, hoci v skutočnosti ide o prechod na inú stránku.

Takto koncipované menu nie je prispôsobené pre mobilné zariadenia. Keď sa veľkosť obrazovky zmenší, obrázky sa začnú posúvať jeden pod druhý. Ak chcete vytvoriť citlivý dizajn, musíte použiť tabuľky s pevnou verziou. Ale to je už iný príbeh a pokročilejšia technika. Medzitým sa pozrite na rôzne možnosti grafického návrhu menu.

Môže byť užitočné prečítať si: