Comment créer un composant de navigation de barre d'onglets simple

Le thème de la semaine # 3 de mon Weekly Coding Challenge est la navigation ! Alors apprenons un peu plus à ce sujet.

La navigation

Un composant de navigation est crucial sur un site Web, car vous voulez que vos utilisateurs puissent naviguer facilement dans vos pages. Vous pouvez trouver un composant de navigation même sur les sites Web d'une seule page qui vous permettra de passer à une certaine section de la page. Donc, en tant que développeur, il est très utile de savoir comment construire ce type de composant.

Dans cet article, j'ai décidé de créer une barre d'onglets de navigation, mais vous pouvez créer n'importe quel type de navigation que vous souhaitez.

J'ai été inspiré par ce design réalisé par Aurelien Salomon. Voici à quoi ressemblera le résultat final de ce que nous allons construire:

Le HTML

La structure HTML va être simple. Nous aurons un .tab-nav-containeret quatre à l' .tabintérieur:

House

Likes

Search

Profile

Comme vous pouvez le voir, chacun .taba une icône (de FontAwesome), le texte correspondant et quelques classes supplémentaires qui seront utilisées pour donner à chaque onglet des propriétés background-coloret des colorpropriétés spécifiques . Aussi la .activeclasse, qui sera utilisée pour styliser l'onglet actif. Assez basique, non? ?

Le CSS

Tout d'abord, stylisons le .tab-nav-container:

Remarque : nous avons une fixedlargeur sur le conteneur car nous ne voulons pas qu'il change sa taille lorsque nous changeons l'actif .tabcar chaque onglet peut avoir un texte de taille plus longue ou plus courte (par exemple, Accueil (4 lettres) vs Profil (6 des lettres)).

Nous utilisons flexboxpour répartir le .tabs uniformément à l'intérieur du conteneur. A part cela, je pense que le CSS est assez explicite.

Ensuite… le .tabstyle de:

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

Peu de choses à noter ici:

  1. Afin d'avoir une transition douce lorsque nous changeons l' .activeonglet, nous définissons une transition: backgroundpropriété pour la .tabclasse.
  2. Par défaut, la pbalise à l'intérieur de .taba un max-widthof 0et sa overflowpropriété définie sur hidden. En effet, nous ne voulons afficher le texte que lorsque le .tabest actif.
  3. Nous utilisons les classes de couleurs personnalisées ( .purple, .pinkavoir différentes couleurs dans les onglets, etc.).

Assurons-nous également qu'il a l'air bien sur mobile:

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

Comme vous pouvez le voir, nous réduisons la .tab-nav-containerlargeur maximale de la fenêtre 450pxet nous réduisons également le remplissage pour le rendre plus petit.

Le JavaScript

À la fin, dans JS, nous devons nous assurer que lorsque l'utilisateur clique sur un autre, .tabla .activeclasse y est ajoutée et supprimée de l'actif précédent .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'); }); });

Conclusion

Ce type de navigation dans la barre d'onglets est principalement utilisé sur les appareils mobiles, donc si vous souhaitez le réutiliser pour une application mobile, assurez-vous de positionner le conteneur au bas de l'écran (avec position: fixed) et de recalculer la largeur pour remplir l'ensemble. largeur de l'écran.

Dans l'exemple Codepen, nous changeons également la couleur d'arrière-plan du corps lorsqu'un autre onglet est cliqué. C'est juste à des fins visuelles et ce n'est pas exactement lié au thème de codage de cette semaine. Mais si vous voulez voir comment j'ai fait cela, consultez le code JS dans le stylo (juste 2 lignes de code supplémentaires).

Plus d'exemples pour ce défi de codage

Dans un article précédent, j'ai montré comment créer un menu de navigation réactif. Vous pouvez également le vérifier si vous souhaitez créer quelque chose comme ça.

Si vous ne l'avez pas fait, assurez-vous de lire les «règles» du défi de codage hebdomadaire si vous souhaitez participer au défi! Et pourquoi pas vous? C'est un excellent moyen d'améliorer vos compétences en codage! ?

Bon codage! ?

Publié à l'origine sur www.florin-pop.com.