La navigation sur les pages Web est une forme de liste et la navigation par onglets est semblable à une liste horizontale. Il est assez facile de créer une navigation par onglets horizontale avec CSS, mais CSS 3 nous donne quelques outils supplémentaires pour les rendre encore plus jolies.
Ce tutoriel vous guidera à travers le HTML et le CSS nécessaires pour créer un menu à onglets CSS. Cliquez sur ce lien pour voir à quoi il ressemblera.
Ce menu à onglets utilisepas d'images, seulement HTML et CSS 2 et CSS 3. Il peut être facilement modifié pour ajouter plus d’onglets ou modifier le texte qu’ils contiennent.
Prise en charge du navigateur
Cet onglet fonctionnera danstous les principaux navigateurs. Internet Explorer ne montrera pas les coins arrondis, mais sinon, il affichera des onglets comme Firefox, Safari, Opera et Chrome.
Rédigez votre liste de menu
Tous les menus et les onglets de navigation ne sont en réalité qu'une liste non ordonnée. Donc, la première chose à faire est d’écrire une liste non ordonnée de liens vers l’endroit où vous voulez que votre navigation par onglets se dirige.
Ce tutoriel suppose que vous écrivez votre code HTML dans un éditeur de texte et que vous savez où placer le code HTML pour votre menu sur votre page Web.
Écrivez votre liste non ordonnée comme ceci:
class = "tablist">CSS 3id = "current"> OngletsPourLes menus
class = "tablist"etid = "courant".Le premier est Champs obligatoires. Si vous ne mettez pas letablisteclasse sur votre liste non ordonnée, les onglets ne fonctionneront pas. La seconde est optionnelle. Mettre leid = "actuel"sur l'onglet que vous souhaitez mettre en surbrillance sur cette page. Nous l'utilisons généralement pour mettre en évidence la page sur laquelle nous sommes, mais vous pouvez l'utiliser pour mettre en évidence l'onglet le plus important. Ou vous pouvez l'enlever complètement.
Commencez à éditer votre feuille de style
Vous pouvez utiliser une feuille de style externe ou une feuille de style interne. La page de menu exemple utilise une feuille de style interne dans
du document.D'abord, nous allons coiffer l'UL
C'est ici que nous utilisons la classetabliste .en HTML Plutôt que d’appeler la balise UL, qui coifferait toutes les listes non ordonnées de votre page, vous ne devriez styler que la classe UL.tabliste Donc, la première entrée dans votre CSS devrait être:
.tablist {}
Nous aimons mettre les accolades finales (}) à l'avance, pour ne pas les oublier plus tard.
Bien que nous utilisions une balise de liste non ordonnée pour la liste du menu à onglets, nous ne voulons toutefois pas que des puces ou des nombres s’insinuent. Le premier style que vous devez ajouter est donc.style de liste: aucun; Cela indique au navigateur que, s'il s'agit d'une liste, il s'agit d'une liste sans styles prédéterminés (comme des puces ou des chiffres).
Ensuite, vous pouvez définir la hauteur de votre liste pour qu'elle corresponde à l'espace que vous souhaitez qu'elle remplisse. Nous avons choisi 2em pour notre hauteur, car il s'agit du double de la taille de la police standard et en donne environ la moitié au-dessus et au-dessous du texte de l'onglet. Un séjour sans faillehauteur: 2em; Mais vous pouvez définir la largeur que vous souhaitez. Les balises UL occuperont automatiquement 100% de la largeur. Par conséquent, vous pouvez laisser la largeur, à moins que vous ne souhaitiez qu'il soit plus petit que le conteneur actuel.
Enfin, si votre feuille de style maître ne contient pas de paramètres prédéfinis pour les balises UL et OL, vous voudrez les insérer. Cela signifie que vous devez désactiver les bordures, les marges et le remplissage de votre UL. rembourrage: 0; marge: 0; bordure: aucune; Si vous avez déjà réinitialisé la balise UL, vous pouvez modifier les marges, le remplissage ou la bordure en un élément qui correspond à votre conception.
Votre dernière classe .tablist devrait ressembler à ceci:
.tablist {list-style: none; hauteur: 2em; rembourrage: 0; marge: 0; bordure: aucune; }
Modification des éléments de la liste LI
Une fois que vous avez stylé votre liste non ordonnée, vous devez styler les balises LI à l'intérieur. Sinon, ils agissent comme une liste standard et passent à la ligne suivante sans placer correctement vos onglets.
Commencez par configurer votre propriété de style:
.tablist li {}
Ensuite, vous voulez faire flotter vos onglets pour qu'ils s'alignent sur le plan horizontal. float: gauche;
Et n'oubliez pas d'ajouter une marge entre les onglets, afin qu'ils ne se confondent pas. marge droite: 0,13 m;
Vos styles de li devraient ressembler à ceci:
.tablist li {float: left; marge droite: 0,13 m; }
Faire ressembler les onglets Onglets avec CSS 3
Pour faire le gros du travail dans cette feuille de style, nous ciblons les liens dans la liste non ordonnée. Les navigateurs reconnaissent que les liens d'une page Web sont plus efficaces que les autres balises. Il est donc plus facile pour les anciens navigateurs de se conformer à des règles telles que les états de survol si vous les attachez à la balise d'ancrage (liens). Commencez donc par écrire vos propriétés de style:
.tablist li a {} .tablist li a: survol {}
Étant donné que ces onglets doivent agir comme des onglets dans une application, vous souhaitez que toute la zone de l'onglet soit cliquable, et pas uniquement le texte lié. Pour ce faire, vous devez convertir la balise A de son état "inline" normal en un élément de bloc. bloc de visualisation; (Si vous souhaitez en savoir plus sur la différence, lisez Niveau des blocs par rapport aux éléments en ligne.)
Ensuite, un moyen simple de forcer vos onglets à être symétriques les uns par rapport aux autres, tout en restant flexibles pour s’adapter à la largeur du texte, consiste à appliquer le même remplissage à la gauche et à la droite. Nous avons utilisé la propriété padding shorthand pour définir le haut et le bas sur 0 et les côtés droit et gauche sur 1em. rembourrage: 0 1em;
Nous avons également choisi de supprimer le soulignement des liens afin que les onglets ressemblent moins à des liens.Mais si cela risque de perturber votre public, laissez cette ligne de côté. lien-décoration: aucun;
En plaçant une fine bordure autour des onglets, cela les fait ressembler à des onglets. Nous avons utilisé la propriété abrégée de la frontière pour placer la frontière autour des quatre côtés. bordure: solide 0,06em # 000; Et puis utilisé la propriété border-bottom pour l'enlever du bas. bordure inférieure: 0;
Nous avons ensuite ajusté la police, la couleur et la couleur d’arrière-plan des onglets. Définissez-les sur les styles qui correspondent à votre site. police: gras 0.88em / 2em arial, genève, helvetica, sans-serif; couleur: # 000; couleur de fond: #ccc;
Tous les styles ci-dessus doivent aller dans le sélecteur.tablist li a, la règle pour qu'ils affectent les balises d'ancrage en général. Ensuite, pour que les onglets apparaissent plus cliquables, vous devez ajouter quelques règles d'état..tablist li a: survol.
Nous aimons changer la couleur du texte et de l’arrière-plan pour que l’onglet apparaisse au passage de la souris. arrière-plan: # 3cf; couleur: #fff;
Et nous avons ajouté un autre rappel aux navigateurs: nous souhaitons que le lien ne soit pas souligné. texte-décoration: aucun; Une autre méthode courante consiste à réactiver le soulignement lorsque vous passez la souris sur l’onglet. Si vous voulez faire ça, changez le en texte-décoration: souligné;
Mais où est le CSS 3?
Si vous y avez prêté attention, vous avez probablement remarqué qu'il n'y a pas eu de styles CSS 3 utilisés dans la feuille de style. Cela présente l’avantage de fonctionner dans n’importe quel navigateur moderne, y compris Internet Explorer. Mais cela ne fait pas que les onglets ressemblent plus à des cases carrées. En ajoutant un appel de style CSS 3, border-radius (et les appels associés spécifiques au navigateur), vous pouvez arrondir les bords pour qu'ils ressemblent davantage à des onglets d'un dossier Manila.
Les styles que vous devez ajouter à la .tablist li a règle sont: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; rayon en haut à gauche: 0.50em;
Voici les dernières règles de style que nous avons écrites:
.tablist li a {display: block; rembourrage: 0 1em; texte-décoration: aucun; bordure: solide 0,06em # 000; bordure inférieure: 0; police: gras 0.88em / 2em arial, genève, helvetica, sans-serif; couleur: # 000; couleur de fond: #ccc; / * Éléments CSS 3 * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; rayon en haut à gauche: 0.50em; } .tablist li a: hover {background: # 3cf; couleur: #fff; texte-décoration: aucun; }
Avec ces styles, vous disposez d'un menu à onglets qui fonctionne dans tous les principaux navigateurs et ressemble à de jolis onglets imprimés dans des navigateurs compatibles CSS 3. La page suivante vous donne une autre option que vous pouvez utiliser pour l'habiller encore plus.
Mettez en surbrillance l'onglet actuel
Dans le code HTML que nous avons créé, le UL avait un élément de liste avec un ID. Cela vous permet de donner à un LI un style différent du reste. La situation la plus courante consiste à faire ressortir l’onglet actuel d’une manière ou d’une autre. Une autre façon de penser à cela est de griser les onglets inactifs. Vous modifiez ensuite l'emplacement de l'ID sur les différentes pages.
Nous appelons à la fois les balises #current A et #current A: hover sta afin que les deux soient légèrement différentes. Vous pouvez modifier la couleur, la couleur d'arrière-plan, même la hauteur, la largeur et le remplissage de cet élément. Apportez toutes les modifications nécessaires à votre conception.
.tablist li # current a {background-color: # 777; couleur: #fff; } .tablist li # actuel a: survol {background: # 39C; }
Et tu as fini! Vous venez de créer un menu à onglets pour votre site Web.
