UNN4MED
@UNN4MED
Битрикс разработчик

Как лучше оформить фильтр?

Как сделать анимированный фильтр с передвигающимся и подстраивающимся ползунком?
Вариант 1:
62eff55d9850f174293513.png
Вариант 2:
62eff5cfedbd1789494776.png
При нажатии на кнопки фильтруются торты под нужную категорию через Jquery, ползунок должен перемещаться к выбранной кнопке.
Я пытался сделать это с помощью ссылок.
(Категории "Новинки" и "Свадебные" пока не рабочие)
HTML:
<div class="cakes__nav">
                        <a href="#" data-filter="Популярное" class="cakes-nav__button">
                            Популярное
                        </a>
                        <a href="#" data-filter="Новинки" class="cakes-nav__button">
                            Новинки
                        </a>
                        <a href="#" data-filter="Свадебные" class="cakes-nav__button">
                            Свадебные
                        </a>
                        <a href="#" data-filter="Праздничные" class="cakes-nav__button">
                            Праздничные
                        </a>
                        <a href="#" data-filter="Детям" class="cakes-nav__button">
                            Детям
                        </a>
                        <span class="cakes-nav__line"></span>
                    </div>

CSS:
.cakes__nav {
    display: flex;
    margin: 0 auto 50px;
    position: relative;
    padding-bottom: 10px;
    width: 800px;
}
.cakes__nav::before {
    content: "";
    height: 5px;
    border-radius: 100px;
    background-color: #00000040;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.cakes-nav__button{
    font-size: 24px;
}
.cakes-nav__button:visited{
    font-weight: 600;
}
.cakes-nav__button:not(:last-child){
    margin: 0 26px 0 0;
}
.cakes-nav__line{
    position: absolute;
    bottom: 0;
    border-radius: 100px;
    height: 5px;
    background-color: #3C4043;
    width: 175px;
}

JS:
//----------------------------ФИЛЬТР
$(function() {

    let filter = $("[data-filter]");

    filter.on("click", function(event) {
        event.preventDefault();

        let cat = $(this).data('filter');

        if(cat == 'Популярное') {
            $("[data-category]").fadeIn();
        } else {
            $("[data-category]").each(function() {
                let workCat = $(this).data('category');

                if(workCat != cat) {
                    $(this).fadeOut();
                } else {
                    $(this).fadeIn();
                }
            });
        }
    });
});
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
Здесь есть похожий вопрос с ответом https://qna.habr.com/q/1185832
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@nonconformiste
При клике узнать ширину и позиция слева относительно родителя у кнопки, а потом задать такую же в css псевдо линии, задавать для псевдо надо через append('') на страницу.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы