La technique pour réaliser un tel menu pourrait être une liste d’images en background et lors du passage de la souris on change la propriété background-position…Cependant, il y’a 2 avantages à concevoir un menu complètement en CSS.
- Tout d’abord on se retrouve avec un menu beaucoup plus léger et donc moins long à télécharger. En me basant sur le site d’Apple, j’ai découvert que leur image de menu (comportant tous les éléments hover, focus…) pesait plus de 70Ko. Ce qui est assez lourd pour un menu…
- L’autre point positif est au niveau de la mise à jour du site, on ne sera pas obligé de refaire l’image à chaque fois…
Bref, ce sont 2 façons de faire différentes, chacun a sa méthode.
Etape 1: HTML
Voici la structure du menu en xHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu Apple</title>
<link rel="stylesheet" href="design.css" type="text/css" media="screen, projection" />
</head>
<body>
<ul id="menu">
<li class="arrondigauche"></li>
<li class="prems"><a title="Store" href="">Store</a></li>
<li><a title="Mac" href="">Mac</a></li>
<li><a title="Ipod + Itunes" href="">Ipod + Itunes</a></li>
<li><a title="Iphone" href="">Iphone</a></li>
<li><a title="Download" href="">Download</a></li>
<li class="last"><a title="Support" href="">Support</a></li>
<li class="arrondidroite"></li>
</ul>
</body>
</html>
Etant donné que notre menu est ni plus ni moins qu’une liste d’éléments, nous allons le placer dans une balise
- . Par ailleurs nous spécifions 2 balises
- vides, au début et à la fin pour pouvoir réaliser nos arrondis plus tard. Enfin nous complétons les premier et dernier éléments
- qui ne sont pas vides, par la classe « prems » et « last ». En fait ces classes permettront d’enlever respectivement les bordures gauches et droites.
Etape 2: CSS
Pour notre CSS, nous avons quand même besoin d’images: 3 au total: 1 pour les dégradés (normal et hover qui seront assemblés sur une même image) et 2 pour les arrondis (gauche et droite) vous pouvez retrouver ces images dans le code source, ou bien dans la démo. Voici les couleurs à utiliser pour les dégradés (que j’ai repris d’Apple bien évidemment):
#menu{ margin:0 auto; padding:0; list-style-type:none; } #menu li{ margin:0; border-left:1px solid #888; border-right:1px solid #aaa; padding:0; width:130px; height:36px; float:left; background:url('background-menu.png') repeat-x; } #menu li:hover{ background-position:bottom; } #menu .arrondigauche,#menu .arrondidroite{ width:7px; border:none; } #menu .arrondigauche{ background:url('background-menu-gauche.png') no-repeat; } #menu .arrondidroite{ background:url('background-menu-droite.png') no-repeat; } #menu li a{ margin:0; padding:0; display:block; width:100%; height:100%; line-height:36px; color:#ccc; font-family:'Myriad Pro',tahoma; font-weight:700; text-decoration:none; font-size:13px; text-align:center; } #menu li a:after { color:#444; content:attr(title); display:block; margin-top:-37px; } #menu li a:hover{ color:#333; position:relative; top:-2px; } #menu li a:hover:after{ color:white; margin-top:-35px; } #menu .prems{ border-left:none; } #menu .last{ border-right:none; }La selecteur :after associé à la propriété content permet d’écrire du texte à la suite du lien grâce à CSS. C’est donc avec ce moyen qu’on va réaliser l’effet d’ombre en le positionnant 1px en dessous ou au dessus du lien original.
Voici l’exemple en agrandi:
Sinon rien de bien spécifique à ajouter si ce n’est que la pseudo-classe after ne marche évidemment pas sur IE. Mais bon, les utilisateurs d’Internet Explorer auront un truc moche et tant pis. Cette technique fonctionne et a été testé sur Firefox, Opéra et Safari sans soucis.
Vous avez peut être manqué ces articles :
.
