Oprettelse af en adaptiv, Filtrerbar Portefølje Ved Hjælp af jQuery Isotop

() translation by (you can also view the original English article)

I dag tager vi et PSD Portfolio layout fra ThemeForest og replikerer det helt i HTML & CSS, samtidig med at det gør det adaptivt. Vi vil derefter gå videre og integrere isotop jQuery plugin'et for at gøre det til en fuldt funktionel filtrerbar portefølje.

Trin 1: Organisering af Projektet

Vi starter med at oprette en simpel projektstruktur så alt holdes organiseret. Vi opretter tre mapper:

css - til vores CSS filer
billeder - alle billeder vil blive placeret her
js - til vores jQuery plugins og brugerdefinerede scripts

Trin 2: Dokument

Før vi går i stå i vores kodning vil vi oprette filen index.html, som kan være placeret i roden af dit projekt. Vi kaster i en grundlæggende HTML5 skabelon, der linker til vores CSS fil i hovedet. Desuden bliver vi nødt til at linke til nogle flere filer:

jQuery Library - Vi skal linke til jQuery biblioteket klar til senere, når vi bruger isotop-pluginet, vil vi gå videre og smide det ind nu. Jeg har gået og bruges biblioteket hostet af Google (stærkt anbefales).
HTML5 Shiv - Da vi bruger HTML5 elementer, skal vi sørge for, at vi linker til HTML5 Shiv så elementerne kan genkendes i ældre IE versioner.
Google Web Fonts - Hvis du ser på PSD'en vil du bemærke, at skrifttypen PT Sans er brugt. Da denne skrifttype ikke er lokalt tilgængelig for mange brugere, linker vi til den ved hjælp af tjenesten Google Web Fonts.

 
<!DOCTYPE html> 
<html> 
<head> 
 
  <!--Meta tags--> 
	<meta charset="utf-8"> 
 
	<!--Title--> 
	<title>Hipstar Tutorial</title> 
		 
	<!--Stylesheets--> 
	<link rel="stylesheet" href="css/styles.css"> 
 
	<!--Google Web Fonts--> 
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow|PT+Sans+Caption:400,700"> 
 
	<!--jQuery--> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
	<!--HTML5 Shiv--> 
	<!--[if lt IE 9]> 
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
	<![endif]--> 
	 
</head> 
<body> 
 
 
 
 
 
 
 
</body> 
</html>

Trin 3: Tilføjelse af Generelle Stilarter

Vi skal nu bruge nogle generelle stilarter i vores CSS fil. Dette indebærer blot en simpel nulstilling, som du kan føje til toppen af din CSS fil.

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}del{text-decoration:line-through}hr{background:transparent;border:0;clear:both;color:transparent;height:1px;margin:0;padding:0}mark{background-color:#ffffb3;font-style:italic}input,select{vertical-align:middle}ins{background-color:red;color:white;text-decoration:none}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none;}

.clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;width:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;height:0;line-height:0;visibility:hidden;width:0}* html .clearfix,:first-child+html .clearfix{zoom:1}

Trin 4: Start Med Overskriften

Nu vil vi begynde at opbygge strukturen af webstedet! Vi starter med hovedet og gøre det ved at bruge HTML5 Header element.

 
<header class="header clearfix"> 
	 
	 
</header>

Dernæst tilføjer vi nogle CSS til vores overskrift. Vi bruger nogle grundlæggende stilarter her, men det vigtigste aspekt, der skal tages i betragtning, er positioneringen. Her bruger vi en position af faste og derefter 0 øverst, til venstre og højre. Dette vil sikre vores header forbliver øverst i vinduet, når du ruller - og at det fylder hele højden af browseren.

 
.header { 
	height:69px; 
	background:url(../images/header.png) repeat; 
	border-bottom:1px solid #fff; 
	-webkit-box-shadow:0 0 7px rgba(0,0,0,.25); 
	-moz-box-shadow:0 0 7px rgba(0,0,0,.25); 
	box-shadow:0 0 7px rgba(0,0,0,.25); 
	position:fixed; 
	top:0; 
	left:0; 
	right:0; 
	z-index:101; 
}

Trin 5: Logoet og 'Hire Me' Mærket

Af enkelhedens skyld vil begge dele blive udført ved hjælp af billeder, men vi vil også pakke dem inden for ankeretiketter og give dem en klasse, så vi kan indstille nogle stilarter til positionering.

 
<header class="header clearfix"> 
	 
	<a href="#" class="logo"><img src="images/logo.png" alt="Hipstar"></a> 
 
	<a href="#" class="hire-me"><img src="images/hire_me.png" alt="Hire Me"></a> 
 
