La galerie CSS
La galerie CSS > Menus à onglets
Dernière mise à jour : 11/07/2009 - 4 sources
- Barres de navigation / Menus horizontaux
- Menus à onglets
- Menus verticaux
- Menus fantaisistes
- Modèles de mise en page
- Formulaires
- Divers
CSS Tabs
Auteur :
Joshua Kaufman
Description :
Menu horizontal avec effet d'onglets qui changent de couleur
au passage de la souris.
Compatibilité :
Remarques :
Pour un onglet normal, on le rend flottant sur la gauche. Les
éléments ne seront donc plus les uns en dessous des autres,
mais accolés les uns aux autres sur une ligne.
Pour l'onglet actif, on écrase la bordure définie dans le
ul#tabnav par une bordure blanche, mais uniquement au niveau
de l'onglet. On change aussi la couleur de fond.
On force l'empilement aussi par la gauche, mais surtout on fait
un affichage block ce qui permet de cliquer partout dans l'onglet
pour activer le lien.
Petit effet pour changer la couleur de fond en passant la souris
sur un onglet.
Liens
Prévisualisation, génération et téléchargement :
CSS Mini Tabs
Auteur :
Dan Cederholm
Description :
Menu horizontal avec effet d'onglets qui changent de couleur
au passage de la souris.
Compatibilité :
Remarques :
Le choix pour mettre en ligne les éléments repose ici sur une
combinaison d'affichage inline pour les éléments li et du float: left;
sur les liens.
Dan choisit aussi de forcer la hauteur de chaque élément
line-height: 14px; pour des questions de rendu dans les différents
navigateurs.
Ce menu n'utilise pas de JavaScript.
Liens
Prévisualisation, génération et téléchargement :
Menu à onglets style Windows
Auteur :
Auteur
Description :
Il s'agit d'un menu à onglets utilisant des div et du
JavaScript pour le passage d'un onglet à l'autre.
Compatibilité :
Remarques :
Il est possible de définir des raccourcis claviers pour passer
d'un onglet à un autre (cf.code JavaScript). Seuls les caracteres
alphanumériques sont permis (0-9 ; a-z).
Un div contient les onglets (id="onglet"). Un second div est le
contenu à afficher lors du clic sur un onglet. Il est possible
de définir un élément commun à tous les onglets.
id d'un onglet : ongletX
id d'un contenu : contenuX avec X un nombre.
id d'un contenu : contenuX avec X un nombre.
Sur l'événement onload du body, il faut définir l'onglet à afficher
lors du chargement de la page (cf. code source).
Raccourcis clavier :
- Ceux-ci sont possibles si la fonction keyUp(event) est définie sur l'événement onkeyup placé dans la balise body. Si vous ne voulez pas utiliser les raccourcis du clavier, supprimez l'événement onkeyup.
- Attention : si vous utilisez des inputs de type texte ou des textarea, il faut désactiver la fonction qui gère les raccourcis clavier sur le onfocus et la réactiver sur le onblur de ces éléments, grâce aux fonctions inputFocus() et inputBlur() (cf. code source).
Prévisualisation et téléchargement :
Menu horizontal à onglets
Auteur :
Bisûnûrs
Description :
Menu horizontal avec effet d'onglets qui changent de couleur
au passage de la souris.
Compatibilité :
Remarques :
Ce menu possède une seule image dont la position est modifiée
en fonction de l'événement déclanché (link, hover). Par un jeu
d'identifiant, l'onglet de la page sur laquelle on se trouve
se différencie des autres.
Si vous voulez obtenir un résultat optimal, couplez ce menu d'un langage serveur qui détectera la page sur laquelle vous vous trouvez et lui appliquera le bon style en fonction. De ce fait vous n'aurez pas à répéter le menu sur chacune de vos pages.
Si vous voulez obtenir un résultat optimal, couplez ce menu d'un langage serveur qui détectera la page sur laquelle vous vous trouvez et lui appliquera le bon style en fonction. De ce fait vous n'aurez pas à répéter le menu sur chacune de vos pages.
Ce menu a été conçu intégralement en div et non par l'intermédiaire
de listes pour éviter au maximum les différences d'interprétations
de celles-ci par les navigateurs, ce qui fait qu'on arrive à un
résultat optimal sur la plupart des navigateurs.
Le centrage vertical du texte dans chacun des éléments se fait
au pixel près avec la propriété CSS padding-top. A savoir qu'en
XHTML 1.0 Strict, le padding s'ajoute à la taille de l'élément
sur lequel il est mis, donc pour avoir un div de 20px de hauteur,
on lui met 18px avec la propriété height et 2px avec la propriété
padding-top.
Prévisualisation, génération et téléchargement :