Tato mřížka je zábavný a příjemný způsob, jak zobrazovat více informací ve stejném prostoru, tím, že každá část mřížky sklouzne kliknutím nebo pohybem myši a zobrazí další obsah.
V procesu tvorby se podíváme na potřebné značení, styling a rozeznání mřížky, stejně jako implementaci písma webových ikon. Budeme také studovat jQuery potřebné, stejně jako různé možnosti k dispozici.
Takhle to vypadá, jakmile skončíme:
Jak vidíte, poměrně jednoduché! Je tam div s ID služby a s jasným názvem float třídy. Pak je uvnitř toho šest různých
Je to tak jednoduché, jako to budeme dělat s označením, to znamená, že jestliže neexistuje žádný JavaScript ani žádný CSS, tento obsah ve skutečnosti neporuší, bude to stále viditelné (kromě ikon, ale jsou to prázdné okraje my jsme je zvykli vidět stejně). Takže toto je naše záloha, žádné styly a žádný obsah jazyka JavaScript:
Teď, když jsme si jisti, že obsah je bezpečný. Můžeme se přesunout do našeho CSS, aby vypadalo hezky, ale ještě důležitější je nastavit pro funkcionalitu jQuery.
Rozdělíme CSS na tři části; což je nezbytné pro to, aby naše jQuery fungovala, kód písma ikony a pak konečné styly, aby vypadala hezky. Takže tady je první část:
#services .service {width: 33%;float: left;padding: 0.5em;min-height: 200px;overflow: hidden;position: relative;border: 1px solid #eee;}@media screen and (max-width: 600px) {#services .service {width: 50%;}}@media screen and (max-width: 320px) {#services .service {width: 100%;}}#services .service .service-icon, #services .service .service-description {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: #fff;padding: 50px 0;color: #222;}#services .service .service-description {left: 100%;background: #249EC2;color: white;padding: 50px;}#services .service .service-description:hover { cursor: pointer; }
Tak pojďme, co se děje tady. Nejprve se zaměřujeme na jednotlivé obaly (.service) a uspořádáme je do tvaru mřížky tak, že jim dáváme šířku kapaliny, minimální výšku a plovoucí je doleva (to je důvod, proč má celkový obal jasnou fixaci). Pak je důležité, aby jejich přetečení bylo skryto (jinak bychom viděli další obsah) a jejich relativní pozice. Také můžeme tuto síť lépe reagovat pomocí několika mediálních dotazů pro různé velikosti obrazovky a zvýšením šířky každé buňky. Tento kód znamená, že naše mřížka bude začínat na 3 sloupcovém designu v plné velikosti desktopu a bude procházet dvěma sloupci a nakonec bude mít jeden sloupec a zároveň bude snižovat velikost obrazovky.
Nyní, když jsou vnější krabice na svém místě, zaměřujeme vnitřní části, ikonu služby a servisní popis. Tyto absolutní pozice (tedy minimální výška v předchozím stylu) nastavíme a umístíme obě v levém horním rohu (momentálně změníme pozici popisu). Pak je vyrábíme 100% širokou a vysokou, takže vyplňují svůj rodičovský prvek a zbytek je pouze pro vizuální efekt. Konečně se zaměřujeme výhradně na popis div a děláme levou hodnotu 100%. Toto tlačí celý box napravo a mimo zrak kvůli přetečení skrytému na .service div. Tato "levá" pozice je to, co zaměříme a animujeme s jQuery, a proto je důležité definovat ji nyní.
Pojďme k dalšímu kroku, zde použijeme @ font-face, abychom získali naše písmo ikony a definovali názvy tříd, které jsme již použili v HTML, aby se zobrazily jako správné ikony. Prvním krokem je nalezení online zdroje, který může vytvořit písmo ikony přizpůsobené vašim potřebám, tam je poměrně málo, ale pro tento příklad jsem se rozhodl použít Fontastic . Na webu nejprve vybíráte ikony, které chcete použít, to se samozřejmě mění pro jakýkoli projekt, na kterém pracujete. Ale pak můžete změnit některé informace, například názvy tříd ikon a název písma takto:
Takže jak vidíte, že jsem si vybral názvy tříd, které jsme použili v HTML, takže se budou vyrovnávat bez problémů. Služba pak vám stahuje složku "fonty" a nějaký kód. Umístěte složku "fonty" ve složce css (nebo tam, kde vám vyhovuje). Pak si vezměte kód, který dávají, a přidejte jej do vašeho souboru css. Zde je to, co potřebujete:
@font-face {font-family: "slidable-grid";src:url("fonts/slidable-grid.eot");src:url("fonts/slidable-grid.eot?#iefix") format("embedded-opentype"),url("fonts/slidable-grid.woff") format("woff"),url("fonts/slidable-grid.ttf") format("truetype"),url("fonts/slidable-grid.svg#slidable-grid") format("svg");font-weight: normal;font-style: normal;}[class^="icon-"]:before,[class*=" icon-"]:before {font-family: "slidable-grid" !important;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;font-size: 4em;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-web:before {content: "a";}.icon-graphic:before {content: "b";}.icon-logo:before {content: "c";}.icon-dev:before {content: "d";}.icon-3d:before {content: "e";}.icon-illustration:before {content: "f";}
A tady to máte. Pokud znovu načtete projekt, zobrazí se ikony. Nyní zbývá dokončit styling, aby vypadal jako poslední demo.
Rychle skončíme s finálními styly, které zbývají. Zde není nic zásadního, jen design, aby vypadalo, jako bychom chtěli, takže je to všechno docela samo vysvětlující. Zde je kód, který má vycentrovat mřížku a dát jí maximální šířku. Také, aby se pěkný účinek na ikony:
@import url(reset.css);* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }.cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ }.cf:after { clear: both; }.cf { *zoom: 1; }body {font-family: 'Exo 2', sans-serif; /* Google Font http://google.com/fonts */text-align: center;color: #999;background: #444;-webkit-font-smoothing: antialiased;}#services {max-width: 850px;margin: 0 auto;}#services .service .service-icon:hover {cursor: pointer;color: #249EC2;}#services .service .service-icon span {display: block;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;transition: all 0.1s linear;}#services .service .service-icon:hover span {position: relative;bottom: 5px;}
Naším cílem v rámci jQuery je znovu použít stejný úryvek kódu pro celou síť. Budeme poslouchat událost kliknutí (ve schránce služby) a poté, co se to stane, animujeme pozici ikony, abychom ji přesunuli pryč a vložili jsme popis, přidáme také název třídy, který vám pomůže funkčnost. Takže nejprve do vaší stránky přidejte jQuery a přidejte náš kód buď do jiného souboru skriptu, nebo do a