Створюємо фільтрівне портфоліо з адаптивним веб-дизайном

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

Сьогодні ми будемо використовувати макет Портфоліо в форматі PSD (* PhotoShop Drawing/PhotoShop Document – формат графічного файлу в Adobe Photoshop (розширення файлу), документ Photoshop. Тут і надалі примітка перекладача) з ThemeForest, верстаючи його тільки за допомогою HTML та CSS та роблячи його дизайн адаптивним. Потім ми підемо ще далі та додамо плаґін jQuery Isotope для того, щоб зробити наш макет повнофункціональним фільтрівним портфоліо.

Крок 1: Задаємо організацію проекту

Ми почнемо зі створення простої структури проекту, щоб все було на своїх місцях. Ми створимо три папки:

css - для розташування файлів CSS
images - для розташування всіх зображень
js - для розташування плаґінів jQuery та наших власних скриптів

Крок 2: Документ

Перед тим як взятися за написання коду, ми створимо файл index.html, який можна розташувати кореневій папці вашого проекту. Ми додамо базовий шаблон HTML5, у заголовку якого підключимо файл CSS. Також нам потрібно буде підключити ще деякі файли:

jQuery Library – нам потрібна буде підключена бібліотека jQuery пізніше, коли будемо використовувати плаґін Isotope; ми же додамо її зараз. Я підключив бібліотеку, що розташовується на серверах Google (дуже рекомендую).
HTML5 Shiv – оскільки ми будемо використовувати елементи HTML5, то нам потрібно буде впевнитися, що ми підключили прокладку (* додає до старих браузерів підтримку можливостей, які вбудовано до сучасних браузерів) HTML5 Shiv, що дозволяє раннім версіям Internet Explorer розпізнавати теги HTML5.
Google Web Fonts – якщо ви поглянете на файл PSD, то помітите, що у ньому використовується шрифт PT Sans. Оскільки цей шрифт не буде доступний локально для багатьох користувачів, то ми підключимо його з сервісу 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>

Крок 3: Додаємо загальне стильове оформлення

Тепер нам потрібно буде додати деяке загальне стильове оформлення у нашому файлі CSS. Воно включає лише просте скидання значень стилів, код CSS для виконання якого ви можете додати зверху вашого файлу CSS.

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}

Крок 4: Починаємо з додавання Шапки

Тепер ми приступаємо до створення структури сайту! Ми почнемо із заголовка та додамо його за допомогою елементу HTML5 header.

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

Далі ми додамо деякі стильові правила для нашого заголовка. Ми додамо тут деякі головні стилі, проте головне, на що вам варто звернути увагу, – позиціонування. Тут ми використовуємо фіксоване позиціонування та потім задаємо 0 у якості значення властивостей top, left та right. Завдяки цьому буде гарантовано, що наш заголовок розташовується поверх інших елементів вікна при прокручуванні та знаходиться вгорі вікна перегляду.

 
.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; 
}

Крок 5: Логотип та емблема "Hire Me"

Для простоти обидва ці елементи будуть реалізовані завдяки використанню зображень, проте ми також обернемо ці зображення у теги а та додамо їм клас, щоб ми змогли встановити для цих елементів деякі стильові правила для їх позиціонування.

 
<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>

Для обох цих елементів використовується подібне стильове оформлення, для обох використовується абсолютне позиціонування (причому у якості батьківського елементу виступає елемент header), при якому в якості значення властивості top використовується 0. У якості значення left логотипа встановлено 0 для розміщення його зліва та для "Hire Me" у якості значення right встановлено 20px для невеликого зсуву його від лівого краю сторінки.

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

У результаті повинно вийти дещо на зразок наступного:

Крок 6: Бокова панель

Знову ми скористаємося можливостями розмітки HTML5 та створимо нашу бокову панель за допомогою елемента aside.

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

Серед коду CSS для бокової панелі ви помітите, що ми знову використали фіксоване позиціонування, проте формально це стильове правило тут не застосовується, оскільки бокова панель буде починатися зверху сторінки.

 
.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; 
}

Крок 7: Фон бокової панелі!

