Kódování Graceful Breadcrumb Navigation Menu v CSS3
Navigační menu a odkazy jsou možná nejdůležitější prvky rozhraní pro webové rozvržení. Jedná se o jediné prodejny pro uživatele mezi stránkami a komunikovat se všemi vytvořenými obsahy. Drobečková navigace nabízí podobnou funkčnost s přidanou výhodou sledování vaší aktuální pozice. Budete moci zobrazit všechny předchozí cesty propojení jako uživatel přejde hierarchii stránek.
V tomto tutoriálu vytvoříme brilantní menu navigace s drobnými streamy s některými efekty CSS3. To bylo testováno pro práci ve všech hlavních prohlížečích kompatibilních s CSS3, i starší prohlížeče, které nepodporují CSS3, ji budou ve většině případů správně vykreslovat..
Než se ponoříme do kódu, trochu si povídáme o funkčnosti našeho chleba, plného tutoriálu při skoku!
Nabídka stezky
Trať strouhanky není o nic složitější než jiné menu. Naše styly budou využívat mnohem složitějších vlastností CSS než většina příkladů, ale naše šablona pro holé kosti je stále na místě, aby uživatele vedla z jedné stránky do druhé..
V tomto příkladu budeme znovu vytvářet podobný styl jako nabídka podpory Google. Jejich nabídku můžete zobrazit na stránce podpory služby Gmail a získat tak představu o tom, kam směřujeme. Nakonec chceme poskytujeme našim uživatelům nejlepší uživatelský komfort, bez ohledu na jejich operační systém nebo software prohlížeče, tak jsem vytvořil 2 různé příklady kódu, které podporují elegantní ladění mezi staršími prohlížeči.
První je postaven pomocí vlastní obrázky na pozadí a správné zarovnání CSS. Všechny události přechodu a aktivní události jsou přednastaveny pouze s několika styly CSS, ale uživatelé, kteří mají vypnuté obrázky, nebudou moci tyto efekty zažít! To je důvod, proč jsem také postavil podobné vypadající menu s CSS přechody, zaoblenými rohy a stíny boxů.
Pokud jste nervózní z podpory obou stylů, můžete si vybrat mezi nimi pro své vlastní stránky. Většina návštěvníků bude ve výchozím nastavení používat obrázky, ale pokud chcete získat přesnější údaje o návštěvnících, projděte si nástroj pro analýzu webových stránek.
Dost slov, skočme do projektu! Začneme vytvořením základního rámce HTML a přesuneme se do různých stylingových efektů. Nejdříve musíte stáhnout obrázek projektu.
Bare-Bones HTML
Začnu svůj dokument s standardní šablony stránek HTML5. To zahrnuje výchozí doctype, propojené CSS a všechny základní prvky. Přidali jsme níže uvedený kód, pokud chcete tímto způsobem začít svůj vlastní dokument. Mějte na paměti, že by nemělo mít vliv na to, jak se zobrazuje vaše strouhanka, takže pokud chcete, použijte vlastní šablonu stránky.
Výchozí stránka
Rozdělím kód na dva různé bloky. První blok s obrázky je postaven s mírně odlišným způsobem, následuje naše menu bez obrázků. Každá sada má svůj vlastní ID takže můžeme obsah identifikovat mnohem snadněji. Pokud jste také fanouškem jQuery, můžete použít #ID manipulovat se všemi interními prvky DOM.
Nejdřív máme obsahující div s id “strouhanka“. V demo souboru jsem to použil k oddělení našeho kódu a přesunu ho přes stránku s přidanými okraji. Můžete odstranit tento vnější div, ale budete muset re-styl vše, aby se vešly nové šablony. Je to opravdu nebolí opustit kontejner, protože budete moci ovládat umístění mnohem jednodušší.
Vnitřně jsem postavil strouhanku pomocí neuspořádaného seznamu. Existuje tolik unikátních způsobů, jak přizpůsobit stylizované HTML seznamy, a strouhance jsou jen jedním z nich. Můžete si všimnout, že jsem zadal počáteční položku seznamu a třída z “První“. To je nutné pro některé další polstrování, aby se položky nabídky udržovaly v řadě. Navíc malý rozpětí je přidán, takže máme správnou levou hranici, která nepřekrývá obrázek na pozadí.
Navíc každé kotevní spojení je zasazeno klesajícím číslem pro z-index vlastnictví. Použití obrázků, které budeme potřebovat každý z našich odkazů se překrývá pro zobrazení řádky šipky. Nejjednodušší způsob, jak toho dosáhnout, je nastavení z-indexu takže každý odkaz překrývá další. Začal jsem 9 a odtamtud pracoval, ale pokud máte v menu více odkazů, začněte s vyšším číslem.
Menu Bez obrázků
Na půvabně degradujte naši strouhanku potřebujeme sekundární sadu položek seznamu HTML. Pokud se pokoušíte přejít na jedinou navigaci, můžete pomocí příkazu jQuery zjistit agenta prohlížeče a podle toho použít ID. Bohužel to není vždy spolehlivé (například pro některé mobilní uživatele). Dalším řešením je zahrnovat specifický styl IE a skrýt nebo zobrazit, které menu funguje nejlépe - Tato možnost je ovšem určena pouze pro aplikaci Internet Explorer.
breadcrumb2 je naše nové ID slouží k cílení menu bez obrázků. Udržet s tímto vzorem jsem použil drobky2 jako třída pro neuspořádaný seznam. Všimněte si, že důvod, proč používáme třídy je pro jeho jednoduchost kopírování těchto nabídek, takže když chcete na své stránce několik různých strouhanek, s těmito třídami se nikdy nestane problém.
Udrželi jsme to .První třídy, ale dodatečně .poslednítřídy na konečnou položku seznamu. Bez obrázků nemůžeme duplikovat šipky pro každou položku navigačního menu, takže jsem některé použil zaoblené rohy doplnit sekundární nabídku. .První třídy a .poslední manipulovat s poloměrem ohraničení na samých okrajích našeho menu a vytvořit tak opravdu skvělý web 2.0 styl.
CSS Posuvné obrázky na pozadí
Pro některé z jednodušších efektů jsem spojil oba strouhanky dohromady při budování vlastností. To je užitečné, protože nejen šetří místo, ale při návratu k úpravám stylů snadnější přizpůsobení svůj vlastní pohled.
Pro oba #strouhanka a # breadcrumb2 Nastavil jsem styl seznamu: žádný; takže všechny interní položky nebudou mít značky. Mohli byste je opustit, pokud se vám líbí efekt, ale zjistil jsem, že HTML se stává únavné pracovat kolem a je mnohem snazší vytvořit nové ikony. Začněme s naším .drobky třída.
.drobky display: block; .crumbs li zobrazit: inline; .crumbs li.first padding-left: 8px; .crumbs li a .crumbs li a: link, .crumbs li a: visit color: # 666; zobrazení: blok; plavat vlevo; velikost písma: 12px; okraj vlevo: -13px; polstrování: 7px 17px 11px 25px; poloha: relativní; text-decoration: žádný; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); background-repeat: no-repeat; Pozice pozadí: 100% 0; poloha: relativní; .crumbs li a: hover color: # 333; pozice pozadí: 100% -48px; kurzor: ukazatel; .crumbs li a: active color: # 333; Pozice pozadí: 100% -96px; .crumbs li.first a span výška: 29px; šířka: 3px; border-left: 1px pevná # d9d9d9; pozice: absolutní; nahoru: 0px; vlevo: 0px; My nastavte náš neuspořádaný seznam na blok tak se kolem této oblasti neveče nic jiného. Všimněte si, že položky seznamu jsou zobrazen inline zatímco každá kotevní spojka má mnohem větší prostor pro rozprostření. Chceme, aby veškerý prostor v našem menu byl klikací, takže to vyžaduje budování našich kotev jako blokových prvků.
Použil jsem obrázek zvaný bg-crumbs.png pro pozadí. Toto je známé jako jednoduchý sprite list v CSS, nebo alternativně posuvné dveře technika. To znamená, že když uživatel přejde nebo klikne na odkaz, posuneme pozici pozadí, aby se zobrazil aktualizovaný styl. Tento jediný obrázek obsahuje všechny 3 návrhy, které potřebujeme k vytvoření pozadí strouhanky na různých pozicích, takže můžeme použít pozadí vlastnost přemístit na základě interakce uživatele.
Vlastní efekty s CSS3
Původní design chleba je mnohem jednodušší vytvořit. To je patrné, protože mnoho vlastností CSS je více základních, než si dokážete představit, ale nyní se zaměřujeme na duplikaci těchto efektů pouze pomocí CSS3!
Jednotlivé styly zabírají spoustu místa, takže je rozdělím do dvou bloků kódu.
.crumbs2 display: block; margin-left: 27px; výplň: 0; polstrování: 10px; .crumbs2 li zobrazit: inline; .crumbs2 li a .crumbs2 li a: link, .crumbs2 li a: visit color: # 666; zobrazení: blok; plavat vlevo; velikost písma: 12px; polstrování: 7px 16px 7px 19px; poloha: relativní; text-decoration: žádný; okraj: 1px pevná # d9d9d9; border-right-width: 0px; .crumbs2 li a background-image: -webk-gradient (lineární, levý dolní, levý horní, barevný doraz (0,45, rgb (241, 241, 241)), barevné zastavení (0,73, rgb (245, 245, 245))); pozadí-obraz: -moz-lineární gradient (středové dno, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Pro Internet Explorer 5.5 - 7 * / filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Pro filtr Internet Explorer 8 * / -ms: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a border-right-width: 1px; hrana-dolní-pravý-rádius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
.drobky2 menu CSS přechody duplikovat efekty na pozadí. Pokud jste s nimi neznámí, doporučuji průvodce CSS Tricks na CSS3 Gradients, který by měl efektivně využít přechod CSS3. Zahrnuli několik dalších vlastností pro prohlížeče Microsoft a Opera, ale ve všech případech nejsou plně podporovány. Nezadal jsem je do demo kódu - ale je dobré pochopit všechny možnosti.
-webkit-gradient a -moz-lineární gradient jsou hlavními řešeními, která většinu práce vykonávají. Zahrnula jsem starší kód pro starší verze aplikace Internet Explorer, ale není zaručena zobrazovat správně po celou dobu (používáme výkonné techniky pro vykreslování obrázků). Všimněte si, že jsem mezi vlastnosti pozadí nastavil kódy RGB i hexadecimální barvy. Můžete se držet jedné metody nebo jiné, pokud jste pohodlnější.
poloměr ohraničení kód se vztahuje pouze na naši sekundární navigaci. To dává úhledný efekt v levém horním a dolním pravém rohu našeho celého menu. Bar se zdá být téměř vypnout stránku - opravdu fantastický efekt na prohlížeče, které podporují styly, ale tyto pouze pokrývají výchozí stavy pro naše odkazy. Nyní vytvořme podobné efekty, jaké jsme použili výše.
Hranice CSS3 a stíny
Kdykoliv uživatel přejde přes odkaz, chceme aktualizovat několik věcí. Nejdřív musíme ztmavte barvy na horním a dolním okraji našeho aktivního prvku. To lze vidět i na obrázcích jak pro hover, tak pro aktivní stavy.
.crumbs2 li a: hover border-top-color: # c4c4c4; color-bottom-color: # c4c4c4; pozadí-obraz: -webk-gradient (lineární, vlevo dole, levý vrchol, barevné zastavení (0,45, rgb (241, 241, 241)), barevné zastavení (0,73, rgb (248, 248, 248))); pozadí-obraz: -moz-lineární gradient (střední dno, rgb (241, 241, 241) 45%, rgb (248, 248, 248) 73%); / * Pro Internet Explorer 5.5 - 7 * / filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Pro filtr Internet Explorer 8 * / -ms: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; barva: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webk-box-shadow: 0px 2px 2px # e8e8e8; box-shadow: 0px 2px 2px # e8e8e8; .crumbs2 li a: active border-top-color: # c4c4c4; color-bottom-color: # c4c4c4; pozadí-obraz: -webk-gradient (lineární, vlevo dole, levý vrchol, barevné zastavení (0,45, rgb (224,224,224)), barevné zastavení (0,73, rgb (235,235,235)))); pozadí-obraz: -moz-lineární gradient (střední dno, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Pro Internet Explorer 5.5 - 7 * / filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Pro filtr Internet Explorer 8 * / -ms: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada vložka; -webkit-box-shadow: -1px 1px 1px 0px #dadada vložka; -moz-box-shadow: -1px 1px 1px 0px #dadada vložka; barva: # 333;
Používám přesně stejný kód přechodu, jaký jsme použili výše, ale tentokrát se barvy liší, pokud jste si všimli našich hodnot RGB. Každý ze stavů ztmaví barvu textu # 333, ostatní popisy však byly mírně změněny, aby odpovídaly příkazům uživatele.
Na vznášedle uvidíte a lesklý reliéfní efekt které se spojily tmavé okraje dává stránku vyskakovací styly. Pokud kliknete a podržíte se dostanete do aktivního stavu, který obsahuje a tmavé pozadí přechodu. Tento efekt způsobí, že tlačítka vypadají ve skutečnosti “stisknuto” na stránce.
Žádáme také box-stín vlastnosti z nových specifikací CSS3. -webkit, -moz, a výchozí styly se používají se stejným nastavením. Vznášející se zobrazí a světlý stín z dolní části vybraného odkazu. Když je aktivní, stín se vytvoří na horním, pravém a dolním okraji. Tento efekt je vytvořen pomocí vložka klíčové slovo přidáno na konec každého řádku vlastnosti box-shadow. Opět CSS triky je váš nejlepší přítel s úžasným článkem o box-shadow, jak mluví o syntaxi a jejím správném používání v CSS3.
Bonus: Více stylů
Kromě výukových kódů jsem přidal další obrázky na pozadí s upravenými barevnými schématy. Vzorky z původního prostředí jsem použil a Adobe Photoshop vytvořil několik variant, které můžete použít na své vlastní webové stránky.
Tyto bonusové soubory jsou součástí zdrojového souboru který si můžete stáhnout ve formátu .zip archive v sekci níže.
Můžete si prohlédnout výše uvedený obrázek, abyste získali představu o tom, o čem mluvím. Pokud potřebujete specifické barevné schéma pop otevřít Photoshop> Obrázek> Úpravy> Odstín a sytost změnit schéma barev tak, aby odpovídalo vaší vlastní šabloně, nezapomeňte zaškrtněte volbu Colorize v podokně Hue / Saturation, pokud se barva vůbec nezměnila.
Závěr
Tento návod by vás měl seznámit s některými z novějších metod CSS3. Vytvořili jsme dvě fantastická menu s chlebem ve stylu podobným způsobem a vytvořili je tak, aby se ve starších prohlížečích mohla ladně degradovat. Navíc jsem vám nabídl svůj demo kód a některé bonusové snímky, které si můžete zahrát.
Líbí se vám zejména styly, které jsme zde vytvořili? Nebo možná máte otázky nebo nápady, jak vylepšit výukový kód? Sdílejte s námi své myšlenky v níže uvedené diskusní oblasti a nezapomeňte si stáhnout zdrojové soubory, abyste mohli hrát s demo!
Více CSS3 Tutoriály
Touha po CSS3? Níže jsou uvedeny naše články, které vám umožní porozumět CSS3 teoreticky i prakticky!
- CSS3: Vytvořit logo RSS kanálu
- CSS3: Vytvořit vyhledávací pole
- CSS3: Vytvoření kontaktního formuláře AJAX
- CSS3: Vytváření webových stránek HTML5 / CSS3
