|
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.
|
[