Ви помітите, що ми відмовилися від встановлення фону для бокової панелі... Ми додамо фон для бокової панелі, проте не за допомогою стильових правил, що застосовуються до неї; ми додамо фон до тіла документа та задамо для нього повторення по осі у, завдяки чому він буде простиратися зверху донизу. Також ми встановимо у якості значення його позиції left, щоб гарантувати, що фон розташовується зліва сторінки для бокової панелі.

Оскільки це стильове правило задається для тіла, то, можливо, є сенс прокрутити ваш файл CSS та розмістити це правило ближче до його верху. Я також завчасно додав властивість для вирівнювання шрифту для браузерів, що працюють на основі движка webkit.

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

Тепер ми маємо основу нашої бокової панелі!

Крок 8: Приступаємо до реалізації навігаційного меню

Тепер, коли бокова панель готова, ми можемо додати до неї навігаційне меню. Ми створимо невпорядкований список та обернемо його за допомогою елемента 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>

Тепер додаємо деяке стильове оформлення для навігаційного меню, фон, стильові правила для шрифту та сімейство шрифту з 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; 
}

Крок 9: Створюємо область з головним контентом

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

Тепер нам потрібно буде створити обертаючий контейнер, у якому будуть розташовуватися проекти портфоліо. Також нам потрібно буде встановити деякі відступи та поля, щоб гарантувати вірне розташування проектів. Цього можна досягти для початку завдяки зміщенню цілого елемента від заголовка та бокової панелі.

Враховуючи, що заголовок у висоту займає 70px, нам потрібно буде задати відступ зверху величиною 70px. Ширина бокової панелі складає 150px, так що ми встановимо відступ зліва величиною 150px. Наприкінці ми додаємо поля від верхнього та лівого краю величиною 20px, щоб здвинути проекти від заголовка та бокової панелі.

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

Крок 10: Додаємо проект портфоліо

Настав час взятися за проекти портфоліо. Вперед, створіть елемент div с класом portfolio всередині нашої головної області; за допомогою нього будуть об'єднані записи портфоліо. Запис нашого портфоліо реалізується за допомо figure (знав-таки елемента HTML5), що використовується для вказання того, що елемент є контейнером для якоїсь інформації.

Далі ми додамо зображення та два рядкові елементи; один для реалізації стрічки та один для додавання стильового оформлення, що застосовується при наведенні курсору поверх запису портфоліо. Ви також могли би скористатися псевдо-елементами для реалізації цього, завдяки чому зменшився би розмір розмітки, проте зменшилася би сумісність сторінки з браузерами.

 
<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>

Крок 11: Додаємо стильове оформлення для запису портфоліо

Стильове оформлення для проекту портфоліо не становить собою нічого особливого. Ми задамо вирівнювання для елемента за лівим краєм та встановимо відступ справа та знизу величиною 20px. Для додавання білої границі ми просто додамо деякі поля та потім фон, які будуть закруглено за допомогою властивості border-radius, значення якої складає 5px (при цьому враховуючи префікси для браузерів). Нарешті, до елемента буде додано тінь.

 
.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); 
}

Оскільки ми застосовуємо відступ величиною 20px для правого боку записів, нам потрібно буде відняти це значення у відступу для правого боку батьківського контейнера (елемента div портфоліо).

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

Крок 12: Додаємо стрічку для запису портфоліо

Ми створили розмітку для стрічки, коли додавали запис портфоліо (хоча, знов-таки, ви могли би скористатися псевдо-елементами); тепер же нам потрібно додати для неї стильове оформлення.

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

Крок 13: Додаємо стильове оформлення, що змінюється при наведенні курсору поверх запису портфоліо

Останнє, що нам тепер потрібно виконати для нашого портфоліо, – додати стильове оформлення, що застосовується при наведенні курсору поверх запису портфоліо. Це буде виконано за допомогою вже створеного нами рядкового елемента; все, що тепер потрібно, – додати для нього стильове оформлення. Ми будемо використовувати зображення та фон чорного кольору, у якості значення компонента кольору альфа (* кольору, використовуваний для контролю змішування кольорів з фоном або підлеглим об'єктом. У цьому разі його значення, що дорівнює 1,0, означає цілковиту непрозорість, а 0,0 - цілковиту прозорість) якого задано 70%. Також ми додали деякі переходи CSS3, щоб стилі, використовувані при наведенні курсору поверх елемента, застосовувалися плавно. Останнє, що потрібно виконати, – додати opacity:1; на той випадок, коли курсор розташовується поверх запису портфоліо, завдяки чому поступово проявиться елемент із застосовуваним при цьому оформленням.

 
.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; }

