Les onglets CSS sont vraiment parfaits pour afficher des informations connexes dans un seul endroit facile à naviguer. Ils ressemblent essentiellement à des séparateurs à onglets que vous verriez dans une boîte de recettes ou un classeur. Exemples de sites Web qui utilisent les onglets de navigation :
Lorsque vous regardez ces deux sites, réfléchissez aux avantages de l`utilisation d`un tel composant de l`interface utilisateur sur les sites. Quels problèmes doivent être résolus ? Quel type d`informations les onglets de navigation seraient-ils un bon travail de développement ?
Lorsque vous avez besoin d`accéder à une arborescence de l`interface utilisateur qui organise le texte ou les informations en composants significatifs et les affiche à l`écran sans prenant trop de place, les onglets de navigation sont un choix judicieux. Nous parlerons des onglets de navigation plus en profondeur lorsque nous commencerons à utiliser JavaScript, jQuery et / ou Bootstrap, mais il existe également un travail formel que nous pourrions utiliser et qui ne nécessite que du HTML et du CSS purs. Jetons un coup d`œil à la configuration :
Configurez votre code HTML :
Allez-y et configurez votre code HTML standard avec un conteneur à l`intérieur du corps qui servira de conteneur principal pour le projet . Vous pouvez le nommer comme bon vous semble dans l`attribut class, mais je le nommerai class = "tabs"
. Jusqu`à présent, votre code HTML devrait ressembler à ceci : < ! DOCTYPE html>