Correction d’exercice : un menu en rollover façon "dock" Mac

Pour rappel, l’exercice ce trouve à cette adresse : Exercice CSS : un menu en « rollover façon « Dock Mac »

Comme il y a deux exercices pour le prix d’un seul, et le corrigé risque d’être un peu long, on va donc cliquer sur « lire la suite… »

Pour rappel, voici le code source html qui sera utilisé pour les deux exercices :

<body>
	<ul>
		<li id="un"><a href="#">1</a></li>
		<li id="deux"><a href="#">2</a></li>
		<li id="trois"><a href="#">3</a></li>
		<li id="quatre"><a href="#">4</a></li>
		<li id="cinq"><a href="#">5</a></li>
		<li id="six"><a href="#">5</a></li>
	</ul>
</body>

Les sources utiles :

  • Balises HTML : http://www.laurent-bernat.com/
  • Balises (X)HTML : http://www.siteduzero.com/
  • Propriétés CSS : http://www.siteduzero.com/
  • Positionnement des éléments via CSS : http://css.alsacreations.com/
  • Quelques exemples de menus : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Premier exercice : Un menu avec rollover d’images et effets de transition.

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS.
  • Niveau de difficulté : Facile
  • Difficulté détectée : Créer l’effet de zoom « fluide » au passage de la souris sur un lien (voir vidéo ci-dessous).
  • Pré requis techniques : connaitre les balises html, bases de CSS, bases de travail d’images numériques et formats d’images pour le web.
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : C’est un exercice simple, comme mentionné ci-dessus, il faut juste réfléchir sur l’effet de « loupe » au passage de la souris sur un lien, concrètement, regardez bien la vidéo, il y a vraiment une petite subtilité.

Correction :

Il n’y a pas de grande difficulté pour cette exercice, vous avez presque toutes les réponses nécessaires en analysant bien les quelques exemples de menus fournis par le site Alsacréations.

Les grandes différences sont :

  • L’agrandissement de la surface active du lien au passage de la souris
  • l’effet de transition appliqué à l’image

Nous ne toucherons plus à la structure html, l’ensemble de l’exercice va se dérouler au niveau de la gestion de la feuille de style CSS et des images utilisée.

Le fichier CSS

Nous allons utiliser la technique du fond changeant en fonction du changement d’état du lien, passage du lien par défaut au lien (a) au passage de la souris (a:hover) et pour simplifier, à l’usage du clavier (a:focus).

Préparons la base de notre fichier CSS :

* {margin:0; padding:0;}
body {margin-top: 20%}
ul {width:350px; margin: 0 auto;}
li {display:inline;}

li a {
	display:block; 
	float:left; 
	width:50px; 
	height:100px; 
	}

Le sélecteur universel * est là pour remettre à zéro les valeurs de marge extérieure (margin:0) et marge extérieure (padding:0) qui peuvent être différentes d’un navigateur à l’autre. Au passage, en commençant toutes vos feuilles de style par ce petit bout de code, vous réglez 90 % de vos problèmes de rendu sur les différents navigateurs.

Les valeurs appliquées au body et au ul ne sont ici qu’à titre d’exemple et ne servent que pour la présentation de l’exercice, ce qui nous intéresse viens ensuite.

li {display:inline;} permet de changer la nature du conteneur li du type en bloc à type en ligne, pour résumer, cela vas permettre de présenter les éléments de la liste sur une ligne et non plus les uns « sous » les autres, pour plus d’informations vous pouvez aller voir cet article d’Alsacréations : La structure des balises : bloc et en-ligne.

li a {"valeurs"} c’est ici que nous construisons la forme de nos boutons, nous modifions la nature de la balise a pour la transformer en type « en bloc » (display:block), nous lui donnons un positionnement flottant à gauche (float:left;) de façon à ce qu’ils se positionnent les un a côté des autres, nous leur donnons une forme (width:50px; height:100px). Voila, nos boutons sont prêts.