</header>

Begge disse bruger lignende styling, begge placeret helt (hovedet er forælder) med en 0 top. Logoet har forladt af 0 for at holde det til venstre, og leje mands-kiltet giver ret til 20px for at skubbe det lidt fra højre.

 
.logo { 
	position:absolute; 
	top:0; 
	left:0; 
} 
 
.hire-me { 
	position:absolute; 
	top:0; 
	right:20px; 
}

Du skal have noget, der ser sådan ud:

Trin 6: Sidebjælken

Endnu engang vil vi udnytte HTML5's markup og oprette vores sidebjælke ved hjælp af side elementet.

 
<aside class="sidebar clearfix"> 
 
 
</aside>

På CSS til sidebjælken vil du bemærke, at vi har brugt stillingen igen, teknisk set gælder det ikke her, da skyderen skal fylde sidens højde.

 
.sidebar { 
	width:149px; 
	position:fixed; 
	top:70px; 
	left:0; 
	bottom:0; 
	right:0; 
	z-index:1; 
	float:left; 
	border-right:1px solid #a13d36; 
	margin-right:-1px; 
	-webkit-box-shadow:inset -1px 0 0 #ff786b; 
	-moz-box-shadow:inset -1px 0 0 #ff786b; 
	box-shadow:inset -1px 0 0 #ff786b; 
}

Trin 7: Sidebjælke Baggrund!

Du bemærker, at vi har undladt at definere en baggrund. Vi anvender sidebar baggrunden, men ikke til sidebjælken; vi anvender det på kroppen og gentager det på y-aksen, så det løber fra top til bund. En Venstre position vil også blive brugt til at sikre, at baggrunden er placeret på venstre side af siden til sidebjælken.

Da dette er en kropsstil, kan det være fornuftigt at rulle op på din CSS fil og placere den nærmere toppen. Jeg gik også videre og tilføjede en skrifttypens glatningsegenskab til webkit browsere.

 
body { 
	background:#f8faf4 url(../images/sidebar_body.png) fixed left repeat-y; 
	-webkit-font-smoothing:antialiased; 
}

Vi har nu afsluttet bunden af vores sidebjælke!

Trin 8: Navigations Tid

Nu er sidebaret lavet, så vi kan tilføje navigationen til den. Vi opretter en uordnet liste og pakker den sammen med elementet HTML5 Nav.

1
2	<nav class="primary clearfix">
3	<ul>
4	<li><a href="#">All</a></li>
5	<li><a href="#">Web Design</a></li>
6	<li><a href="#">Illustration</a></li>
7	<li><a href="#">Logo</a></li>
8	<li><a href="#">Video</a></li>
9	<li><a href="#">Print Design</a></li>
10	</ul>
11	</nav>

Nu er nogle grundlæggende styling til navigationen, tilføjer en baggrund, skrifttypestile og også skrifttypefamilien fra Google Web Fonts - PT Sans.

 
nav.primary ul li a { 
	background:url(../images/nav.png) repeat-x center top; 
	height:39px; 
	width:149px; 
	display:block; 
	border-bottom:1px solid #ba4b42; 
	font-family:'PT Sans Narrow', Helvetica, Arial, sans-serif; 
	font-size:18px; 
	color:#fff; 
	text-indent:20px; 
	text-shadow:0 -1px 0 #BA1E1A; 
	text-decoration:none; 
	line-height:39px; 
} 
nav.primary ul li a:hover { 
	color:#E9EBE5; 
	background-position:center bottom; 
}

Trin 9: Oprettelse af Området Med hovedindholdet

 
<section class="main clearfix"> 
	 
	 
</section>

Vi skal nu oprette en indpakningsbeholder, som vil holde porteføljeposterne. Vi skal også tilføje nogle margener og paddings for at sikre, at indtastningerne vises på det rigtige sted. Dette kan gøres ved først at flytte hele elementet væk fra overskriften og sidebjælken.

Hvis vi ser på overskriften 70px høj skal vi have 70px margin-top. Sidebjælken er 150px bred så vi vil anvende 150px margin-venstre. Den sidste ting er 20px polstring øverst og venstre for at skubbe posterne væk fra overskriften og sidebjælken.

1
2	.main {
3	padding:20px 20px 0;
4	margin:70px 0 0 150px;
5	}

