menu_apple

Refaire un menu style Apple en CSS

Nombreux sont les tutos qui apprennent à réaliser ce fameux menu emblématique d’Apple. Cependant beaucoup d’entre eux sont créés à l’aide d’images. Dans un soucis de légereté nous réaliserons ce menu complètement en CSS et dans ces moindre détails en jouant nottamment avec l’ombre avec la pseudo-classe :after.

 

 

 

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…

menu chez apple.com

  • 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:

Structure du menu HTML APPLE

    <!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):

    degradés apple menu css

    #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:

    after hover css apple

    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.

14 commentaires

S'abonner au RSS des commentaires
  1. Kévin
    Posté le 18/06/2011 à 12h13

    Il y a moyen d’économiser l’image de fond, en ajoutant un arrière plan dégradé en reprenant les code que tu as mis. En mettant pour Firefox : background:-moz-linear-gradient(top, #dedede 0%, #959595 100%); [Dans #menu li]

    Et background:-moz-linear-gradient(top, #a1a1a1 0%, #6a6a6a 80%, #767676 100%); [Dans #menu li: hover]

    Vous aurez donc l’effet dégradé avec un effet lors du survol de la souris. Je vous laisse essayer, ça évite de fabriquer ou de piquer des images supplémentaires.

  2. geoC
    Posté le 26/02/2011 à 21h18

    avez vous une solution pour que le menu fonctionne sur IE ?

  3. geoC
    Posté le 25/02/2011 à 20h01

    salut ! tout d’abord je souhaite vous remecier pour ce tuto , mais je n’arrive pas a centrer le menu , pouvez-vous m’aider ? merci

  4. demonshado
    Posté le 10/06/2010 à 11h14

    Ca n’est pas que 70ko c’est lourd, je ne suis pas d’accords avec toi et voilà pourquoi.

    Si apple a choisis justement d’utiliser une seul image pour générer tout les états de boutons de son menu c’est bien pour être compatible toute version de navigateur.

    d’une, générer tout les états de rollover dans une seul image permet de ne charger qu’une seul fois une image ce qui ne provoque pas le désagrément d’un vide au passage de la souris lorsque l’on utilise deux images voir 3 pour générer des états différents de boutons.

    de deux le slidingdoors permet une meilleur portabilité sur les navigateurs.

    Mais effectivement il est sur que si la très grande majorité des personnes utilisaient des navigateurs modernes on pourrait enfin de se faire plaisir qu’avec du css3 et générer carrément tout un bouton et effet de dégradé qu’en css, ombre, opacité et j’en passe. Ca serait TERRIBLE big_smile.

    Vivement que ie6 meurt !!! déjà ca sera un très grand pas pour le web lol. Personnellement je commence de plus en plus à ne plus faire de site compatible sous ie6 en explicant au client qu’il est temps de se mettre à jour sur les navigateurs : opéra, firefox ou googlechrome. En faisant un blocus comme ca ce n’est plus moi qui doit m’adapter au client pour ie6 mais l’inverse et petit à petit je convertis le reste de personne qui tourne sous ie6 à des browser plus récent.

  5. Stephane
    Posté le 16/05/2009 à 1h59

    Oui malheureusement IE8 est encore loin d’être parfait et gère mal la pseudo-classe :after.

    Vivement IE9!

  6. Chess
    Posté le 15/05/2009 à 15h10

    Pas mal, petit soucis d’affichage avec IE 8, toutefois.

  7. Francois
    Posté le 25/03/2009 à 15h34

    Ah oui je ne m’en étais pas préocupé pour le tuto , mais ca n’a pas l’air évident de le centrer, en attendant tu peux donner une taille fixe à ton menu (genre 1000px) et avec un margin:auto, en attendant que je creuse un peu le truc histoire de pas avoir à mettre de taille fixe…
    A bientôt!

  8. nikoneko
    Posté le 25/03/2009 à 14h49

    euh pardon, j’ai oublier de me relire, je voulai dire centrer le menu sur la page ^^
    merci

  9. nikoneko
    Posté le 25/03/2009 à 14h47

    c’est vraiment bien fait bravo
    seulement je n’arrive pas a aligner le menu, les balise <div> ne fonctionne pas hmm

    vous auriez une solution pour mon probleme?

  10. Francois
    Posté le 25/03/2009 à 14h29

    Oui c’est ce que je disais en fin de tuto… Il faudrait une feuille de style spéciale pour IE (encore et encore) car il ne connait pas la propriété after, sauf pour IE 8 (mais même pour cette version il le positionne mal).

    Sinon cette propriété fonctionne sur tous les autres navigateurs, ca serait dommage de s’en priver…

  11. Marissa
    Posté le 25/03/2009 à 9h54

    Alors je trouve que c’est un très bon tuto, cependant il ne fonctionne pas sur IE … Dommage !
    C’est peut être la propriété css :after qui à ses limites pour l’instant….

  12. Galdon
    Posté le 23/03/2009 à 17h09

    La barre ressemble bien à l’original en tout cas.

    Je ne connaissais pas la propriété after pour faire des ombres.

  13. webmasteraide
    Posté le 22/03/2009 à 13h29

    Moi j’adore en plus sans image c’est le top merci beaucoup je l’ai ajouté sur mon site !

    Merki Snoupix

  14. yassin
    Posté le 20/03/2009 à 23h28

    NiCe .. But is NoT LiKE Sit AppLE … xD :p

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>