Une petite
astuce CSS pour réaliser un menu graphique utilisant les onglets
(comme on peut en voir sur Amazon.fr ou Fnac.com, par exemple), qui se dégrade
en une simple liste de liens HTML dans le cas où le navigateur ne disposerait
pas d'un support suffisant de CSS.
La base de notre code devra donc fonctionner autour du HTML suivant (Sommaire
correspond à la page en cours):
<ul>
<li>Sommaire</li>
<li><a href="/developpeur/apropos/">A propos...</a></li>
<li><a href="/developpeur/infos/">Informations</a></li>
<li><a href="/developpeur/projets/">Projets</a></li>
<li><a href="/developpeur/liens/">Liens</a></li>
</ul>
Nous allons commencer en redéfinissant l'affichage de base de notre
liste, via une classe onglets pour notre balise
<ul> (qui devient donc <ul
class="onglets">):
.onglets
{
list-style-type: none;
border-bottom: 2px solid black;
padding-bottom: 24px;
margin: 0;
}
Cette classe nous permet, pour commencer, de retirer les "points"
que nous trouverions normalement devant chaque élément de notre
liste. Nous créons ensuite une ligne de points noirs, de 2 pixels de hauteur,
que nous plaçons à 24 pixels du haut de la fenêtre, avec
une marge nulle.
Le résultat n'est pas encore très convaincant: seuls les pointillés
indiquent une séparation entre la liste et le reste de la page.
Définissons de nouveaux éléments, qui cette fois influeront
sur la balise <li>:
li
{
float: right;
margin: 2px 2px 0 2px;
border: 1px solid black;
background-color: lightblue;
}
C'est ici que nous modifions la position des éléments de notre
liste, à l'aide de float: right, qui les
place en ligne sur la droite de la fenêtre (dans l'ordre inverse de celui
défini dans la liste, ce qui est facilement arrangé en modifiant
cet ordre... ou en définissant un float: left).
margin, border
et background-color nous servent ensuite à
définir un carré bleu clair avec une bordure noire de deux pixels
autour de chaque élément.
Nous continuons de mettre en place visuellement nos boutons:
.actif
{
border-bottom: 1px solid white;
background-color: white;
padding: 4px;
}
a
{
display: block;
color: white;
text-decoration: none;
padding: 4px;
}
Il y a deux types d'onglets dans notre menu: celui de la page en cours, qui
n'a pas de lien, et les autres, qui en ont un. Pour les différencier,
nous allons donc appliquer certaines règles CSS à la balise de
liaison <a>, et nous allons créer
une classe nous permettant de travailler sur notre onglet "actif":
.actif. Notre sommaire devra pour cela être codé ainsi: <li
class="actif">Sommaire</li>.
Notre classe .actif nous permet donc de définir
le contenu de la balise comme ayant une bordure inférieure et un fond
tous les deux blancs, ce qui nous permet de simuler l'onglet comme étant
ouvert sur la page.
Sur la balise <a>, nous appliquons les
règles nous permettant d'afficher nos liens sans soulignement, avec un
texte de couleur blanche, un espacement de 4 pixels de chaque coté, et
le tout dans un bloc
Enfin, une dernière règle pour le rollover sur les liens,
où l'on inverse les couleurs des onglets:
a:hover
{
background: white;
color: lightblue;
}
Notre fichier final (avec nos sources, donc) est
visible ici.
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|