Trin 10: Tilføjelse af en Porteføl Jepost

Tid til at starte med porteføl jepos terne. Gå videre og opret en div med en klasse af portefølje inden for vores hovedområde, dette vil holde vores porteføljevarer sammen. Vores porteføljeindtastning består af en figur (igen et HTML5 element) som bruges til at betegne en container til medier af en eller anden art.

Vi har så et billede med to spændinger; en til båndet og et til sværgeren. Du kan også bruge pseudo-elementer til disse, hvilket ville lette markeringen, men reducere browserens kompatibilitet på siden.

 
<section class="main clearfix"> 
	 
	<div class="portfolio"> 
		 
		<figure class="entry"> 
			<span class="ribbon"></span> 
			<img src="images/portfolio-image.jpg" alt=""> 
			<span class="hover"></span> 
		</figure> 
		 
	</div> 
 
</section>

Trin 11: Styling af Portefølje Posten

Styling til porteføljen er grundlæggende ting. Vi flyver til venstre og tilføjer 20px af margen til højre og nederst. For at oprette den hvide grænse vil vi blot tilføje noget polstring og derefter en baggrund, disse vil blive afrundet ved hjælp af en simpel grænsestrek på 5 px (mens du husker prefikserne). Endelig, vil en boks-skygge blive anvendt.

 
.entry { 
	position:relative; 
	float:left; 
	margin-right:20px; 
	margin-bottom:20px; 
	cursor:pointer; 
 
	background:#fff; 
	padding:10px; 
	width:440px; 
 
	-webkit-border-radius:5px; 
	-moz-border-radius:5px; 
	border-radius:5px; 
 
	-webkit-box-shadow:0 0 7px rgba(0,0,0,.1); 
	-moz-box-shadow:0 0 7px rgba(0,0,0,.1); 
	box-shadow:0 0 7px rgba(0,0,0,.1); 
}

Da vi anvender 20px af margen til højre for posterne skal vi trække det fra forældrebeholderen (porteføljens div).

1
2	.portfolio { margin-right:-20px; }

Trin 12: Tilføjelse af in Dtastning Sbåndet

Vi oprettede båndmarkeringen, når vi tilføjede porteføljeposten (selvom du igen har brugt et pseudo-element), skal vi nu style det ved hjælp af CSS.

 
.ribbon { 
	background:url(../images/camera_ribbon.png) no-repeat; 
	width:31px; 
	height:47px; 
	position:absolute; 
	top:-4px; 
	right:11px; 
	z-index:9999; 
}

Trin 13: Portfolio Hover State

Den sidste ting at gøre for porteføljen er at tilføje hover tilstanden. Dette vil blive opnået med det spænd, vi skabte tidligere, alt hvad vi behøver nu er stylingen. Vi bruger et billede og en sort baggrund med en alfa opacitet på 70%. Vi har også tilføjet nogle CSS3 overgange for at muliggøre en glat svæveffekt. Den sidste ting er at tilføje opacitet: 1; for når du svinger over indgangen, som vil falme i svæverdelen.

 
.hover { 
	background:rgba(0,0,0,.7) url(../images/hover.png) no-repeat center; 
	position:absolute; 
	top:10px; 
	left:10px; 
	bottom:13px; 
	right:10px; 
	opacity:0; 
	-webkit-transition:all .3s ease-in-out; 
	-moz-transition:all .3s ease-in-out; 
	-ms-transition:all .3s ease-in-out; 
	-o-transition:all .3s ease-in-out; 
	transition:all .3s ease-in-out; 
} 
 
.entry:hover .hover { opacity:1; }

Nu er vores portefølje genstand komplet, du er fri til at tilføje dig egen og ændre billederne!

Trin 14: Adaptiv Godhed

Nu, hvor vi har genopbygget PSD'en i et fungerende design, vil vi gå videre og gøre det adaptivt. Vi anvender ikke et rent fleksibelt net, hvorfor det, vi praktiserer, ikke er teknisk responsivt. Vi bruger CSS3 Media Queries til at ændre og redigere layoutet i forskellige visningsmetoder. Vi bruger grove dimensioner, giver os hvad der kan mere-eller-mindre opfattes som Tablet Portrait Orientation, Tablet Landskab sorientering, Mobile Portrait Orientation og, endelig, Mobile Landscape Orientation.