Тепер запис нашого портфоліо готовий, ви запросто можете додавати свої власні зображення та змінювати їх!

Крок 14: Робимо дизайн портфоліо адаптивним

Тепер, коли ми відтворили на основі PSD-файла робочий макет, то візьмемо та зробимо його дизайн адаптивним. Ми не використовуємо повністю гнучку сітку, через що наявний у нас дизайн формально не є чутливим. Ми скористаємося медіа-запитами CSS3 для зміни макета при його перегляду у вікнах різних розмірів. Ми задамо приблизні значення розмірів пристроїв, при яких можна приблизно вважати, що пристроєм є або планшет з портретною орієнтацією екрана, або планшет з альбомною орієнтацією екрана, або мобільний пристрій з портретною орієнтацією екрана або, нарешті, мобільний пристрій з альбомною орієнтацією екрана.

Перед тим як взятися за редагування макета нам потрібно виконати два моменти. Для початку потрібно буде додати мета-тег viewport, завдяки чому наш веб-сайт буде коректно відображуватися на мобільних пристроях та планшетах; якщо ви хочете дізнатися більше про це, то обов'язково ознайомтеся з цією статтею, написаною Ian Yates. Потім потрібно додати трохи коду CSS, щоб наші зображення стали чутливими.

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

Крок 15: Задаємо стильове оформлення для планшетів з портретною орієнтацією екрана

Ми почнемо з додавання стильового оформлення для планшетів з портретною орієнтацією екрана. Потрібно внести лише пару змін, щоб підладити наш макет до цього варіанта. Головне, на що варто звернути увагу, – запис портфоліо; його розмір буде меншим, щоб у кожному ряду могло вміститися більше записів.

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

Крок 16: Задаємо стильове оформлення для планшетів з альбомною орієнтацією екрана

Звичайно ви не турбувалися би про стильове оформлення для планшетів з альбомною орієнтацією екрана, поки вам це дійсно не буде потрібно, проте у випадку дизайну нашої сторінки це точно стане у пригоді. Ми не будемо вказувати мінімальну та максимальну ширину для визначення розміру вікна перегляду – ми встановимо стильове оформлення для розглядуваного у цьому кроці випадку залежно від орієнтації. У цей раз ми використовуємо це менше коду, змінюю чи лише ширину запису портфоліо.

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

Крок 17: Додаємо стильове оформлення для мобільних пристроїв із портретною орієнтацією екрана

Тепер приступимо до мобільних пристроїв, починаючи з портретної орієнтації екрана. Цього разу нам потрібно буде внести трохи більше змін. Тепер ми підлагодимо наш макет, оскільки через невеликий розмір екрана ми більше не можемо розміщувати бокову панель зліва та проекти портфоліо справа. Ми перемістимо бокову панель уверх перед проектами та зробимо так, щоб вона заповнювала всю ширину екрана.

Також через великий розмір заголовка, під яким розташовується бокова панель/навігаційне меню, ви не зможете побачити ту саму кількість проектів, як і раніше. Ми видалимо властивість position: fixed та замість неї застосуємо absolute, завдяки чому заголовок тепер буде прокручуватися, а не залишатися наверху сторінки.

 
@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; } 
}

Крок 18: Вирішуємо деякі проблеми з позиціонуванням

Що ж, тепер у нас з'явилися деякі проблеми. Бокова панель підлагодилася чудово під розмір екрана, проте проекти портфоліо розташовуються некоректно. Нам потрібно буде повернутися до макету та додати два додаткові елементи div, один з id (* identifier – ідентифікатор) wrapper, що оберне всі елементи, за виключенням заголовка, та інший з класом page, який оберне область з головним контентом.

 
<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 -->

Після додавання потрібної розмітки нам потрібно буде додати деяке стильове оформлення. Прокрутіть доверху код CSS-файлу та додайте наступний:

 
#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; 
}

Крок 19: Додаємо стильове оформлення для мобільних пристроїв із альбомною орієнтацією екрана

