Sådan oprettes en simpel navigationskomponent på fanebladet

Det tema for uge # 3 af min ugentlige Coding Challenge er navigation ! Så lad os lære lidt mere om det.

Navigation

En navigeringskomponent er afgørende på et websted, fordi du vil have, at dine brugere nemt kan navigere gennem dine sider. Du kan finde en navigeringskomponent selv på websteder med en enkelt side, der giver dig mulighed for at springe til et bestemt afsnit på siden. Så som udvikler er det meget nyttigt at vide, hvordan man bygger denne type komponent.

I denne artikel besluttede jeg at oprette en navigationspanel på fanebladet, men du kan oprette enhver form for navigation, du ønsker.

Jeg blev inspireret af dette design lavet af Aurelien Salomon. Her er, hvordan det endelige resultat af, hvad vi skal bygge, vil se ud:

HTML

HTML-strukturen bliver enkel. Vi har a .tab-nav-containerog fire .tabs inden i det:

House

Likes

Search

Profile

Som du kan se, har hver .tabet ikon (fra FontAwesome), den tilsvarende tekst og nogle ekstra klasser, der vil blive brugt til at give hver fane specifikke background-colorog coloregenskaber. Også .activeklassen, som vil blive brugt til at style den aktive fane. Temmelig grundlæggende, ikke? ?

CSS

Lad os først style .tab-nav-container:

Bemærk : Vi har en fixedbredde på containeren, da vi ikke vil have den til at ændre dens størrelse, når vi ændrer den aktive, .tabda hver fane muligvis har en tekst, der enten er længere eller kortere i størrelse (f.eks. Hjem (4 bogstaver) versus profil (6 bogstaver)).

Vi bruger flexboxtil at fordele .tabs jævnt inde i containeren. Bortset fra det tror jeg, at CSS er ret selvforklarende.

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

Få ting at bemærke her:

  1. For at få en jævn overgang, når vi ændrer .activefanen, indstiller vi en transition: backgroundegenskab til .tabklassen.
  2. Som standard har ptagget inde i .tabet max-widthaf 0og dets overflowegenskab indstillet til hidden. Dette skyldes, at vi kun vil vise teksten, når den .taber aktiv.
  3. Vi bruger den brugerdefinerede farve klasser ( .purple, .pinkosv) for at have forskellige farver i fanerne.

Lad os sørge for, at det også ser godt ud på mobil:

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

Som du kan se, krymper vi, .tab-nav-containernår visningsportens maksimale bredde er, 450pxog vi reducerer også polstringen for at få den til at se mindre ud.

JavaScript

I slutningen, i JS vi nødt til at sørge for, at når brugeren klikker andet .tabden .activetilføjes klasse til det og fjernet fra den tidligere aktiv .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'); }); });

Konklusion

Denne form for fanebladnavigation bruges mest på mobile enheder, så hvis du vil genbruge den til en mobilapp, skal du sørge for at placere beholderen til bunden af ​​skærmen (med position: fixed), og du genberegner bredden for at udfylde hele skærmens bredde.

I Codepen-eksemplet ændrer vi også kroppens baggrundsfarve, når der klikkes på en anden fane. Dette er kun til visuelle formål, og det er ikke ligefrem relateret til denne uges kodningstema. Men hvis du vil se, hvordan jeg gjorde det, skal du tjekke JS-koden i pennen (kun 2 ekstra linier kode).

Flere eksempler på denne kodningsudfordring

I en tidligere artikel demonstrerede jeg, hvordan man opretter en lydhør navigationsmenu. Du kan også tjekke det ud, hvis du vil bygge noget lignende.

Også hvis du ikke har det, skal du sørge for at læse "reglerne" for Weekly Coding Challenge, hvis du vil deltage i Challenge! Og hvorfor ville du ikke? Det er en fantastisk måde at forbedre dine kodningsfærdigheder på! ?

God kodning! ?

Oprindeligt offentliggjort på www.florin-pop.com.