Før vi begynder at redigere layoutet, skal vi gøre to ting. For det første skal vi tilføje visnings metatag get som gør det muligt for vores websted at blive vist korrekt på mobiltelefoner og tablets. Hvis du vil vide mere om dette, skal du tjekke denne artikel af Ian Yates. Det sidste er at tilføje en lille smule CSS, så vores billeder kan være flydende:

1
2	img {
3	max-width:100%;
4	}

Trin 15: Tablet Portræt

Vi starter med at målrette tabletter med en portrætorientering. Der kræves kun en lille smule redigering for at tilpasse vores layout. Den vigtigste til at tage varsel på er indgangen; det bliver gjort mindre for at rumme flere poster på hver linje.

 
@media only screen and (min-width: 768px) and (max-width: 959px) { 
	.content { padding:20px 0 0 20px; } 
	.entry { width:258px; } 
}

Trin 16: Tablet Landskab

Normalt vil du ikke målrette mod landskabsretningen på en tablet, medmindre du virkelig skal, men på grund af designet af denne side vil det helt sikkert hjælpe os. Vi vil ikke bruge min og max bredder til at bestemme visningsportstørrelsen - vi vil målrette den efter orientering. Denne gang bruger vi endnu mindre kode ved blot at ændre bredden af porteføljeposten.

1
2	@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
3	.entry { width:386px; }
4	}

Trin 17: Mobil Portræt

Vi bevæger os på mobil nu, begyndende med portrætorientering. Denne gang bliver vi nødt til at gøre lidt mere redigering. Vi skal justere layoutet nu, fordi skærmen bliver mindre, er vi ikke længere i stand til at rumme sidebjælken til venstre med poster til højre. Vi vil flytte indholdsoversigten før posterne og har det fylder hele bredden af skærmen.

På grund af at overskriften er en stor størrelse med sidebjælken/navigationen under den, kan du muligvis ikke se så mange af posterne. Vi fjerner stillingen: Fast og ændrer den til absolut, så overskriften vil rulle i stedet for at blive øverst på siden.

 
@media only screen and (max-width: 767px) { 
	body { background-image:none; } 
 
	.header { 
		position:absolute; 
		float:left; 
		width:100%; 
	} 
 
	.logo { float:left; } 
	.hire-me { float:right; } 
 
	#wrapper { 
		float:left; 
		width:100%; 
	} 
 
	.sidebar { 
		width:100%; 
		position:relative; 
		z-index:1; 
		float:left; 
		border-right:1px solid #a13d36; 
		margin-right:-1px; 
		-webkit-box-shadow:none; 
		-moz-box-shadow:none; 
		box-shadow:none; 
	} 
 
	nav.primary li { 
		float:left; 
		width:100%; 
		background:url(../images/sidebar.png); 
	} 
 
	nav.primary ul li a {width:100%; } 
	 
	nav.primary ul li a:active, nav.primary ul li a.selected { background:url(../images/mobile_nav_active.png); } 
 
	.page { 
		float:left; 
		width:100%; 
	} 
 
	.main { 
		float:left; 
		padding:20px 20px 0; 
		margin:70px 0 0 0; 
	} 
 
	.entry { width:260px; } 
}

Trin 18: Fastsættelse af Nogle Positionerings Problemer

