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.
11 réponses à “Correction d’exercice : un menu en rollover façon "dock" Mac”
Intéressant tout ça. Pas mal « bidouille », mais sympa comme exercice. Par contre, je n’ai pas bien compris comment la zone réactive des liens non survolés pouvait être au premier plan et leurs images de fond au troisième plan. C’est documenté quelque part cette histoire ? Faut que je révise les specs à propos de
z-index?En fait si l’on prend dans l’ordre des « tranches » on a :
Le ul et son fond qui restent en fait tout le temps visibles.
Ensuite, on a les « a » qui eux n’ont pas de fond, une largeur de 50 px et une hauteur de 100px et un z-index qui leur permet de toujours rester au premier plan.
au passage en :hover, le bloc concerné prend la taille complète du menu mais comme il a un z-index de 100, il se place sous les « a », du coups, les zones réactives restent accessibles à la souris et peuvent donc déclancher leur changement d’état au passage de la souris ou au clavier.
Dans les faits prenons le « a:hover » comme une entité quasi indépendante du « a », si on vulgarise on peut dire que l’on a un bloc qui apparait sous un autre grace aux niveaux de z-index.
Pour la docs, franchement, je n’en sais rien, j’ai juste fait des essais.
Tu vois qu’il était pas si mal cet exercice finalement. ;)
Chapeau l’artiste !
Je m’y suis cassé les dents de mon côté.
Ah ok, pas vu que les fonds du dessous étaient sur les
ulet pas sur lesa.Quant à la qualité de l’exercice, le résultat est sympathique et ça fait un bon « casse-tête CSS », mais pour un site en production je reste persuadé qu’une solution (élégante) en Javascript serait plus appropriée.
Même si les prouesses en « full CSS » sont intellectuellement intéressantes, je m’interroge sur l’impact des exemples de telles prouesses. En mettant en ligne des exemples à première vue bluffants et le code qui va avec, est-ce qu’on n’encourage pas les débutants à faire un usage immodéré et surtout irréfléchi de ces techniques ? Quand je vois un site comme CSSPlay, par exemple, j’avoue être assez dubitatif.
CSS est la technologie web que je maitrise le mieux (à vrai dire, c’est sans doute la seule que je maitrise, même si je me débrouille en HTML). Ça ne m’empêche pas de regretter l’attitude de certains, qui y voient un couteau suisse de l’édition web. Le « on peut tout faire avec les CSS » tient du fantasme, et nous écarte d’un usage pragmatique et raisonné des technologies à disposition.
à florent
> « Même si les prouesses en « full CSS » sont intellectuellement intéressantes, je m’interroge sur l’impact des exemples de telles prouesses. En mettant en ligne des exemples à première vue bluffants et le code qui va avec, est-ce qu’on n’encourage pas les débutants à faire un usage immodéré et surtout irréfléchi de ces techniques ? »
Avec la dernière énergie je m’élève contre cela !!!
1. C’est le propre du débutant que d’être irréfléchi et ça vaut mieux d’ailleurs que d’être une coquille vide (1er avis de professionnel)
2. La réflexion ne peut se mettre en oeuvre que dans le temps et engage la responsabilité de celui qui n’est pas débutant à contextualiser « au fur et à mesure » ce dont il est question (2ème avis de professionnel).
3. Ce que propose Aymeric n’est pas un cahier des charges mais un exercice et doit donc être compris comme un élément d’un processus d’apprentissage et non une préconisation. Tout au plus pourrais tu dire que le cadre dans lequel tout cela est proposé n’est pas assez établi (apprentissage, expérimentations, tests, travaux pratiques hors contexte) mais bon je m’en fiche un peu je dois dire car les choses me paraissent suffisamment claires comme ça. Et en plus c’est ludique, ce qui du point de vue du débutant n’est pas rien (motivation, adhésion et toussa).
4. De plus et par dessus tout, la mise en oeuvre des css est avant tout une pratique très pragmatique qui s’appuit sur un donné (le code html). Une telle pratique demande une véritable aisance dans le maniement et une capacité d’adaptation aux conditions pré données (toujours le même code html). A cet égard ce que propose Aymeric est exemplaire puisque le code html natif est parfaitement préservé. J’ai plusieur fois eu l’occasion de faire remarquer dans des forum que les problèmes rencontrés venait du niveau insuffisant des gens concernant le rapport ccs/html et le maniement des css en tant que telles. Donc avoir des exercices pour « monter le niveau » ben c’est très bien.
20cent : si ça peut te rassurer, le deuxième exercice m’a demandé pas mal de tests et de réflexion pour arriver au résultat désiré.
Florent V : pas simple de te répondre sans rentrer en mode « troll » sachant que clb56 a déjà pas mal débroussaillé la chose.
La chose principal ou je te rejoins pas, c’est quand tu parle de « site en production ». Ce type de rendu est certes, un exercice de style, mais peut aussi être vu d’un côté de veille technique.
Notre métier est constitué de contraintes aussi diverses que multiples, si un jour un client vient me voir en me disant, je veux un menu « comme ça » alors que son site est hébergé sur une plateforme d’autorisant pas l’ajout de scripts javascript mais permettant juste d’intervenir sur le code HTML et les CSS (et il y en a croyez moi), j’ai alors le choix entre lui dire, non ce n’est pas possible, ou, pas de problèmes.
D’un point de vue commercial, tu comprendras que la deuxième solution est meilleure, tout en finalement proposant une solution assez « propre ». Cet exercice s’éloigne t-il tant que ça de ce pour quoi les CSS ont été pensés? Sincèrement je ne pense pas.
clb56 : je suis bien d’accord avec toi pour le manque de cadre global de ces exercices.
J’avais initialement prévu de les construire sous forme de livrets d’auto formation : sources, exercices d’application intermédiaires, validation sous forme d’exercice d’application reprenant l’ensemble des points vus dans l’exercice.
Le tout appliqués à un projet global d’intégration html d’une maquette graphique.
Je ne désespère pas de refaire l’ensemble sous cette forme.
à Aymeric >
C’est pas pas bien du tout de me conforter dans mes péchés mignons :-))
bon question : c’est quoi la finalité des css ???
Pourquoi <p><b>Un texte</b></p> c’est problématique ?
Alors que html :
<p class= »en_gras »>Un texte</p>
p.en_gras {font-weight:bold;}
c’est mieux ?
Je veux dire quand on n’est pas en train d’évangéliser (un jour il faudra qu’on m’explique ce terme insupportable !!!!! … Excusez l’euphémisme…) un débutant qui débarque complêtement, ça veut dire quoi finalement ???
Dans petite tête à moi il n’y a pas de problème et je sais très bien à quoi servent les css, quelle est est leur finalité et donc partant quel est leur concept.
C’est, alors qu’il est question d’une présentation pour un media quelconque, de ne pas contrarier l’intégrité originelle de l’organisation du contenu dont il est question…
… Parce que si ce n’est pas ça alors les css c’est rien et <b></b> c’est beaucoup mieux.
<b></b> je ne sais pas, mais <strong></strong> surement. ;)
Non,
font-weight:bold; est bien l’équivalent css du html de présentation <b>
Pour strong c’est bien autre chose. Concernant le rendu une simple question des valeurs par défaut des User Agent, pour les navigateurs habituels (firefox, IE, Opera sous windows) c’est une mise en gras, mais pour lynx, de mémoire, c’est une mise en italique.
Donc la question deviendrait :
En quoi est il préférable pour mettre en gras un texte sans préjuger de son importance dans le cadre du document de faire :
<p class= »en_gras »>Un texte</p>
Avec css :
p.en_gras {font-weight:bold;}
Que de faire
<p><strong>Un texte</strong></p>
?
Je voulais voir le fond de ton raisonnement.
Nous sommes bien d’accord que s’il ne s’agit que d’effet de mise en page et non pas d’indication de modification « d’importance » du texte il convient mieux d’utiliser de préférence le style CSS.
Ne serait-ce déjà que pour des questions de maintenance.
On pouvez aussi faire la même chose avec des gifs au survol du lien non ? Avec un bouton Off en jpg ou autre et le bouton On en gif qui reprend la même forme que le bouton Off mais avec un « zoom »…
On obtient à peu près le même résultat