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

Question

[TtT RrR]

Как сделать анимированный фильтр с передвигающимся и подстраивающимся ползунком?
Вариант 1:

Вариант 2:

При нажатии на кнопки фильтруются торты под нужную категорию через 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();
                }
            });
        }
    });
});

Answer 1

[Степан Крапивин]

Здесь есть похожий вопрос с ответом https://qna.habr.com/q/1185832

Comments

[TtT RrR]

Здравствуйте, уже третий день не могу разобраться с проблемой, ползунок не встаёт под кнопку


брал код из предложенной ссылки

const padding = 13;
const hover = document.querySelector(".cakes-nav__line");
const activeMenuItemClass = "cakes-nav__button_selected";
let defaultElement = document.querySelector("." + activeMenuItemClass);
document.querySelectorAll(".cakes-nav__button").forEach((el) => {
    el.addEventListener("mouseover", (ev) => onHoverMenuItem(ev.target));
    el.addEventListener("mouseout", (ev) => onOutMenuItem(ev.target));
    el.addEventListener("click", (ev) => onClickMenuItem(ev.target));
});

function onClickMenuItem(element) {
    document.querySelector("." + activeMenuItemClass).classList.remove(activeMenuItemClass);
    element.classList.add(activeMenuItemClass);
    defaultElement = element;
    onHoverMenuItem(element);
} // выделяем элемент по умолчанию

onHoverMenuItem(defaultElement);

function onOutMenuItem(element) {
    onHoverMenuItem(defaultElement);
}

function onHoverMenuItem(element) {
    const itemRect = element.getBoundingClientRect();
    hover.style.left = itemRect.left - padding + "px";
    hover.style.width = itemRect.width - padding + "px";
}

[Степан Крапивин]

TtT RrR, а можете выложить рабочий пример на codepen или jsfiddle, чтобы можно было вживую посмотреть?

[TtT RrR]

когда убираю position: relative; из .cakes__nav, то полоска встаёт под кнопки с погрешностью

https://codepen.io/talantrys/pen/YzavvYE

[Степан Крапивин]

TtT RrR, всё из-за того, что вы поставили меню с отступом от левого края, и этот отступ надо учесть.
Для этого надо вычислить отступ следующим образом:

function onHoverMenuItem(element) {
    const itemRect = element.getBoundingClientRect();
    // вычисляем отступ родителя от левого края экрана
    const parentLeft = element.parentElement.getBoundingClientRect().left;
    // задаём позицию ползунка с учётом позиции родителя
    hover.style.left = itemRect.left - padding - parentLeft + "px";
    hover.style.width = itemRect.width - padding + "px";
}

[TtT RrR]

Степан Крапивин, спасибо за помощь, помогли

Answer 2

[nonconformiste]

При клике узнать ширину и позиция слева относительно родителя у кнопки, а потом задать такую же в css псевдо линии, задавать для псевдо надо через append('') на страницу.