Okay, nu har vi kørt ind i nogle problemer. Indholdsoversigten er justeret pænt til skærmens layout, men forsikringsbestanden positionerer forkert. Vi bliver nødt til at gå tilbage til vores markering og tilføje to ekstra divs, en med et id for wrapper som vil pakke alt andet end header og et andet med en klasse af side, der vil pakke vores hovedindholdsområde.

 
<div id="wrapper"> 
 
	<aside class="sidebar clearfix"> 
 
		<nav class="primary clearfix"> 
				<ul> 
					<li><a href="#" class="selected" data-filter="*">All</a></li> 
					<li><a href="#" data-filter=".web">Web Design</a></li> 
					<li><a href="#" data-filter=".ill">Ilustration</a></li> 
					<li><a href="#" data-filter=".logo">Logo</a></li> 
					<li><a href="#" data-filter=".video">Video</a></li> 
					<li><a href="#" data-filter=".print">Print Design</a></li> 
				</ul> 
			</nav> 
 
	</aside> 
 
	<div class="page"> 
 
		<section class="main clearfix"> 
			 
			<div class="portfolio"> 
				 
				<figure class="entry"> 
					<span class="ribbon"></span> 
					<img src="images/portfolio-image.jpg" alt=""> 
					<span class="hover"></span> 
				</figure> 
 
				<figure class="entry"> 
					<span class="ribbon"></span> 
					<img src="images/portfolio-image.jpg" alt=""> 
					<span class="hover"></span> 
				</figure> 
 
				<figure class="entry"> 
					<span class="ribbon"></span> 
					<img src="images/portfolio-image.jpg" alt=""> 
					<span class="hover"></span> 
				</figure> 
 
				<figure class="entry"> 
					<span class="ribbon"></span> 
					<img src="images/portfolio-image.jpg" alt=""> 
					<span class="hover"></span> 
				</figure> 
 
				<figure class="entry"> 
					<span class="ribbon"></span> 
					<img src="images/portfolio-image.jpg" alt=""> 
					<span class="hover"></span> 
				</figure> 
 
				<figure class="entry"> 
					<span class="ribbon"></span> 
					<img src="images/portfolio-image.jpg" alt=""> 
					<span class="hover"></span> 
				</figure> 
 
				<figure class="entry"> 
					<span class="ribbon"></span> 
					<img src="images/portfolio-image.jpg" alt=""> 
					<span class="hover"></span> 
				</figure> 
 
				<figure class="entry"> 
					<span class="ribbon"></span> 
					<img src="images/portfolio-image.jpg" alt=""> 
					<span class="hover"></span> 
				</figure> 
 
			</div> 
 
		</section> 
 
	</div> 
	<!-- page --> 
 
</div> 
<!-- wrapper -->

Når vi har tilføjet den nødvendige markering, skal vi tilføje nogle stilarter. Rul tilbage på op til toppen af din CSS fil og tilføje følgende:

 
#wrapper { 
    height:auto; 
    margin:0; 
    overflow:hidden; 
    padding:0; 
} 
 
.page { 
	position:relative; 
	overflow:hidden; 
	top:0px; 
	margin:0px; 
	padding:0px; 
	border-left:1px solid #a13d36; 
}

Trin 19: Mobil Landskab

Okay, endelig landskabsretningen for mobil. Hvis du placerer dette efter den mobile portræt CSS har vi netop oprettet det, arver disse stilarter, .e.g den fulde bredde sidebar mv. Alt vi skal gøre nu, er ændre posten bredde.

1
2	@media only screen and (min-width: 480px) and (max-width: 767px) {
3	.entry { width:190px; }
4	}

Trin 20: Indførelse af Isotopen

Nu har vi dækket at skabe design vi kan begynde at give det nogle funktionalitet! Vi bruger den fantastiske isotop plugin af David DeSandro. Isotop bruges til at oprette layout, filtrering og sortering. Det bruges almindeligvis på porteføljer til at filtrere stykker arbejde i forskellige kategorier - for eksempel Web Design, Fotografi og Illustration. På dette notat, lad os få det installeret!

Før vi kan tilføje det til vores design vi bliver nødt til at hente den. Gå videre til http://isotope.metafizzy.co/jquery.isotope.min.js. Du vil nu se isotop javascript filen, bare gå til Filer> Gem og gem den i den js mappe, vi oprettede i starten. Vi skal derefter link til scriptet i din HTML fil.

1
2	<script src="js/jquery.isotope.min.js"></script>

Trin 21: Filtrerings Processen