Добре, нарешті приступаємо до мобільних пристроїв з альбомною орієнтацією екрана. Якщо ви розмістите наступний код після тільки-но створеного нами стильового оформлення для мобільних пристроїв з портретною орієнтацією, то для розглядуваного у цьому кроці варіанта буде успадковано ті стилі, тобто ширина панелі на весь екран тощо. Все що нам тут потрібно – змінити ширину проекту.

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

Крок 20: Знайомимося з Isotope

Тепер, коли ми розглянули створення дизайну, то можемо перейти до додавання деякого функціоналу! Ми будемо використовувати надзвичайний плаґін Isotope, розроблений David DeSandro. Isotope використовується для додавання макетів, можливості фільтрації та сортування. Він часто використовується у портфоліо для фільтрації робіт за різними категоріями, наприклад Веб-дизайн, Фотографія, Ілюстрації. А тепер давайте почнемо!

Перед тим як додати плаґін до нашого документа нам потрібно завантажити його. Перейдіть за http://isotope.metafizzy.co/jquery.isotope.min.js. Тепер ви побачите JavaScript-файл Isotope; просто виберіть File > Save та збережіть його у папці js, яку створили напочатку. Далі нам потрібно буде підключити скрипт у нашому HTML-файлі.

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

Крок 21: Фільтрація

Для того щоб додати для записів нашого портфоліо можливість фільтрації, нам потрібно знову змінити нашу розмітку. Ми почнемо з навігаційного меню, яке будемо використовувати для фільтрації. Isotope використовуються власні атрибути HTML5 Data, а саме data-filter="". Ми встановлюємо значення залежно від категорії; наприклад для категорії Web Design використовується .web (зверніть увагу, що нам потрібно додати крапку перед значенням категорії). Тим не менше в якірному елементів для категорії All використовується не .all, а зірочка.

 
<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>

Крок 22: Додаємо можливість фільтрації записів

Останнє, що потрібно виконати для додання можливості фільтрації, – відредагувати записи портфоліо. Після додання значень атрибутів data-filter вам потрібно буде додати відповідні значення для кожного запису. Якщо робота належить до категорії Video, то вам потрібно буде додати клас video. Обов'язково зверніть увагу на те, що якщо значення атрибута data-filter вказано у нижньому регістрі, то ви повинні використовувати нижній регістр і при зазначенні класів записів.

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

Крок 23: Активуємо плаґін

Настав час активувати Isotope, що ми зробимо у два етапи. Для початку нам потрібно активувати частину, за допомогою якої буде відбуватися фільтрація записів нашого портфоліо. Почніть зі створення нового файлу під назвою "custom.js" та додайте його до нашої папки js.

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

Крок 24: Додаємо обробник події Click

На другому етапі ми активуємо навігаційне меню, щоб фільтрація стала можливою.

 
$(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; 
	}); 
 
});

Крок 25: Додаємо стильове оформлення для пунктів меню, що знаходиться в активному стані

У PSD показано стильове оформлення для поточного вибраного якірного елемента навігаційного меню, що знаходиться в активному стані. Нам буде потрібно додати деяку додаткову розмітку, деякий код CSS і, нарешті, деякий додатковий код jQuery. Для початку перейдіть до вашого HTML-файлу та додайте class="selected" до першого якірного елемента.

 
<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>

Далі вам потрібно буде додати деякий додатковий код CSS, так що додайте наступний код одразу після стилів для навігаційного меню.

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

Нарешті, потрібно додати деякий код jQuery, за допомогою якого будуть додаватися класи при виборі пунктів меню для відображення активної кнопки/категорії.

 
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');  
});

Крок 26: Ми щось забули, чи не так?

Якщо ви візьмете та натиснете кнопки навігаційного меню, то побачите, що фільтрація працює! Проте зачекайте, тут у нас виконується не плавний перехід! Що ж, це так, оскільки нам як і раніше потрібно додати деякі переходи CSS.

 
.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; 
}

Завершення

От і все, підійшло до кінця ще один посібник! Ви сміло можете використовувати описаний тут підхід у будь-яких ваших роботах. Вперед, поекспериментуйте з ним!

Сподіваюсь, що вам сподобався цей посібник. Дякую за проявлену зацікавленість!