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

Question

ivankalita @ivankalita

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

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

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

Вопрос задан более трёх лет назад
532 просмотра

Комментировать

Подписаться 1 Средний Комментировать

Решения вопроса 1

23 комментария

ivankalita @ivankalita Автор вопроса

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад
ivankalita @ivankalita Автор вопроса

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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: "";
    }

Написано более трёх лет назад

Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад
ivankalita @ivankalita Автор вопроса

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад
ivankalita @ivankalita Автор вопроса

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад
ivankalita @ivankalita Автор вопроса

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад
ivankalita @ivankalita Автор вопроса

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад
ivankalita @ivankalita Автор вопроса

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад
ivankalita @ivankalita Автор вопроса

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

ivankalita, Так???
snippet

Написано более трёх лет назад
ivankalita @ivankalita Автор вопроса

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

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

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

Написано более трёх лет назад