Le 100px de hauteur des boutons n’est pas choisi au hasard, il correspond à la hauteur des boutons en mode actif, nous passerons donc de boutons de 50 pixels de large et 100 pixels de haut à des boutons de 100 pixels de large sur 100 pixels de haut.

c’est aussi pour ça que nous avons donné une largeur de 350 pixels à la liste (ul) car cela corresponds à 5 boutons de largeur 50 pixels et un de largeur 100 pixels. Ca vous évitéra des surprises de mise en page en prévoyant dés le début la taille maximale prise par votre menu.

Passons à la décoration.

Nous allons en premier lieu préparer nos images.

Les boutons en version off :

Une simple image de 300 pixels de large et 100 pixels de haut dans laquelle vous allez créer vos boutons que vous placerez tous les 50 pixels.

Essayez avec des images simples pour l’exercice, rien de vous empêche par la suite de le refaire avec d’autres types de boutons, à vous d’adapter.

Voici l’image utilisée :

Nous avons utilisé un format gif pour une meilleure concordance de couleurs sous les différents navigateurs vu que nous devons utiliser des fichiers gifs pour les boutons en mode ON.

On les insère ensuite dans le document en ajoutant ces lignes à notre feuille de style :

#un a {background:transparent url(menu-rollover-jscript.gif) no-repeat  left top; }
#deux a {background:transparent url(menu-rollover-jscript.gif) no-repeat -50px top; }
#trois a {background:transparent url(menu-rollover-jscript.gif) no-repeat -100px top; }
#quatre a {background:transparent url(menu-rollover-jscript.gif) no-repeat -150px top; }
#cinq a {background:transparent url(menu-rollover-jscript.gif) no-repeat -200px top; }
#six a {background:transparent url(menu-rollover-jscript.gif) no-repeat -250px top; }

menu-rollover-jscript.gif est le nom de mon image, bien sur, utilisez le nom de l’image que vous avez créé.

Cela ne fonctionnera que si vous avez utilisé le code html fourni, ou chaque élément de liste (li) a son id propre (un, deux, trois, etc.).

On a utilisé la technique du positionnement de fond (left top, -50px top, etc) de façon à ce que chaque bouton ait bien le fond qui lui convient, une seule image pour les 6 boutons.

Les boutons version ON

En temps normal, pour un simple changement de fond, nous aurions utilisé la même image que celle du fond par défaut, en y incluant, plus bas, les versions ON des boutons, mais comme nous voulons obtenir un effet de transition, nous allons utiliser une image par bouton, un bon vieux gif animé.

Voici comment nous allons faire (l’exemple ci-dessous est réalisé avec Photoshop/imageready, si vous utilisez un autre logiciel pour vos gif animés, adaptez en fonction des spécificités de votre logiciel).

Créez une image de 100 pixels par 100 pixels avec un fond transparent.
Créez un équivalent du bouton de base bien centré dans votre image (par exemple outil elipse avec la touche shift enfoncée pour l’homothétie).

Ajoutez le texte correspondant (1, 2, etc.)

Fusionnez le texte avec votre bouton (calques photoshop)
Dupliquez le calque.
Réduisez le calque inférieur à 75% de la taille du calque supérieur, recentrez le si besoin.
appliquez à ce calque un flou gaussien (filtres/atténuation/flou gaussien), normalement le réglage par défaut devrait suffire.
Basculez sous imageready (bouton en bas à droite de votre barre d’outils flottante).

Une fois dans Imagerady (ou votre logiciel d’animations), créez deux « images » d’animation, la première avec l’objet flouté et la deuxième avec l’objet « normal ».
Pas de temps de transition et pas de répétition d’animation.
Enregistrez la copie optimisée sous et vous voila avec votre premier bouton ON.

