Tuto CSS: Recréer le menu du site d’Apple

Posté par jbj le 21 juil 2008 dans Design • 20 commentaires

Le menu du site d’Apple est un exemple en terme de code propre et sémantique allié à un design impeccable. Avec ce tuto, je vous propose de recréer la barre de navigation du site d’Apple et d’étudier les techniques utilisées.

Avant de commencer

Si vous n’avez encore jamais vu le menu du site apple.com, voici une petite capture d’écran de ce que nous allons recréer:

Pour commencer, nous allons créer deux fichiers: le premier fichier, vide, se nommera style.css. Le second sera notre page html: nommez là menu.html et collez-y le code suivant:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Apple's menubar</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

</body>
</html>

La dernière chose dont nous avons besoin est l’image du menu provenant du site d’Apple. Sauvegardez-là dans le même répertoire que les deux fichiers que nous venons de créer.

Création du html

Allons maintenant sur apple.com et affichons le code source. La partie qui nous intéresse est la suivante:

<!--googleoff: all-->
<div id="globalheader">
<ul id="globalnav">
	<li id="gn-apple"><a href="/">Apple</a></li>
	<li id="gn-store"><a href="http://store.apple.com">Store</a></li>
	<li id="gn-mac"><a href="/mac/">Mac</a></li>
	<li id="gn-ipoditunes"><a href="/itunes/">iPod + iTunes</a></li>
	<li id="gn-iphone"><a href="/iphone/">iPhone</a></li>
	<li id="gn-downloads"><a href="/downloads/">Downloads</a></li>
	<li id="gn-support"><a href="/support/">Support</a></li>
</ul>
</div><!--/globalheader-->
<!--googleon: all-->

Comme vous pouvez le voir, ce menu n’est qu’une simple liste html. Collez le code ci-dessus dans la section body de votre fichier menu.html et sauvegardez.
Si vous affichez maintenant menu.html dans votre navigateur, vous vous apercevrez que nous avons encore du boulot

Juste quelques mots à propos des méconnus <!–googleoff: all–> et <!–googleon: all–>: Ces balises “custom” – qui ne sont que des commentaires html – permettent de dire au googlebot qu’il ne doit pas indexer certaines parties du document (<!–googleoff: all–>) et qu’il peut reprendre son indexation normale (<!–googleon: all–>). Cette technique permet, par exemple, de ne pas voir apparaitre les menus de navigation d’un site suite à une recherche google.

CSS à son meilleur

Comme vous vous en doutez certainement, la feuille de style de ce menu est assez conséquente par rapport à ce que nous voyons d’habitude. Heureusement, celle-ci est très bien organisée et commentée, ce qui est assez rare pour mériter d’être souligné.
Collez le code suivant dans votre fichier style.css.

/* GLOBALHEADER */
#globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-rep
eat: no-repeat; }

/* BUTTONS */
#globalheader #globalnav li#gn-store a { background-position: 0 0; }
#globalheader #globalnav li#gn-store a { background-position: -117px 0; }
#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }
#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }
#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }
#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }
#globalheader #globalnav li#gn-support a { background-position: -702px 0; }

/* OVER STATES */
#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }
#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }
#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }

* PRESSED STATES */
#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }
#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }
#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }
#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }
#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }

/* ON STATES */
#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }
#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }
#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }
#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }
#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }

Une fois que vous aurez sauvegardé votre fichier style.css, affichez menu.html dans votre navigateur: Votre menu est prêt

Expérimentez

Même si recréer le menu d’Apple est amusant, le plus intéressant selon moi est d’apprendre à partir des techniques utilisées, à savoir une seule image pour tout le menu et une mise en place css impeccable.
Je n’ai pratiquement jamais vu de menus similaires à celui-ci sur d’autres sites, alors si vous êtes à la recherche d’un menu beau et propre, je ne saurais vous conseiller d’expérimenter

