Ako zostaviť jednoduchý komponent navigácie na paneli kariet

Téma na týždeň # 3 môjho Weekly číselného Challenge je navigácia ! Poďme sa teda o tom dozvedieť niečo viac.

Navigácia

Navigačný komponent je na webových stránkach zásadný, pretože chcete, aby vaši používatelia mohli ľahko prechádzať vaše stránky. Navigačný komponent nájdete dokonca aj na webových stránkach s jednou stránkou, ktoré vám umožnia prejsť na určitú časť stránky. Ako vývojár je teda veľmi užitočné vedieť, ako zostaviť tento druh komponentu.

V tomto článku som sa rozhodol vytvoriť navigáciu na lište tab, ale môžete vytvoriť ľubovoľnú navigáciu, ktorú chcete.

Inšpiroval ma tento dizajn od Aurelien Salomon. Tu bude vyzerať konečný výsledok toho, čo postavíme:

HTML

Štruktúra HTML bude jednoduchá. Budeme mať a .tab-nav-containera štyri .tabs v ňom:

House

Likes

Search

Profile

Ako vidíte, každý z nich .tabmá ikonu (z aplikácie FontAwesome), zodpovedajúci text a niekoľko ďalších tried, ktoré sa použijú na to, aby každá karta mala svoje špecifické vlastnosti background-colora colorvlastnosti. Tiež .activetrieda, ktorá sa použije na úpravu štýlu aktívnej karty. Celkom základné, však? ?

CSS

Po prvé, poďme štýl .tab-nav-container:

Poznámka : fixedNa kontajneri máme šírku, pretože nechceme, aby zmenil svoju veľkosť, keď zmeníme aktívny formát, .tabpretože každá karta môže mať text, ktorý je buď väčší, alebo kratší (napr. Domov (4 písmená) vs Profil (6) písmená)).

Používame flexboxna .tabrovnomerné rozloženie s vo vnútri nádoby. Okrem toho si myslím, že CSS je dosť samozrejmý.

Ďalej ... .tabstyling:

.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); }

Tu je treba poznamenať niekoľko vecí:

  1. Aby sme pri zmene .activekarty mali plynulý prechod , nastavujeme transition: backgroundvlastnosť .tabtriedy.
  2. Predvolene je pznačka vo vnútri .tabhas max-widthof 0a jeho overflowvlastnosť nastavená na hidden. Je to preto, že chceme text zobraziť iba vtedy, keď .tabje aktívny.
  3. Používame vlastnú farbu triedy ( .purple, .pink, atď) majú odlišné farby v kartách.

Uistite sa, že to vyzerá dobre aj na mobilných zariadeniach:

@media (max-width: 450px) { .tab-nav-container { padding: 20px; width: 350px; } .tab { padding: 0 10px; margin: 0; } .tab i { font-size: 1em; } }

Ako vidíte, zmenšujeme .tab-nav-containermaximálnu šírku výrezu 450pxa zmenšujeme tiež polstrovanie, aby vyzeralo menšie.

JavaScript

Na konci, v JS musíme sa uistiť, že keď používateľ klikne na iný trieda sa k nemu pridal a odstránil z predtým aktívne :.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'); }); });

Záver

Tento druh navigácie na paneli kariet sa väčšinou používa v mobilných zariadeniach, takže ak ho chcete znova použiť pre mobilnú aplikáciu, nezabudnite umiestniť kontajner do dolnej časti obrazovky (s position: fixed) a prepočítať šírku tak, aby vyplnila celú šírka obrazovky.

V príklade Codepen tiež meníme farbu pozadia tela po kliknutí na inú kartu. Je to len na vizuálne účely a nesúvisí to s témou kódovania tohto týždňa. Ale ak chcete vidieť, ako som to urobil, pozrite sa na kód JS v pere (iba 2 ďalšie riadky kódu).

Ďalšie príklady tejto kódovacej výzvy

V predchádzajúcom článku som predviedol, ako zostaviť responzívne navigačné menu. Môžete sa tiež pozrieť na to, ak chcete niečo také postaviť.

Ak ste tak ešte neurobili, nezabudnite si prečítať „pravidlá“ týždennej kódovacej výzvy, ak sa chcete zúčastniť tejto výzvy! A prečo by si nie? Je to skvelý spôsob, ako si vylepšiť svoje kódovacie schopnosti! ?

Šťastné programovanie! ?

Pôvodne publikované na www.florin-pop.com.