At tillade vores portefølje elementer filtreres vi bliver nødt til at ændre vores markup igen. Vi starter med den navigation der vil filtrere for os. Isotop bruger HTML5 Custom Data Attributes, specifikt data-filter = ''''. Vi sætter en værdi afhængig af kategorien; Web Design bruger .web (bemærk at vi skal tilføje en periode før kategorien værdi). Ankeretiketten for Alle categorys bruger ikke .all men bruger en stjerne.

 
<nav class="primary clearfix"> 
	<ul> 
		<li><a href="#" data-filter="*">All</a></li> 
		<li><a href="#" data-filter=".web">Web Design</a></li> 
		<li><a href="#" data-filter=".ill">Ilustration</a></li> 
		<li><a href="#" data-filter=".logo">Logo</a></li> 
		<li><a href="#" data-filter=".video">Video</a></li> 
		<li><a href="#" data-filter=".print">Print Design</a></li> 
	</ul> 
</nav>

Trin 22: Filtrering af Portefølje Poster

Den sidste del af filterprocessen er at redigere porteføljeposterne. Når du har tilføjet data-filter værdier, skal du tilføje de tilsvarende værdier til hver post. Hvis arbejdsindgangen er i videokategorien skal du tilføje en klasse af video. Bemærk, at hvis dine data-filter værdier er små bogstaver, skal du bruge små bogstaver til indgangsklasserne.

 
<figure class="entry video"> 
	<span class="ribbon"></span> 
	<img src="images/portfolio-image.jpg" alt=""> 
	<span class="hover"></span> 
</figure>

Trin 23: Hooking the Plugin

Det er på tide at aktivere isotop som vi vil gøre i to dele. Først skal vi tilslutte den del, der vil sortere vores porteføljeposter. Start med at oprette en ny fil kald ''custom.js'' og læg den i din js mappe.

 
$(window).load(function(){ 
 
	var $container = $('.portfolio'); 
	$container.isotope({ 
		filter: '*', 
		animationOptions: { 
			duration: 750, 
			easing: 'linear', 
			queue: false, 
		} 
	}); 
 
});

Trin 24: Klik på Funktion

Den anden del kører navigationen for at muliggøre filtreringen.

 
$(window).load(function(){ 
 
	var $container = $('.portfolio'); 
	$container.isotope({ 
		filter: '*', 
		animationOptions: { 
			duration: 750, 
			easing: 'linear', 
			queue: false, 
		} 
	}); 
 
	$('nav.primary ul a').click(function(){ 
		var selector = $(this).attr('data-filter'); 
		$container.isotope({ 
			filter: selector, 
			animationOptions: { 
				duration: 750, 
				easing: 'linear', 
				queue: false, 
			} 
		}); 
	  return false; 
	}); 
 
});

Trin 25: Tilføjelse af en Aktiv Tilstand

Vist i PSD er en aktiv tilstand for det aktuelle valgte navigationsanker. Vi skal tilføje nogle flere markeringer, nogle flere CSS og endelig nogle flere jQuery. Start med at gå tilbage til din HTML fil og tilføj class = ''selected'' til den første anker tag.

 
<nav class="primary clearfix"> 
	<ul> 
		<li><a href="#" class="selected" data-filter="*">All</a></li> 
		<li><a href="#" data-filter=".web">Web Design</a></li> 
		<li><a href="#" data-filter=".ill">Illustration</a></li> 
		<li><a href="#" data-filter=".logo">Logo</a></li> 
		<li><a href="#" data-filter=".video">Video</a></li> 
		<li><a href="#" data-filter=".print">Print Design</a></li> 
	</ul> 
</nav>

Derefter skal du tilføje nogle flere CSS, så tilføj dette lige under navigationsstile.

 
nav.primary ul li a:active, nav.primary ul li a.selected { 
	background:url(../images/nav_active.png); 
	border-bottom:1px solid #9e3f38; 
}

Den sidste del er nogle jQuery, dette vil tilføje klasser, når de klikkes for at vise den aktive knap/kategori.

 
var $optionSets = $('nav.primary ul'), 
       $optionLinks = $optionSets.find('a'); 
  
       $optionLinks.click(function(){ 
          var $this = $(this); 
	  // don't proceed if already selected 
	  if ( $this.hasClass('selected') ) { 
	      return false; 
	  } 
   var $optionSet = $this.parents('nav.primary ul'); 
   $optionSet.find('.selected').removeClass('selected'); 
   $this.addClass('selected');  
});

Trin 26: Glemmer Noget Er Vi?

Hvis du går videre og klikker på nav knapperne kan du se at filteret virker! Men vent, det er ikke en smidig overgang! Nå det er fordi vi stadig skal tilføje nogle CSS overgange.

 
.isotope-item { 
  z-index: 2; 
} 
 
.isotope-hidden.isotope-item { 
  pointer-events: none; 
  z-index: 1; 
} 
 
.isotope, 
.isotope .isotope-item { 
-webkit-transition-duration: 0.8s; 
   -moz-transition-duration: 0.8s; 
        transition-duration: 0.8s; 
} 
 
.isotope { 
-webkit-transition-property: height, width; 
   -moz-transition-property: height, width; 
        transition-property: height, width; 
} 
 
.isotope .isotope-item { 
-webkit-transition-property: -webkit-transform, opacity; 
   -moz-transition-property:    -moz-transform, opacity; 
        transition-property:         transform, opacity; 
}

Konklusion

Og vi går der, en anden nyttig tutorial komplet! Du kan frit bruge denne metode i ethvert design du har. Gå og have det sjovt med det.

Jeg håber du har haft denne tutorial, tak for læsning!