Répétez l’opération pour les cinq autres boutons. Il y a bien sur une méthode plus rapide pour créer les cinq boutons, mais pour l’instant nous allons rester sur cette méthode « simple ».

Il ne vous reste plus qu’a appliquer ces fonds via votre feuille de style avec le code suivant à ajouter à la suite :

#un a:hover, #un a:focus {width:100px; height:100px; background:transparent url(1.gif) no-repeat left top; }
#deux a:hover, #deux a:focus { width:100px; height:100px; background:transparent url(2.gif) no-repeat left top; }
#trois a:hover, #trois a:focus {width:100px; height:100px; background:transparent url(3.gif) no-repeat left top; }
#quatre a:hover, #quatre a:focus {width:100px; height:100px; background:transparent url(4.gif) no-repeat left top; }
#cinq a:hover, #cinq a:focus {width:100px; height:100px; background:transparent url(5.gif) no-repeat left top; }
#six a:hover, #six a:focus {width:100px; height:100px; background:transparent url(6.gif) no-repeat left top; }

Nous appliquons le changement de taille et de fond lors des changements d’état :hover et :focus, pour que l’effet soit accessible soit à la souris, soit au clavier.

Encore une fois j’ai utilisé mes noms de fichiers, pensez à utiliser vos propres noms de fichiers.

Ah oui, dernier point, votre texte s’affiche toujours à l’écran, pour éviter cela vous pouvez utiliser text-indent:-5000px; a ajouter a votre partie de feuille de style li a {…}. Ou pour faire plaisir à Florent V. jouer avec la taille de police, les couleurs des images et les couleurs de fond des balises a de façon à ce que le texte apparaisse si les images sont désactivées.

Et voici le résultat :

http://www.ajcrea.com/exercices/rolloverjscript/

Attention : cette méthode a un défaut, comme les images « ON » ont une animation qui ne s’effectue qu’une fois, on ne peut les précharger sans que l’animation ne s’active, donc au premier affichage dans le menu, vous aurez une latence d’affichage, le temps que le navigateur charge le fichier. C’est bien pour ça que j’ai continué à creuser pour en arriver au deuxième exercice.

Fin de la correction pour ce matin, le travail m’appelle, je publierai la correction du deuxième exercice cet après midi.

Nous revoila avec la correction du deuxième exercice :

Deuxième exercice : Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac ».

Rappel des directives :

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS en se rapprochant le plus possible d’un rendu fluide de script Javascript.
  • Niveau de difficulté : Difficile
  • Difficulté détectée : Gérer les différents changements de fond image au passage de la souris.
  • Pré requis techniques : connaitre les balises html et leurs comportements, connaissance approfondie des comportements CSS, bases de travail d’images numériques et formats d’images pour le web.
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : Il faut être lucide, vous n’arriverez jamais ou presque à obtenir des rendus aussi fluides que le rendu javascript, mais vous pouvez essayer de vous en rapprocher, au prix de petits trucs et astuces, tant au niveau code que des images. Regardez bien la vidéo, tout y est ou presque.

Nous partons toujours du fichier html fourni en début de correction et encore une fois tout va se jouer au niveau du CSS et des images.

Un peu de réflexion

Quand j’ai commencé à réfléchir à ce type de menu, j’ai d’abord essayé avec la méthode du premier exercice, mais elle ne m’a pas totalement convaincue.

J’ai donc creusé dans mes connaissances des comportements CSS pour voir comment je pouvais contourner les difficultés détectées :

  • Il me fallait un changement multiple d’images pour simuler les augmentations proportionnelles des boutons (du plus grand au plus petit).
  • Une compatibilité avec un maximum de navigateurs, donc pas de trucs et astuces ne fonctionnant pas sur Internet Explorer.
  • Que « l’animation » soit fluide, donc pas d’animations longues à charger au survol de la souris.
  • Pas de javascript
  • Que soit globalement « accessible »