Si vous avez aimé cet article, aidez-moi à le promouvoir en votant pour lui sur les sites suivants: Ces icones representent les sites de bookmarking social dans lesquels vos lecteurs peuvent partager et faire découvrir vos pages.

Tags: apple, css, menu, navigation

20 commentaires

» Flux RSS des commentaires

Fabino le 21 juillet 2008 à 10:21:
…trop fort ! Merci pour cet excellent tuto. Et ça faisait un bout de temps que je n’étais pas allé sur le site à la pomme. Effectivement si on se contente de faire un copier-coller le menu semble très simple, mais c’est mieux quand on comprend ce que l’on fait.
Valentin le 21 juillet 2008 à 10:55:
Yep ! bon tuto !
Bonne journée
jbj le 21 juillet 2008 à 11:53:
Merci à vous deux pour vos compliments, ça fait plaisir Ravi que ce tuto vous ai plu!
Anonyme le 21 juillet 2008 à 11:54:
Tuto CSS: Recrer le menu du site dApple…

Le menu du site dApple est un exemple en terme de code propre et smantique alli un design impeccable. Avec ce tuto, je vous propose de recrer la barre de navigation du site dApple et dtudier les techniques utilises…
Olivier le 21 juillet 2008 à 12:08:
Effectivement c’est très intéressant, en particulier l’utilisation d’une seule image avec tous les items et tous les états. Cette technique appelée “CSS SPRITES” est détaillée là :
http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/
Par contre, je ne comprends pas l’utilisation des balises . En terme de référencement, pourquoi supprimer de l’indexation les liens du site ?
Olivier le 21 juillet 2008 à 12:09:
Mince, la fin de mon message a été tronquée. Je parlais des balises googleoff et googleon.
jbj le 21 juillet 2008 à 13:38:
Effectivement il faudrais que je me renseigne un peu plus sur ce sujet, ce que je sais ce que l’emploi de ces balises permet d’éviter que certaines portions de texte apparaissent dans les résultats de recherche de google.
Après, si ça empêche le moteurde suivre les liens en questions, c’est clair que c’est pas un bon deal!
annak le 21 juillet 2008 à 17:19:
Je ne connaissais pas “googleoff” : intéressant
Aurore le 22 juillet 2008 à 21:39:
De même, je ne absolument pas “googleoff”,merci
Maigret le 23 juillet 2008 à 11:17:
Très bon tuto qui devrait en intéresser plus d’un… et moi le premier par exemple !
Je le met de côté sans plus tarder !
jbj le 23 juillet 2008 à 23:05:
Content de voir que vous y avez trouvé votre compte avec cet article
Valdun le 24 juillet 2008 à 1:29:
Et dire que si les propriétés background-position-x et background-position-y faisaient partie d’une norme CSS tout ce code répétitif pourrait être allégé
Cela diviserait le code par deux…

/* GLOBALHEADER */
#globalheader { width: 982px; height: 38px; margin: 18px auto; }
#globalnav { margin: 0; padding: 0; }
#globalnav li { display: inline; }
#globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }

/* BUTTONS */
#gn-apple a { background-position-x: 0; }
#gn-store a { background-position-x: -117px; }
#gn-mac a { background-position-x: -234px; }
#gn-ipoditunes a { background-position-x: -351px; }
#gn-iphone a { background-position-x: -468px; }
#gn-downloads a { background-position-x: -585px; }
#gn-support a { background-position-x: -702px; }

/* OVER STATES */ #globalnav a:hover { background-position-y: -38px; }
/* PRESSED STATES */ #globalnav a:active { background-position-y: -76px; }
/* ON STATES */
.home #gn-apple a:hover { cursor: default; }
.store #gn-store a, .mac #gn-mac a, .ipoditunes #gn-ipoditunes a, .iphone #gn-iphone a, .downloads #gn-downloads a, .support #gn-support a { background-position-y: -114px; }
Valdun le 24 juillet 2008 à 1:31:
[à tester sous IE... un des rares avantages que je lui attribue ^^]

