Хорошо спроектированный фильтр - это мощный инструмент, которым могут воспользоваться пользователи. На самом деле это важная функция, если на вашем сайте (интернет-магазине) есть много товара, распределенного по разным категориям.
Для электронной коммерции это способ повысить коэффициент конверсии за счет сокращения времени, необходимого пользователю, чтобы найти то, что он ищет.
Создание таких функций никогда не бывает легким: фильтры сильно зависят от содержимого веб-сайта; Кроме того, панель фильтров не должна отвлекать, основное внимание должно быть уделено контенту / продуктам. Поэтому мы попытались немного упростить вашу жизнь, построив для вас легко настраиваемую и легко интегрируемую панель фильтров CSS.
Он использует преимущества CSS Transitions, CSS Transformations и jQuery для плавного перехода в случае необходимости.
Создание структуры
Структура HTML немного сложнее, чем обычно. Прежде всего, есть два основных блока контента: элементы header и main, второй используется для обертывания как галереи .cd-gallery, так и фильтра .cd-filter. В дополнение к этому у нас есть вкладная навигация (вложенная в 2 div элемента, из-за эффекта выпадающего эффекта, видимого на мобильных устройствах) и триггер фильтра .cd-filter-trigger.
Вы также можете заметить множество имен классов (например, в элементах списка галереи) и фильтры данных: они используются для фильтрации содержимого, а не для стилизации.
Примечание. Назначение элемента .cd-gallery> li.gap - работать в сочетании с текстом: justify; Свойство, примененное к .cd-gallery, чтобы создать сетку галереи. Вам нужно создать столько же элементов .gap, сколько и максимальное количество элементов в строке -1.
<header class="cd-header">
<h1>Content Filter</h1>
</header>
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="placeholder">
<a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
</li>
<li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
<li class="filter" data-filter=".color-1"><a href="#0" data-type="color-1">Color 1</a></li>
<li class="filter" data-filter=".color-2"><a href="#0" data-type="color-2">Color 2</a></li>
</ul> <!-- cd-filters -->
</div> <!-- cd-tab-filter -->
</div> <!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
<li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
<li><!-- ... --></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section> <!-- cd-gallery -->
<div class="cd-filter">
<form>
<div class="cd-filter-block">
<h4>Block title</h4>
<div class="cd-filter-content">
<!-- filter content -->
</div> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
</form>
<a href="#0" class="cd-close">Close</a>
</div> <!-- cd-filter -->
<a href="#0" class="cd-filter-trigger">Filters</a>
</main> <!-- cd-main-content -->
Добавление стиля
Большая часть CSS касается стилей элементов формы и других базовых украшений. Интересно, как мы определили и использовали некоторые классы - в сочетании с jQuery - для изменения поведения некоторых элементов на основе определенных событий.
Например: на всех устройствах панель фильтров фиксируется, когда она достигает вершины области просмотра. Для достижения этого эффекта мы использовали класс .is-fixed, примененный к элементу main (.cd-main-content), чтобы мы могли ориентировать некоторые его дочерние элементы. В частности: .cd-tab-filter-wrapper находится в статическом положении, в то время как .cd-filter и .cd-filter-trigger находятся в абсолютном положении (относительно .cd-main-content). Когда мы применяем .is-fixed класс к .cd-main-content, мы переключаем положение всех этих элементов на Fixed.
.cd-tab-filter-wrapper {
background-color: #ffffff;
z-index: 1;
}
.cd-filter {
position: absolute;
top: 0;
left: 0;
width: 280px;
height: 100%;
background: #ffffff;
z-index: 2;
transform: translateX(-100%);
transition: transform 0.3s, box-shadow 0.3s;
}
.cd-filter-trigger {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 60px;
z-index: 3;
}
.cd-main-content.is-fixed .cd-tab-filter-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.cd-main-content.is-fixed .cd-filter {
position: fixed;
height: 100vh;
overflow: hidden;
}
.cd-main-content.is-fixed .cd-filter-trigger {
position: fixed;
}Еще одна вещь, о которой стоит упомянуть - это .filter-is-visible класс. Он применяется к нескольким элементам, когда пользователь запускает панель фильтра. На всех устройствах оно используется для изменения значения translateX элемента .cd-filter (от -100% до 0). На больших устройствах (> 1170px) мы также нацеливаем на .cd-gallery и .cd-tab-filter и уменьшаем их ширину: таким образом панель не будет перекрывать контент, а пользователь использует дополнительные возможности Пространство для применения фильтров и просмотра изменений одновременно, без необходимости закрывать панель.
Обработка событий
Для реализации функциональности фильтра содержимого мы интегрировали плагин MixitUp - mixitup.kunkalabs.com jQuery. Чтобы инициализировать плагин в контейнере галереи, мы используем функцию mixItUp () и объявляем переменную buttonFilter, которая содержит все пользовательские функциональные возможности фильтра.
Кроме того, мы используем jQuery для открытия / закрытия панели фильтров и исправления (вместе с навигацией с вкладками), чтобы он все еще отображался при прокрутке галереи.
