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
Jeu de briques
Snake
Pacman
Bubble