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

Be Sociable, Share!

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

  • Ben alors… on sèche ?

    Le 18 mars 2007 à 18 h 17 min

  • clb56

    Ben moi ma voiture elle a cassé alors j’ai la tête un peu ailleurs :-(

    Le 19 mars 2007 à 19 h 08 min

  • Tsss tsss elle est minable ton excuse.

    Plaisanteries mises à part, j’espère que ce n’était pas dans un accident trop grave.

    Le 19 mars 2007 à 20 h 24 min

  • Florent V.

    Pour ma part je sèche pas, je vois pas trop comment le prendre. Le simple, ok, je devrais réussir à faire ça sans problème.

    Outre l’intérêt très discutable (et on en a déjà discuté) de faire ça en « full CSS », y compris à titre d’exercice, je suis pas super motivé par ce genre d’effet qui personnellement m’ennuie profondément (du coup, je suis pas un bon client pour les Flasheurs… les rares choses que j’ai vu en Flash et qui étaient intéressantes à mes yeux étaient des créations interactives d’art moderne sur écran, faudrait que je retrouve ça tiens…).

    Bref, je serai sans doute vaguement curieux de voir la solution imaginée pour le deuxième cas de figure, mais pas assez curieux pour me lancer moi-même sur l’une ou l’autre des pistes qui me viennent comme ça, de tête.

    Ce week-end je dois finir avancer du boulot pour mon asso, boulot laissé en plan depuis quelques semaines… programme chargé, donc.

    Bon week-end tout de même. ;)

    Le 23 mars 2007 à 23 h 58 min

  • Florent V.

    Pardon, une petite correction de ma digression ci-dessus : je parlais bien évidemment d’art contemporain, pas d’art moderne.

    Un béotien je suis.

    Le 24 mars 2007 à 0 h 00 min

  • Je comprends bien les problématiques de boulots à finir, surtout en ce moment.

    D’autant plus que le deuxième exercice demande quand même pas mal de boulot, alors je t’explique pas le corrigé.

    Le 24 mars 2007 à 15 h 02 min