(tiens, tout ce qui est placé entre les signes sup et inf est supprimé :))
Valdun le 24 juillet 2008 à 3:19:
En remaniant un peu tout ça il est en fait parfaitement possible d’alléger tout ce blabla en utilisant d’autres propriétés respectées par tous les navigateurs !
L’idée est de se servir du positionnement absolu pour gérer chaque bouton, à défaut de pouvoir le faire sans répétitions avec le positionnement du fond.

Première étape: remaniement du code html qui s’en trouve au passage allégé

Apple
Store
Mac
iPod + iTunes
iPhone
Downloads
Support

Deuxième étape : positionnement de chacun des liens
/* GLOBALHEADER */
#globalnav { position: absolute; width: 982px; height: 38px; padding: 0; overflow: hidden; }
#globalnav a { position: absolute; top: 0; width: 117px; padding-top: 152px; background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }

/* BUTTONS */
#gn-apple { background-position: 0 0; }
#gn-store { background-position: -117px 0; left: 117px; }
#gn-mac { background-position: -234px 0; left: 234px; }
#gn-ipoditunes { background-position: -351px 0; left: 351px; }
#gn-iphone { background-position: -468px 0; left: 468px; }
#gn-downloads { background-position: -585px 0; left: 585px; }
#gn-support { background-position: -702px 0; left: 702px; }

/* OVER STATES */ #globalnav a:hover { top: -38px; margin-bottom: 1px; }
/* -> Le margin-bottom corrige un bug avec IE7 qui n’actualise pas la position */
/* PRESSED STATES */ #globalnav a:active { top: -76px; }
/* ON STATES */
.home #gn-apple a:hover { cursor: default; }
.store #gn-store a, .mac #gn-mac a, .ipoditunes #gn-ipoditunes a, .iphone #gn-iphone a, .downloads #gn-downloads a, .support #gn-support a { top: -114px; }

A défaut d’être plus clair qu’un code utilisant les propriétés background-position-x/y, ça l’est davantage que celui présenté plus haut…
Bidouilleurs CSS, mes salutations
Valdun le 24 juillet 2008 à 3:29:
Mwai bin décidément je ne peux même pas profiter de ta balise pre customisée pour afficher joliment le code.
Heureusement d’ailleurs, car ça pourrait faire mal si d’autres balises passaient

Pas très intuitif tout ça, à quand une ptite barre avec les smileys et les balises à notre disposition ?

Oh, n’attends pas mon accord si tu veux virer tous mes messages “à part” et accessoirement à mixer les deux qui se baladent, ça ne fait vraiment pas propre ^^
A bientôt dans un article
jbj le 24 juillet 2008 à 7:34:
Salut Valdun, en effet par défaut Wordpress vire tout semblant de code html, par sécurité semble-t’il. C’est assez gênant dans le cadre d’un blog comme le mien, il faudrait que je parte à la recherche d’un plugin qui empêcherait ce comportement..
Sinon, un grand merci pour tes remarques tes pertinentes, en effet on pourrais alléger le code à certains endroits! Ce code provient intégralement du site Apple, je ne l’ai pas retouché à part pour l’url de l’image de fond.
Greg-J le 26 juillet 2008 à 18:49:
Très sympa ce tuto pour comprendre le positionnement des images en CSS
BlackKrystal le 1 août 2008 à 1:57:
Waou… Ca tombe bien j’ai un site a refaire =)
LuciferX le 4 août 2008 à 9:33:
Intéressant ce tutoriel, le rendu est assez sympa !

Est-ce qu’il s’agit de la technique des portes coulissantes ?
jbj le 18 août 2008 à 19:39:
Au mec qui à laissé un commentaire le 18/08/2008: Je l’ai effacé par mégarde (merci les spams!).
Pour modifier les libellés, tu dois éditer l’image, il ne suffit pas de modifier le code html.