Exercice CSS : un menu en "rollover façon "Dock Mac"

Voila, après le teasing, voici l’exercice en entier, même si je sais que certains d’entre vous on déjà commencé à creuser le problème.

Aujourd’hui, nous avons deux exercices au lieu d’un seul.

Pourquoi deux ? Pour pouvoir gérer des différences de niveau de maitrise des outils, nous aurons donc une version « simple » de l’exercice accessible même aux débutants et une version plus complexe pour que les « cadors » puissent se creuser les neurones.

C’est parti !

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é.

Le support en video :

Les sources (pour rappel) :

  • 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

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

Voici ce qui m’a donné envie de tester ce genre de rendu (bien joué julien A ;) ) : attention le cargement de cette page risque de « geler votre navigateur pendant de longues secondes.
http://archive.dojotoolkit.org/nightly/tests/widget/test_FisheyeList.html

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

Le support en video :

Les sources (pour rappel) :

  • 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

Attention !!

Ces deux exercices, quel que soit leur niveau, demandent quand même de prendre un peu de recul par rapport à vos méthodes de travail. Leur but principal est de vous faire penser « rendu » dans sa globalité, une page web est un ensemble de choses, pour arriver à un rendu, il faut parfois prendre les choses sous un angle différent de ce à quoi vous êtes habitués.

Dernier point : le questionnement sur les images utilisées est important.

Bon courage à vous.

PS : j’oubliais, voici le code html utilisé :

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

PPS : pour information, les deux constructions on été testées avec succès sur : IE5.5, IE6, IE7, Opera 9, FF 1.5 et FF 2.

Le corrigé :

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

Cordialement,
Aymeric Jacquet

Tags : , , , ,