Refaire un menu style Apple en CSS

17 mar | Catégorie: HTML-CSS | Rédigé par François | 9182 lectures

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.

demo source

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 <ul>. Par ailleurs nous spécifions 2 balises <li> 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 <li> 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.

Cette création par Snoupix.com est mise à disposition selon les termes de la licence Creative Commons.

Partager ce tutoriel :

11 Commentaires

le 20 mars à 23h28 yassin Répondre NiCe .. But is NoT LiKE Sit AppLE ... xD :p

le 22 mars à 13h29 webmasteraide Répondre Moi j'adore en plus sans image c'est le top merci beaucoup je l'ai ajouté sur mon site !

Merki Snoupix

le 23 mars à 17h09 Galdon Répondre La barre ressemble bien à l'original en tout cas.

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

le 25 mars à 09h54 Marissa Répondre 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....

le 25 mars à 14h29 Francois Répondre 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...

le 25 mars à 14h47 nikoneko Répondre c'est vraiment bien fait bravo
seulement je n'arrive pas a aligner le menu, les balise <div> ne fonctionne pas

vous auriez une solution pour mon probleme?

le 25 mars à 14h49 nikoneko Répondre euh pardon, j'ai oublier de me relire, je voulai dire centrer le menu sur la page ^^
merci

le 25 mars à 15h34 Francois Répondre 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!

le 15 mai à 15h10 Chess Répondre Pas mal, petit soucis d'affichage avec IE 8, toutefois.

le 16 mai à 01h59 Stephane Répondre Oui malheureusement IE8 est encore loin d'être parfait et gère mal la pseudo-classe :after.

Vivement IE9!

le 10 juin à 11h14 demonshado Répondre 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

.

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.

Refaire un menu style Apple en CSS | Snoupix