Faire un menu avec onglets en CSS avec before / after
Le 27-02-2005 par Raphael dans Construction de menus en CSS.
Le menu fonctionne sur le principe de la génération de contenu en CSS (Before / after) : donc pas de structure et de balisage inutile.
Il est fluide en largeur et en hauteur. Il accepte également parfaitement l'agrandissement et le rapetissement de la taille de police (taille en "em").
Son survol ne nécessite pas de préchargement d'image : il est instantané (principe des portes coulissantes).
Tests navigateurs :
- Windows : Testé avec succès sur Firefox 0.6, 0.8, 0.93, 1.0 RC; Opera 7.51, 7.60; Mozilla 1.6; Epiphany; Netscape 6 PR1 et 7.02; Konqueror 3.2.0 (petit décalage de la ligne sous le menu).
- Mac : Testé avec succès sur Firefox 1.0 Mac, Opera 7.54 mac, Camino 0.8 et Safari.
Note : Il ne fonctionne bien évidemment pas sous Internet Explorer (toutes versions et plateformes) qui ne reconnaît pas les pseudo-éléments standards Before et After.
Pour afficher ce menu correctement sur IE, un remaniement doit être fait, ainsi que l'utilisation d'un hack "IE7" de Dean Edwards.
Voici le code-source de la page pour découvrir le principe. Voir le résultat
<style type="text/css">
<!--
ul#menu, #menu li {
list-style-type: none;
margin:0;
padding:0;
}
ul#menu {
width: 100%;
height: 1.1em;
border-bottom: 1px solid black;
}
#menu li {
display: inline;
}
#menu a {
font: bold 0.9em verdana, arial, sans-serif;
text-decoration: none;
color: black;
margin: 0 0.5em;
padding:0;
background: white url(centre.jpg) 0 0;
}
#menu a:hover {
background: white url(centre.jpg) 0 124px;
}
#menu a:before {
width: 23px;
padding: 0 23px 0 0;
background: white url(gauche.jpg) 0 0;
content: "";
}
#menu a:after {
width: 23px;
padding: 0 23px 0 0;
background: white url(droite.jpg) 0 0;
content: "";
}
html > body #menu a:hover:before {
background: white url(gauche.jpg) 23px 0;
}
html > body #menu a:hover:after {
background: white url(droite.jpg) 23px 0;
}
-->
</style>
<h1>Menu avec onglets en CSS avec before / after</h1> <ul id="menu"> <li><a href="#">Accueil</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien plus long</a></li> </ul>
