Как создать ФИЛЬТРАЦИЮ на сайте за 5 минут [HTML, CSS, JS] ссылка в описании
В этом ролике подробно разберем как самостоятельно создать фильтрацию карточек или любых других элементов на сайте буквально за 5 минут.
============================================
Ссылка на пример из этого видео:
https://codepen.io/inteltone/pen/PoMpaER
============================================
Главное:
1. Для скрытия и показа карточек используется класс hidden
2. Для визуального выделения кнопки с названием бренда используется класс current
3. При нажатии на кнопку вызывается функция, которая сначала скрывает все карточки и деактивирует кнопки. Затем показывает только те карточки, значение атрибута data-brand которых, соответствует тому же значению, что и у кнопки на которой кликнули.
Вот и все что нужно знать, чтобы создать на сайте простую, но эффективную фильтрацию.
========================================
🏆 ПРЕДЛАГАЮ УСЛУГИ :::
✅ профессиональная адаптивная кроссбраузерная верстка веб-сайтов (HTML5, CSS3, Flexbox, Grid, Vue 3, Nuxt 3, Vite, Gulp)
✅ анимирование элементов на страницах веб-сайта (GSAP, Adobe Animate)
✅ фронтенд программирование на Javascript
✅ посадка верстки на CMS WordPress
==========================================
⚽ ИНДИВИДУАЛЬНО ОБУЧАЮ ОНЛАЙН :::
✅ кроссбраузерной адаптивной верстке
✅ работе с JS-библиотекой GSAP (веб-анимация)
✅ работе в программе Adobe Animate
Связаться со мной можно по email, который указан на Главной странице этого канала. Перейти можно по ссылке ниже:
https://www.youtube.com/channel/@inteltone
💌 СОЦИАЛЬНЫЕ СЕТИ :::
ТЕЛЕГРАМ: @inteltone
https://vk.com/pro_front_end
Видео Как создать ФИЛЬТРАЦИЮ на сайте за 5 минут [HTML, CSS, JS] ссылка в описании канала ПРО ФРОНТЕНД
============================================
Ссылка на пример из этого видео:
https://codepen.io/inteltone/pen/PoMpaER
============================================
Главное:
1. Для скрытия и показа карточек используется класс hidden
2. Для визуального выделения кнопки с названием бренда используется класс current
3. При нажатии на кнопку вызывается функция, которая сначала скрывает все карточки и деактивирует кнопки. Затем показывает только те карточки, значение атрибута data-brand которых, соответствует тому же значению, что и у кнопки на которой кликнули.
Вот и все что нужно знать, чтобы создать на сайте простую, но эффективную фильтрацию.
========================================
🏆 ПРЕДЛАГАЮ УСЛУГИ :::
✅ профессиональная адаптивная кроссбраузерная верстка веб-сайтов (HTML5, CSS3, Flexbox, Grid, Vue 3, Nuxt 3, Vite, Gulp)
✅ анимирование элементов на страницах веб-сайта (GSAP, Adobe Animate)
✅ фронтенд программирование на Javascript
✅ посадка верстки на CMS WordPress
==========================================
⚽ ИНДИВИДУАЛЬНО ОБУЧАЮ ОНЛАЙН :::
✅ кроссбраузерной адаптивной верстке
✅ работе с JS-библиотекой GSAP (веб-анимация)
✅ работе в программе Adobe Animate
Связаться со мной можно по email, который указан на Главной странице этого канала. Перейти можно по ссылке ниже:
https://www.youtube.com/channel/@inteltone
💌 СОЦИАЛЬНЫЕ СЕТИ :::
ТЕЛЕГРАМ: @inteltone
https://vk.com/pro_front_end
Видео Как создать ФИЛЬТРАЦИЮ на сайте за 5 минут [HTML, CSS, JS] ссылка в описании канала ПРО ФРОНТЕНД
Комментарии отсутствуют
Информация о видео
15 октября 2024 г. 18:16:26
00:03:33
Другие видео канала