Как сверстать данный элемент навигации?

Question

[ivankalita]

Делаю переходы между дочерними компонентами во Vue.js, необходимо сверстать следующий макет навигации. Можно чистым CSS, можно как компонент Vue.js, если есть иные варианты, буду рад узнать. Основными требованиями являются:
1. При наведении на другую вкладку, серый ползунок плавно переходит под курсор мыши;
2. Адаптивность (т.к. проект верстается под мобильник и используется Bootstrap, т.е. размеры синего и серого блоков пропорционально уменьшаются при сжатии экрана);
Требуется:

На данный момент (tabs навигация от Bootstrap):

Answer 1

[Шохрух Шаймардонов]

Comments

[ivankalita]

Да, я согласен с вами, но проблема в том, что я не знаю как это даже сделать))) т.е. разметка HTML и стили CSS для элементов.
Да, можно обернуть ссылки тегом div, ему добавить border-radius & background-color, но вот как сделать ползунок серый, да чтобы его спозиционировать и заставить плавно перемещаться вдоль продольной оси симметрии вот не знаю)

[Шохрух Шаймардонов]

ivankalita, ну смотрите, сделайте родительский блок внутри которого будут горизонтально ссылки находиться. А у родителя сделайте ::after или ::before в виде ползунка. Задайте ему абсолютное/относительное position. По умолчанию над 1м элементом. А потом двигайте его от левого края направо до того элемента, у которого hover сработал. Определить какой ховер сработал можно как css так и js, как уже писал. Попытайтесь сделать это, выложите код, если что-то из вышесказанного не получается, помогу

[ivankalita]

Так, вроде мысль уловил, сейчас буду пробовать, спасибо, Вам, большое. С меня отчет обязательно, мб пригодиться))

[Шохрух Шаймардонов]

ivankalita, да пожалуйста)

[ivankalita]

Шохрух Шаймардонов, вот такая ситуация на данный момент: ::after элемент позиционируется после всех ссылок
Надеюсь, Вас не спугнет Bootstrap-Vue ))

<b-nav class="navigation" align="center">
                <b-nav-item>Personal</b-nav-item>
                <b-nav-item>Security</b-nav-item>
                <b-nav-item>API keys</b-nav-item>
                <b-nav-item>2FA</b-nav-item>
            </b-nav>

.navigation {
        /* display: inline-block; */
        background-color: #007bff;
        border-radius: 32px;
        width: 75%;
    }
    .navigation a {
        color: white;
    }
    .navigation::after {
        background-color: #E7E7E7;
        position: absolute;
        left: 50%;
        display: block;
        width: 150px;
        height: 4em;
        border-radius: 32px;
        content: "";
    }

[Шохрух Шаймардонов]

Поиграйтесь с left у ::after чтобы расположить над 1й ссылкой. А чтобы ссылки не оставались под ::after задайте им position: relative и z-index: 999. Насчет перемещения ползунка, сделайте селекторы для каждого таб:hover

[Шохрух Шаймардонов]

Залейте в jsfiddle / codepen то, что у вас получилось, на случай, если нужно вам подкорректировать

[ivankalita]

Ссылка на CodePen https://codepen.io/ivankalita_/pen/OYmRrp
z-index помог очень сильно, но спозиционировать до сих пор не могу понять как, чтобы было адаптивно
P.S. про анимацию вообще молчу))

[Шохрух Шаймардонов]

ivankalita,
Как вам такой вариант? если анимация не принципиальна, то тут адаптивно

[ivankalita]

Шохрух Шаймардонов, на самом деле очень классно)) но тогда из общей конвы вывалится такой FadeIn, заказчик хотел именно слайдер по навигации) С ней нереально сделать без JS, надо добавлять скрипты на состояния или не обязательно?

[Шохрух Шаймардонов]

ivankalita, можно и так и так. но если хотите чтоб именно был слайдер по навигации придется немного менять. постараюсь что нибудь прикрутить

[ivankalita]

Шохрух Шаймардонов, обалдеть, спасибо Вам огромное, буду очень благодарен.

С такими ребятами веришь в светлое будущее

[Шохрух Шаймардонов]

ivankalita, пожалуйста) если захотите, можете угостить кофейком ;-)

[Шохрух Шаймардонов]

ivankalita, не забудьте указать ответ как решение, чтобы люди понимали, что задача решена. Кому-то тоже может пригодиться

[ivankalita]

Шохрух Шаймардонов, Конечно укажу, я завтра закрою вопрос, у Вас будут идеи какие-нибудь, как это в "слайдер" превратить?

[Шохрух Шаймардонов]

ivankalita, всмысле в слайдер?

[Шохрух Шаймардонов]

ivankalita, если вы про то, чтобы отобразить при каждом клике некую форму, то тут масса готовых примеров
Вот один из таких:

[ivankalita]

Шохрух Шаймардонов, слайдер, я имел ввиду в переносном значении)) чтобы серый псевдоэлемент, как я и задумывал изначально, плавно перемещался с курсором мыши по навигации

[Шохрух Шаймардонов]

ivankalita, понял. добавьте кроме onclick событие hover и все)

[ivankalita]

Шохрух Шаймардонов, это вы про готовое решение из Codepen??

[Шохрух Шаймардонов]

ivankalita, Так???

[ivankalita]

Шохрух Шаймардонов, ОГО, в точку, вот это норм, друг, а с тобой можно в личке переговорить где-нибудь?

[Шохрух Шаймардонов]

ivankalita, да пожалуйста, у меня страница открыта и ссылки все имеются)