Как сделать — Фильтр элементов
Узнать, как фильтровать элемент DIV на основе его имени класса.
Фильтр элементов DIV
Создание фильтра элементов DIV
Шаг 1) Добавить HTML:
Пример
<!— Control buttons —>
<div >
<button onclick=»filterSelection(‘all’)»> Показать все</button>
<button onclick=»filterSelection(‘cars’)»> Машины</button>
<button onclick=»filterSelection(‘animals’)»> Животные</button>
<button onclick=»filterSelection(‘fruits’)»> Фрукты</button>
<button onclick=»filterSelection(‘colors’)»> Цветы</button>
</div>
<!— Фильтруемые элементы. Примечание что некоторые из них имеют несколько имен классов (это может быть использовано, если они принадлежат к нескольким категориям) —>
<div >
<div >БМВ</div>
<div >Апельсин</div>
<div >Вольво</div>
<div >Красный</div>
<div >Мустанг</div>
<div >Синий</div>
<div >Кот</div>
<div >Собака</div>
<div >Арбуз</div>
<div >Киви</div>
<div >Банан</div>
<div >Лимон</div>
<div >Корова</div>
</div>
Шаг 2) Добавить CSS:
Пример
.filterDiv <
float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none; /* Скрыто по умолчанию */
>
/* В класс "show" добавляется к отфильтрованные элементы */
.show <
display: block;
>
/* Стиль кнопок */
.btn <
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
>
/* Добавить светло-серый фон на наведении курсора мыши */
.btn:hover <
background-color: #ddd;
>
Как сделать — Фильтр раскрывающегося списка
Узнайте, как искать элементы в раскрывающемся меню с помощью CSS и JavaScript.
Фильтр раскрывающегося списка
Создание всплывающего раскрывающегося меню
Создайте раскрывающееся меню, которое появляется при нажатии пользователем кнопки.
Шаг 1) добавить HTML:
Пример
Пример как работает
Используйте любой элемент, чтобы открыть раскрывающееся меню, например <Button>, <a> или <p> элемент.
Используйте элемент контейнера (например, <div>) для создания раскрывающегося меню и добавления раскрывающихся ссылок внутри него.
Оберните элемент <div> вокруг кнопки и <div>, чтобы правильно расположить раскрывающееся меню с помощью CSS.
Шаг 2) добавить CSS:
Пример
/* Dropdown Button */
.dropbtn <
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus <
background-color: #3e8e41;
>
/* The search field */
#myInput <
border-box: box-sizing;
background-image: url(‘searchicon.png’);
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
>
/* The search field when it gets focus/clicked on */
#myInput:focus
/* The container <div> — needed to position the dropdown content */
.dropdown <
position: relative;
display: inline-block;
>
/* Dropdown Content (Hidden by Default) */
.dropdown-content <
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
>
/* Links inside the dropdown */
.dropdown-content a <
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Change color of dropdown links on hover */
.dropdown-content a:hover
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show
Пример как работает
Мы создали стиль выпадающего кнопки с фоном-цвет, обивка, наведите эффект, и т.д.
.dropdown класс использует position:relative , который необходим, когда мы хотим, чтобы раскрывающийся контент помещается прямо под кнопкой раскрывающегося списка (с помощью position:absolute ).
.dropdown-content класс содержит фактическое раскрывающееся меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание min-width . имеет значение 230пкс. Вы можете изменить это. Совет: Если нужно, чтобы ширина раскрывающегося списка была такой же широкой, как и кнопка раскрывающегося списка, установите значение width 100% (и overflow:auto включите прокрутку на маленьких экранах).
Поле поиска (#myInput) имеет стиль, чтобы уместиться в раскрывающемся меню. Мы добавили значок поиска, расположенный слева внутри поля поиска, чтобы указать, что это поле поиска.
Шаг 3) добавить JavaScript:
Пример
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() <
document.getElementById("myDropdown").classList.toggle("show");
>
function filterFunction() <
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) <
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) <
a[i].style.display = "";
> else <
a[i].style.display = "none";
>
>
>
Совет: Перейдите в наш CSS раскрывающегося меню учебник, чтобы узнать больше о раскрывающихся списках.
Совет: Чтобы узнать больше о всплывающих раскрывающихся списках, перейдите в наши всплывающие меню.
Адаптивный фильтр товаров на jQuery и CSS 
Хорошо спроектированный фильтр — это мощный инструмент, которым могут воспользоваться пользователи. На самом деле это важная функция, если на вашем сайте (интернет-магазине) есть много товара, распределенного по разным категориям.
Для электронной коммерции это способ повысить коэффициент конверсии за счет сокращения времени, необходимого пользователю, чтобы найти то, что он ищет.
Создание таких функций никогда не бывает легким: фильтры сильно зависят от содержимого веб-сайта; Кроме того, панель фильтров не должна отвлекать, основное внимание должно быть уделено контенту / продуктам. Поэтому мы попытались немного упростить вашу жизнь, построив для вас легко настраиваемую и легко интегрируемую панель фильтров 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.
Добавление стиля
Большая часть 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.
Еще одна вещь, о которой стоит упомянуть — это .filter-is-visible класс. Он применяется к нескольким элементам, когда пользователь запускает панель фильтра. На всех устройствах оно используется для изменения значения translateX элемента .cd-filter (от -100% до 0). На больших устройствах (> 1170px) мы также нацеливаем на .cd-gallery и .cd-tab-filter и уменьшаем их ширину: таким образом панель не будет перекрывать контент, а пользователь использует дополнительные возможности Пространство для применения фильтров и просмотра изменений одновременно, без необходимости закрывать панель.
Обработка событий
Для реализации функциональности фильтра содержимого мы интегрировали плагин MixItUp jQuery. Чтобы инициализировать плагин в контейнере галереи, мы используем функцию mixItUp () и объявляем переменную buttonFilter , которая содержит все пользовательские функциональные возможности фильтра. Кроме того, мы используем jQuery для открытия / закрытия панели фильтров и исправления (вместе с навигацией с вкладками), чтобы он все еще отображался при прокрутке галереи.