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

Автор оригинала: Florin Pop.

Тема На неделю # 3 из моих Недельный кодирующий вызов это навигация ! Итак, давайте узнаем немного больше об этом.

Компонент навигации имеет решающее значение на сайте, поскольку вы хотите, чтобы ваши пользователи могли легко перемещаться по вашим страницам. Вы можете найти компонент навигации даже на веб-сайтах, которые позволят вам перейти в определенный раздел на странице. Так как разработчик, очень полезно знать, как построить этот рода компонент.

В этой статье я решил построить TAB BAR навигация , но вы можете построить любую навигацию, которую вы хотите.

Я был вдохновлен это Дизайн сделан Aurelien Salomon Отказ Вот какой конечный результат того, что мы собираемся построить, будет выглядеть:

HTML

Структура HTML будет проста. У нас будет .tab-nav-containter и четыре .tab S в нем:

Как вы можете видеть, каждый .tab Иконка (от fontawesome ), соответствующий текст и некоторые дополнительные классы, которые будут использоваться, чтобы дать каждую вкладку, специфичную Фон-цвет и цвет характеристики. Также . Accive Класс, который будет использоваться для стиля активной вкладки. Довольно базовый, верно? ?

CSS.

Во-первых, давайте стиль .tab-nav-containter :

Примечание : У нас есть Исправлено Ширина на контейнере, поскольку мы не хотим, чтобы это изменить его размер, когда мы меняем активные .tab Поскольку каждая вкладка может иметь текст, который либо дольше, либо короче (например, Home (4 буквы) VS профиль (6 букв)).

Мы используем Flexbox распределить .tab S равномерно внутри контейнера. Кроме того, я считаю, что CSS довольно объясняет.

Далее … .tab Стайлинг:

.tab {
    background-color: #ffffff;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    margin: 0 10px;
    transition: background 0.4s linear;
}

.tab i {
    font-size: 1.2em;
}

.tab p {
    font-weight: bold;
    overflow: hidden;
    max-width: 0;
}

.tab.active p {
    margin-left: 10px;
    max-width: 200px;
    transition: max-width 0.4s linear;
}

.tab.active.purple {
    background-color: rgba(91, 55, 183, 0.2);
    color: rgba(91, 55, 183, 1);
}

.tab.active.pink {
    background-color: rgba(201, 55, 157, 0.2);
    color: rgba(201, 55, 157, 1);
}

.tab.active.yellow {
    background-color: rgba(230, 169, 25, 0.2);
    color: rgba(230, 169, 25, 1);
}

.tab.active.teal {
    background-color: rgba(28, 150, 162, 0.2);
    color: rgba(28, 150, 162, 1);
}

Несколько вещей, чтобы отметить здесь:

Для того, чтобы иметь плавный переход, когда мы меняем . Accive Вкладка, мы устанавливаем Переход: Фон Имущество для .tab учебный класс.
По умолчанию P тег внутри .tab имеет Макс-ширина 0 и его Переполнение Недвижимость набор на скрытый Отказ Это потому, что мы только хотим показать текст только тогда, когда .tab активен.
Мы используем пользовательские цветные классы ( .purple , .pink и т. Д.), чтобы иметь разные цвета на вкладках.

Давайте убедимся, что это выглядит хорошо на мобильном:

@media (max-width: 450px) {
    .tab-nav-container {
        padding: 20px;
        width: 350px;
    }

    .tab {
        padding: 0 10px;
        margin: 0;
    }

    .tab i {
        font-size: 1em;
    }
}

Как видите, мы сокращаем .tab-nav-containter Когда максимальная ширина просмотра в просмотре 450px И мы также уменьшаем прокладку, чтобы она выглядела меньше.

JavaScript

В конце в JS мы должны убедиться, что когда пользователь нажимает на другой .tab . Accive Класс добавляется к нему и удален из предыдущего активного .tab :

// Get all the tabs
const tabs = document.querySelectorAll('.tab');

tabs.forEach(clickedTab => {
    // Add onClick event listener on each tab
    clickedTab.addEventListener('click', () => {
        // Remove the active class from all the tabs (this acts as a "hard" reset)
        tabs.forEach(tab => {
            tab.classList.remove('active');
        });

        // Add the active class on the clicked tab
        clickedTab.classList.add('active');
    });
});

Вывод

Этот вид навигации бара вкладыша в основном используется на мобильных устройствах, поэтому, если вы хотите повторно использовать его для мобильного приложения, убедитесь, что вы устанавливаете контейнер в нижнюю часть экрана (с помощью Position: Fixed ) и вы пересчитаете Ширина для заполнения всего ширины экрана.

В примере кодепена мы также изменяем цвет фона тела, когда нажата другая вкладка. Это только для визуальных целей, и он не совсем связан с темой кодирования этой недели. Но если вы хотите посмотреть, как я это сделал, проверьте код JS в ручка (всего 2 дополнительных строки кода).

Больше примеров этой проблемы кодирования

В оформлении предыдущий Статья, я продемонстрировал, как создать адаптивное навигационное меню. Вы можете проверить это тоже, если вы хотите построить что-то в этом роде.

Также, если у вас нет, убедитесь, что вы прочитали Недельный кодирующий вызов «Правила», если вы хотите участвовать в вызове! И почему бы не так ли? Это отличный способ улучшить свои навыки кодирования! ?

Счастливое кодирование! ?

Первоначально опубликовано www.florin-pop.com .

Навигация

HTML

CSS.

JavaScript

Вывод

Больше примеров этой проблемы кодирования

Читайте ещё по теме: