Како се гради једноставна компонента навигације на траци са картицама

Тема за недељу # 3 у мом недељно кодирање изазов је навигација ! Па научимо мало више о томе.

Навигација

Компонента навигације је пресудна на веб локацији, јер желите да корисници могу лако да се крећу кроз ваше странице. Компоненту за навигацију можете пронаћи чак и на веб локацијама са једном страницом које ће вам омогућити да пређете на одређени одељак на страници. Дакле, као програмер, врло је корисно знати како направити ову врсту компоненте.

У овом чланку сам одлучио да направим навигацију на траци са картицама, али можете да направите било коју врсту навигације коју желите.

Инспирисао ме је овај дизајн који је направио Аурелиен Саломон. Ево како ће изгледати коначни резултат онога што ћемо изградити:

ХТМЛ

ХТМЛ структура ће бити једноставна. У њему ћемо имати .tab-nav-containerи четири .tabс:

House

Likes

Search

Profile

Као што видите, свака .tabима икону (из ФонтАвесоме), одговарајући текст и неке додатне класе које ће се користити за давање сваке картице специфичностима background-colorи colorсвојствима. Такође и .activeкласа која ће се користити за обликовање активне картице. Прилично основно, зар не? ?

ЦСС

Прво, хајде да обликујемо .tab-nav-container:

Напомена : fixedна контејнеру имамо ширину, јер не желимо да мења своју величину када променимо активну, .tabјер свака картица може имати текст који је или дужи или краћи (нпр. Почетна (4 слова) у односу на Профил (6 писма)).

Користимо flexboxза .tabравномерно распоређивање с унутар контејнера. Осим тога, верујем да је ЦСС прилично саморазумљив.

Следеће ... .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); }

Овде треба напоменути неколико ствари:

  1. Да бисмо имали лаган прелаз када променимо .activeкартицу, постављамо transition: backgroundсвојство .tabкласи.
  2. По дефаулту pознака унутар .tabима max-widthза 0и своју overflowимовину сет у hidden. То је зато што текст желимо да приказујемо само када .tabје активна.
  3. Ми користимо класе су прилагођене боје ( .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-containerкада је максимална ширина оквира за приказ, 450pxа такође смањујемо и облоге како би изгледало мање.

ЈаваСцрипт

На крају, у ЈС морамо бити сигурни да када корисник кликне други класа се додаје на њега и уклоњен из претходног активан :.tab.active.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) и да прерачунате ширину да бисте попунили целу ширина екрана.

У примеру Цодепен, мењамо и боју позадине тела када се кликне на другу картицу. Ово је само у визуелне сврхе и није баш повезано са темом кодирања ове недеље. Али ако желите да видите како сам то урадио, погледајте ЈС код у оловци (само 2 додатна реда кода).

Још примера за овај изазов за кодирање

У претходном чланку сам показао како да направим одговарајући мени за навигацију. Можете и то да проверите ако желите да направите тако нешто.

Такође ако нисте, обавезно прочитајте „правила“ Недељног кодирања ако желите да учествујете у изазову! А зашто не би? То је одличан начин да побољшате своје вештине кодирања! ?

Срећно кодирање! ?

Првобитно објављено на ввв.флорин-поп.цом.