Barre de menu Apple et plus

Réaliser la barre de menu du site d'Apple et aller un peu plus loin dans la qualité du design, voici comment cela peut se faire, en pur CSS, sans aucun code JavaScript.

Ce script fonctionne avec Firefox, IE, Chrome, Safari, Opera. Le rendu le meilleur s'obtient avec Firefox et Opera grâce au CSS 3, mais il reste entièrement fonctionnel avec les autres navigateurs.

Contrairement au code d'Apple qui définit manuellement les coordonnées de chaque élément du menu, c'est un code générique, ainsi on peut faire varier facilement le nombre d'éléments.

Elément graphiques

Trois jeux de couleurs sont fournis: gris, bleu et vert. Vous pouvez réaliser votre propre ensemble d'images.

Pour réaliser les images de fond de la barre, avec The Gimp:

  1. Créer une nouvelle image d'1 pixel de large et 38 de haut.
  2. Choisir une couleur de tracé et la même en plus clair pour le fond.
  3. Sélectionner l'outil de remplissage dégradé. Activer le mode radial, et donner un décalage de 20.
  4. Inverser le sens du dégradé.
  5. Partir à 1/4 de la hauteur et finir plus bas que l'image à 1/4 de sa taille.
  6. Pour l'image de fond lorsque la souris est sur le bouton, utiliser les mêmes couleurs en plus sombre et refaire les mêmes étapes.

Pour obtenir des coins arrondis:

  1. Charger l'image de fond, menu-blue.gif ou menu-green.gif ou menu-gray.gif ou celle que vous avez créée.
  2. Selectionner tout et copier. Ainsi l'image fera partie des motifs.
  3. Créer une nouvelle image de 28 pixels de large et 38 de haut avec, grâce aux options avancées, un fond transparent.
  4. Faire une sélection rectangulaire à la taille de l'image avec des coins arrondis et un rayon de 5 pixels.
  5. Remplir avec pour motif le contenu du presse-papier, soit le premier motif.

    La sélection aux coins arrondis seule sera remplie.
  6. Faire une sélection rectangulaire de la moité gauche de l'image (14x38). Penser à désactiver l'option de coins arrondis.
  7. Copier et coller comme nouvelle image. Sauver sous le nom: menu-left.png.
  8. Inverser horizontalement par Image -> Transformer -> Miroir horizontal. Sauver sous le nom: menu-right.png.

A ces éléments graphiques s'ajoutent, mais c'est une option, des images pour illustrer les sujets de chaque menu. Dans notre exemple, ce sont les logos des moteurs de recherche.

Le code HTML

Il utilise le principe déja utilisé pour le menu à onglets: une liste est transformée en une simple successions d'élements par modification de la propriété display, et en insérant une balise <a> dans chaque élément de liste, on peut tirer profit des fonctions reconnues par tous les navigateurs sur cette balise...

Voici le code de base: 

<div id="menubar">
  <ul>
    <li class="firstitem"><img src="images/menu-left.png" width="14" height="38" ></li>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="http://www.bing.com">Bing</a></li>
    <li><a href="http://www.wolframalpha.com">Wolfram Alpha</a></li>
    <li><a href="https://www.alexa.com/">Alexa</a></li>
    <li class="lastitem" ><img src="images/menu-right.png" width="14" height="38" ></li>
  </ul>
</div>

Modifier le menu se fait simplement en ajoutant ou supprimant des éléments...

Le code CSS

Il redéfinit entièrement l'affichage d'une liste, à l'intérieur du calque menubar, ainsi que l'affichage d'un lien, dans le même contexte.

#menubar ul: la police et les marges.

#menubar ul li: display:inline pour faire disparaître les puces et rendre l'affichage horizontal plutôt que vertical (voir la propriété display).

#menubar ul li a: Définit l'image de fond dégradée et aligne le texte. En mode avancé on ajoute la transparence.

#menubar ul li a:hover: Quand la souris passe sur le menu, l'élément de vient plus sombre. Pour ce faire, on définit un fond plus sombre dans cette propriété.

.firstitem et .lastitem: Définit l'image pour les coté du menu, avec des coins arrondis.

Afficher des icônes

Le menu que l'on a réalisé correspond à celui du site d'Apple, avec des couleurs, et un code CSS générique plutôt que fait à la main pour chaque élément.

Mais on veut aller plus loin en ajoutant des icônes ou des images sur les menu, à coté ou au-dessous du texte.

On veut afficher ces icônes en second plan, ce qui permettra d''adapter le menu avec des images plus grandes sur lesquelles est surimposé le texte.
Pour cela:

Le code CSS d'une balise <a> est ainsi modifié:

#menubar ul li a
{
  ...
  z-index:3;
  moz-opacity:0.8;
  opacity:0.8; 
  MozOpacity: 0.8;
  KhtmlOpacity: 0.8;
  filter:alpha(opacity=80);
  padding-left:32px;
}

Des id sont ajoutés au code HTML des balises <li> pour leur assigner une unique image:

<li id="google"><a href="https://www.google.com">Google</a></li>
<li id="bing"><a href="http://www.bing.com">Bing</a></li>
<li id="wolfram"><a href="http://www.wolframalpha.com">Wolfram Alpha</a></li>
<li id="alexa"><a href="https://www.alexa.com/">Alexa</a></li>

Dans le code CSS, on ajoute une définition pour l'image de fond qui complète la définition CSS de chaque balise <li>:

#google
{
  background:url(images/menu-google.gif) 5% 40% no-repeat; 
  padding-top:16px;
  z-index:2;
}

De même pour chaque élément du menu: bing, alexa, wolfram...

Démonstration et code source

Réalisation d'une barre de menu similaire à celle du site d'Apple, amélioré avec des images et des couleurs.

© 2009-2012 Xul.fr