Je vous livre dés maintenant la solution :
[
Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac »|http://www.ajcrea.com/exercices/rolloverjscript/test2.html|fr].

L’image utilisée :

La feuille de style CSS :

body {margin-top: 20%}

* {margin:0; padding:0;}
ul {
position:relative; 
width:350px; 
height:100px; 
margin: 0 auto; 
background:transparent url(global.png) no-repeat  left top; }
li {display:inline;}

li a {
	display:block; 
	width:50px; 
	height:100px; 
	text-indent:-5000px;
	}
#un a {position:absolute; top:0; left:0px; z-index:200; }
#deux a {position:absolute; top:0; left:50px; z-index:200; }
#trois a {position:absolute; top:0; left:100px; z-index:200;}
#quatre a {position:absolute; top:0; left:150px; z-index:200;}
#cinq a {position:absolute; top:0; left:200px; z-index:200;}
#six a {position:absolute; top:0; left:250px; z-index:200;}

#un a:hover, #un a:focus, #deux a:hover, #deux a:focus, #trois a:hover, #trois a:focus, #quatre a:hover, #quatre a:focus, #cinq a:hover, #cinq a:focus, #six a:hover, #six a:focus  {
position:absolute; top:0; left:0px; 
width:350px; height:100px; 
z-index:100
}

#un a:hover, #un a:focus {
background:transparent url(global.png) no-repeat left -100px;
}
#deux a:hover, #deux a:focus {
background:transparent url(global.png) no-repeat left -200px;
}
#trois a:hover, #trois a:focus {
background:transparent url(global.png) no-repeat left -300px;
}
#quatre a:hover, #quatre a:focus {
background:transparent url(global.png) no-repeat left -400px;
}
#cinq a:hover, #cinq a:focus {
background:transparent url(global.png) no-repeat left -500px;
}
#six a:hover, #six a:focus {
background:transparent url(global.png) no-repeat left -600px;
}

Ce qui nous donne la page suivante :

http://www.ajcrea.com/exercices/rolloverjscript/test2.html

Explications :

Je ne vais pas revenir sur les points déjà vus dans le premier exercice, juste expliquer les différents points importants.

La liste non ordonnée :

utilisation du positionnement relatif (position:relative) pour une seule raison, permettre aux éléments enfants en positionnement absolu (position:absolute) de se fixer sur son layout et non pas sur la page.

Le fond de base est appliqué a cet élément, et non pas aux éléments liens (a).

les boutons version OFF (les éléments a) :

Ils sont positionnés en absolu pour ne pas bouger quand nous allons modifier les comportement des a:hover et a:focus.
On leur donne une forme (width:50px, height:100px) et un z-index de 200, l’intérêt du z-index va venir par la suite.

les boutons version ON (:hover, :focus) :

On profite du changement d’état pour donner une nouvelle taille au bouton (width:350px; height:100px;) soit la taille exacte du menu, on les positionne en absolu en haut à gauche pour qu’ils commencent graphiquement au début du menu.

On leur donne un z-index de 100 pour qu’ils se positionnent au dessous des zones réactives des liens (qui elles, sont en z-index:200 soit « au dessus »), de fait, le fond recouvre bien l’ensemble des boutons, mais les zones réactives de chaque lien restent accessibles au survol et clic de souris (et au clavier).

Attention : bien que personnellement je trouve l’effet efficace, il faut faire attention au poids de l’image utilisée en fond qui peut finir par être assez lourde si vous faites un menu vraiment graphique.

Pour finir

Le premier exercice n’était pas bien compliqué, il s’agit juste d’une variante des menus que vous trouvez dans la galerie d’Alsacréations fournie dans les sources.

Le deuxième demandait presque plus de travail au niveau de l’image que des CSS, mais quand même je suis assez content du résultat.

Comme toujours, si vous avez des questions ou des remarques, n’hésitez pas.

Cordialement,
Aymeric Jacquet

Tags : , , , ,