Embed Size (px)
Citation preview
Alsacreations, faire un menu en CSS et XHTML
Création de sites web, cours et tutoriels CSS et XHTML
● Aller sur Alsacréations.● CV.● Liens.● Doc CSS.● Forum CSS.● Blog.● Accueil.
Galeries et Modèles
● Modèles de mise en page CSS : Des dizaines de gabarits en XHTML pour construire vos sites sans tableaux
● Galeries de menus : Des menus de toutes sortes pour vous inspirer (simples, graphiques, déroulants,...)
Dernier tutoriel
● Les Principes Fondamentaux : Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le HTML et s'auto-proclamer 'webmaster' ?
Les plus visités
● Construire un site sans tableaux● Un menu déroulant en CSS● Savoir positionner les calques et balises en CSS
Faire un menu simple en CSS (horizontal et vertical)Sémantiquement parlant, un menu n'est autre qu'une liste (balise <li>) dont les éléments sont cliquables. Nous allons créer un menu horizontal, sachant qu'un menu vertical reposera sur le même principe.
Un menu horizontal fonctionne de la même manière : il n'y a qu'à afficher les éléments de liste les uns à côtés des autres, au-lieu de les afficher les uns en-dessous des autres (voir le menu horizontal / voir le menu vertical / voir la Galerie de menus).
http://www.alsacreations.com/articles/menu/ (1 sur 3) [12/08/2004 18:09:57]
Alsacreations, faire un menu en CSS et XHTML
La technique sera d'employer l'attribut "float: left" pour rendre les balises de liste flottantes et alignées à gauche, notre menu s'affichera donc horizontalement et non verticalement.
Construction d'un menu horizontal simple
Note : /* ces textes sont des commentaires explicatifs, ils peuvent être supprimés*/
Code CSS :
body {font: 14px Verdana, Arial, sans-serif;}
ul {list-style-type: none;} /* on supprime les puces, inutiles */
li { float: left;} /* on aligne les listes sur la gauche */
.menu a { margin: 0 2px; width: 100px; /* on définit la taille du bouton de menu */ height: 20px; float: left; display: block; text-align: center; border: 1px solid gray; text-decoration: none; color: #000; background: #fff; } .menu a:hover { background: #ccc; border: 1px solid gray; }
.menu a:active { background: gray; border: 1px solid gray; color: #fff; }
Et voilà pour le CSS.
Pour finir, il suffira de place notre div de menu à l'endroit où l'on veut :
<ul class="menu"><li><a href="">Menu 1</a></li>
http://www.alsacreations.com/articles/menu/ (2 sur 3) [12/08/2004 18:09:57]
Alsacreations, faire un menu en CSS et XHTML
<li><a href="">Menu 2</a></li> <li><a href="">Menu 3</a></li> <li><a href="">Menu 4</a></li></ul>
Et c'est tout !
Raphaël GOETTERwww.alsacreations.com
http://www.alsacreations.com/articles/menu/ (3 sur 3) [12/08/2004 18:09:57]
Alsacreations, un menu déroulant en CSS et XHTML
Création de sites web, cours et tutoriels CSS et XHTML
● Aller sur Alsacréations.● CV.● Liens.● Doc CSS.● Forum CSS.● Blog.● Accueil.
Galeries et Modèles
● Modèles de mise en page CSS : Des dizaines de gabarits en XHTML pour construire vos sites sans tableaux● Galeries de menus : Des menus de toutes sortes pour vous inspirer (simples, graphiques, déroulants,...)
Dernier tutoriel
● Les Principes Fondamentaux : Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le HTML et s'auto-proclamer 'webmaster' ?
Les plus visités
● Construire un site sans tableaux● Un menu déroulant en CSS● Savoir positionner les calques et balises en CSS
Un menu déroulant en CSS et XHTML (vertical et horizontal)Nous allons voir comment créer un menu déroulant comportant plusieurs menus, contenant chacun des sous-menus. Cette version de ce tutoriel a été remise à jour en août 2004 pour y apporter des simplifications et des fonctionnalités supplémentaires.
Note : cette remise à jour a été inspirée, pour sa partie javascript, de l'excellent tutoriel de ElMoustiko... un jeune designer à suivre :-)Je vous donne également le lien vers une autre approche de Jep, très intéressante et qui vous proposera d'autres techniques pour créer un menu déroulant.
Voir les exemples du tutoriel :
● Voir le menu vertical● Voir le menu horizontal● Une variante verticale● Menu horizontal et commentaires
Pourquoi utiliser du javascript ?
http://www.alsacreations.com/articles/deroulant/ (1 sur 8) [12/08/2004 18:10:29]
Alsacreations, un menu déroulant en CSS et XHTML
Un menu déroulant peut très bien se réaliser intégralement en CSS, sans utilisation de langages de scripts, alors pourquoi allons-nous utiliser javascript dans ce didactitiel? Il y'a deux raisons à cela. La première est que la fonction première des feuilles de styles CSS est de s'occuper de la mise en page et non des aspects dynamiques de celle-ci. Ces derniers sont du domaine de Javascript (ou ECMAScript). Il s'avère que la pseudo-classe (:hover) est un peu située entre les deux : elle indique le comportement au survol mais pourrait très bien servir à des applications plus dynamiques.
La seconde raison est plus pragmatique : la pseudo-classe (:hover) qui, appliquée à bon escient, permettrait de réaliser ce genre de menus déroulants facilement et sans l'usage de javascript n'est malheureusement pas bien comprise par Internet Explorer (sur IE, cette pseudo classe n'est prise en compte que lorsqu'elle s'applique à la balise <a>).
Nous allons donc devoir utiliser une fonction javascript pour afficher / masquer nos sous-menus et nous appelerons cette fonction à l'aide des détecteurs "onmouseover" ou "onclick" selon les envies.
Nous utiliserons également les Listes de Définition (balises <dl>, <dt> et <dd>) pour structurer notre menu déroulant. La balise <dl> englobera le menu. Le <dt> sera le "titre", c'est à dire "menu1", "menu2", ... et les <dd> désigneront chaque sous-menu.
Listes de définitions et menu ?
Un menu est une liste d'éléments affichés verticalement ou horizontalement. L'utilisation de listes (balises <ul> et <li>) est donc le meilleur choix sémantique possible pour structurer un menu simple.
Les menus déroulants sont un cas un peu particulier dans la mesure où il y'a une notion de hiérarchie (menu > sous-menus). Or les listes (ul, li), ne peuvent pas exprimer structurellement et clairement cette hiérarchie (à moins de placer des balises de titres comme <Hn> au sein du menu).
Les listes de définitions peuvent être une bonne utilisation pour structurer ce genre de menu car la définition du W3C est assez large et vague pour permettre ce genre d'utilisation.
Il suggère que les listes de définitions peuvent servir d'avantage d'usages, du moment qu'il existe une relation directe entre les éléments.
Dans notre cas, chaque élément de menu (dt) sera décrit par les sous-menus (dd) qui le composent
Certains sites ont d'ailleurs développé assez loin cette structuration : exemple d'une traduction sur Pompage.net, exemple du menu Microsoft revisité .
Le CSS se contentera de définir nos menus (dt) et sous-menus (dd + liste li). Il précisera aussi que les sous-menus doivent être cachés par défaut.
Le menu déroulant vertical
Voir le résultat
Le menu déroulant vertical va nécessiter trois parties complémentaires pour fonctionner :
1. Le code (X)HTML qui va définir la structure générale (utilisation des listes de définitions par exemple)2. Le script Javascript qui va indiquer les comportements au survol des menus
http://www.alsacreations.com/articles/deroulant/ (2 sur 8) [12/08/2004 18:10:29]
Alsacreations, un menu déroulant en CSS et XHTML
3. Le code CSS qui va s'occuper de la mise en forme et des positionnements des éléments
La structure : le HTML
Comme expliqué dans l'introduction, la structure du menu sera réalisée à l'aide de listes (ul/li) et de listes de définition.
Les balises DT indiqueront les menus parents et les balises DD engloberont les sous-menus. Nous voyons qu'il y'a 4 menu prévus. Chaque menu parent possède des sous-menus, sauf le premier (il n'aura pas de sous-menus mais un lien direct vers une page). Mais tout est configurable selon vos souhaits, naturellement.
Le comportement au survol est prévu ainsi : en cliquant (onclick) sur un menu parent (dt), vous allez afficher le sous-menu indiqué dans la fonction "montre". Si aucun sous-menu n'est indiqué (cas du premier menu), alors le comportement sera simplement de fermer les sous-menus actuellement ouverts.
Code HTML :
<dl id="menu">
<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt> <dt onclick="javascript:montre('smenu2');">Menu 2</dt> <dd id="smenu2"> <ul> <li><a href="#">Sous-Menu 2.1</a></li> <li><a href="#">Sous-Menu 2.2</a></li> <li><a href="#">Sous-Menu 2.3</a></li> </ul> </dd>
<dt onclick="javascript:montre('smenu3');">Menu 3</dt> <dd id="smenu3"> <ul> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> </ul> </dd>
<dt onclick="javascript:montre('smenu4');">Menu 4</dt> <dd id="smenu4"> <ul> <li><a href="#">Sous-Menu 4.1</a></li> <li><a href="#">Sous-Menu 4.1</a></li> </ul> </dd> </dl>
Le comportement : le Javascript
Le script Javascript va s'occuper du comportement lors du clic sur les menus parents.
http://www.alsacreations.com/articles/deroulant/ (3 sur 8) [12/08/2004 18:10:29]
Alsacreations, un menu déroulant en CSS et XHTML
Lorsque la fonction est appelée à l'aide du "onclick", voici le déroulement : pour commencer, tous les sous-menus se ferment (display: none), puis, le sous-menu indiqué dans le "onclick" s'affiche (display: block).Si aucun sous-menu n'est spécifié (cas du menu 1), seule la première phase a lieu : tous les sous-menus affichés se ferment.
Window onload ?
Comme vous le remarquez dans le code Javascript ci-dessous, le script appelle la fonction "montre()" au chargement de la page. Cet appel ("montre" vide) a pour effet de cacher tous les sous-menus dès le chargement du document.
Il aurait été plus simple de masquer ces sous-menus en définissant simplement leur CSS à "display:none" (c'était d'ailleurs le cas dans la première version du tutoriel), alors pourquoi avoir préféré utiliser un appel javascript pour obtenir le même effet ?
L'intérêt est une question d'Accessibilité, ou plutôt d'interopérabilité : il existe une part non négligeable d'internautes pour qui Javascript est désactivé.Pour ces utilisateurs, le menu doit rester utillisable, ce qui n'aurait pas été le cas si les sous-menus avaient été cachés par CSS, car ils le resteraient.Dans notre cas, les menus sont effacés au chargement, mais uniquement si javascript est actif. Dans les autres cas, le menu reste navigable même si aucun comportement au survol ne sera déclenché.
Code Javascript (à placer dans les balises HEAD) :
<script type="text/javascript"><!--window.onload=montre;function montre(id) {var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} }if (d) {d.style.display='block';}}//--></script>
La mise en forme : le CSS
Le code CSS va positionner les différents éléments, les mettre en forme (couleur, fond, bordures, etc.) et masquer les sous-menus au chargement de la page en appliquant un "display: none" sur ces sous-menus (dd).
Voici le code CSS complet (à placer dans les balises HEAD, ou dans un fichier .css séparé en ôtant les balises <style type="text/css" media="screen"> et </style>) :
<style type="text/css" media="screen"><!-- body {margin: 0;padding: 0;background: white;font: 80% verdana, arial, sans-serif;
http://www.alsacreations.com/articles/deroulant/ (4 sur 8) [12/08/2004 18:10:29]
Alsacreations, un menu déroulant en CSS et XHTML
}dl, dt, dd, ul, li {margin: 0;padding: 0;list-style-type: none;}#menu {position: absolute; /* placement du menu, à modifier selon vos besoins */top: 0;left: 0;}#menu {width: 15em;}#menu dt {cursor: pointer;margin: 2px 0;;height: 20px;line-height: 20px;text-align: center;font-weight: bold;border: 1px solid gray;background: #ccc;}#menu dd {display: none;border: 1px solid gray;}#menu li {text-align: center;background: #fff;}#menu li a, #menu dt a {color: #000;text-decoration: none;display: block;border: 0 none;height: 100%;}#menu li a:hover, #menu dt a:hover {background: #eee;}--></style>
Notre menu déroulant vertical est fonctionnel !
Le Menu déroulant horizontal
Voici à présent, sur le même principe, les codes pour réaliser un menu horizontal déroulant (utilisation cette fois du détecteur "onmouseover" et non de "onclick")...
Note pour l'Accessibilité : Une remarque soulevée par Chantal : N’oubliez pas non plus que toutes les fonctionnalités
http://www.alsacreations.com/articles/deroulant/ (5 sur 8) [12/08/2004 18:10:29]
Alsacreations, un menu déroulant en CSS et XHTML
activées par un événement doivent être indépendant de l’outil utilisé. En effet, il est recommandé d’utiliser onfocus et onblur en complément de onmouseover et onmouseout par exemple.
Voir le résultat
Code HTML :
<div id="menu"> <dl> <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt> </dl> <dl> <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt> <dd id="smenu1"> <ul> <li><a href="#">Sous-Menu 1.1</a></li> <li><a href="#">Sous-Menu 1.2</a></li> <li><a href="#">Sous-Menu 1.3</a></li> <li><a href="#">Sous-Menu 1.4</a></li> <li><a href="#">Sous-Menu 1.5</a></li> <li><a href="#">Sous-Menu 1.6</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt> </dl> <dl> <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt> <dd id="smenu3"> <ul> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.2</a></li> <li><a href="#">Sous-Menu 3.3</a></li> <li><a href="#">Sous-Menu 3.4</a></li> <li><a href="#">Sous-Menu 3.5</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt> <dd id="smenu4"> <ul> <li><a href="#">Sous-Menu 4.1</a></li> <li><a href="#">Sous-Menu 4.2</a></li> <li><a href="#">Sous-Menu 4.3</a></li> </ul> </dd> </dl>
http://www.alsacreations.com/articles/deroulant/ (6 sur 8) [12/08/2004 18:10:29]
Alsacreations, un menu déroulant en CSS et XHTML
</div>
La fonction javascript est strictement la même que pour le menu vertical (cf plus haut)
Code CSS :
<style type="text/css" media="screen"><!-- body {margin: 0;padding: 0;background: white;font: 80% verdana, arial, sans-serif;}dl, dt, dd, ul, li {margin: 0;padding: 0;list-style-type: none;}#menu {position: absolute; /* placement du menu, à modifier selon vos besoins */top: 0;left: 0;z-index:100;}#menu dl {float: left;width: 12em;}#menu dt {cursor: pointer;text-align: center;font-weight: bold;background: #ccc;border: 1px solid gray;margin: 1px;}#menu dd {display: none;border: 1px solid gray;}#menu li {text-align: center;background: #fff;}#menu li a, #menu dt a {color: #000;text-decoration: none;display: block;height: 100%;border: 0 none;}#menu li a:hover, #menu dt a:hover {
http://www.alsacreations.com/articles/deroulant/ (7 sur 8) [12/08/2004 18:10:29]
Alsacreations, un menu déroulant en CSS et XHTML
background: #eee;}#site {position: absolute;z-index: 1;top : 70px;left : 10px;color: #000;background-color: #ddd;padding: 5px;border: 1px solid gray; }--></style>
Raphaël GOETTERwww.alsacreations.com
http://www.alsacreations.com/articles/deroulant/ (8 sur 8) [12/08/2004 18:10:29]
Alsacreations, un menu css avec des commentaires au survol
Création de sites web, cours et tutoriels CSS et XHTML
● Aller sur Alsacréations.● CV.● Liens.● Doc CSS.● Forum CSS.● Blog.● Accueil.
Galeries et Modèles
● Modèles de mise en page CSS : Des dizaines de gabarits en XHTML pour construire vos sites sans tableaux● Galeries de menus : Des menus de toutes sortes pour vous inspirer (simples, graphiques, déroulants,...)
Dernier tutoriel
● Les Principes Fondamentaux : Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le HTML et s'auto-proclamer 'webmaster' ?
Les plus visités
● Construire un site sans tableaux● Un menu déroulant en CSS● Savoir positionner les calques et balises en CSS
Un menu avec commentaires au survol (sans javascript)Vous avez envie d'afficher des détails supplémentaires lorsque votre visiteur survole un lien de votre menu. La plupart du temps, c'est Flash ou javascript et sa gestion de calques affichés/masqués qui vous permettent de réaliser vos voeux.
Pourtant, il existe une manière plus compatible de réaliser cette technique (rappelons que javascript est désactivé ou inactif chez près de 13% des internautes) sans langage de programmation, ni flash.
En CSS, nous allons utiliser la balise <a> à laquelle nous intégrerons la balise <span> que nous allons masquer et afficher grâce à l'attribut "display: none;" et "display: block;" (Voir le résultat ici)
Note : /* ces textes sont des commentaires explicatifs, ils peuvent être supprimés*/
Code CSS : ul {list-style-type: none;margin:0;padding:0;position: absolute; top: 2em; /* positionnement du menu, que vous pouvez changer à loisir */left: 3em;}
http://www.alsacreations.com/articles/commentaires/ (1 sur 3) [12/08/2004 18:12:15]
Alsacreations, un menu css avec des commentaires au survol
li {float: left;}
.menu a { /* définition de chaque bouton du menu */width: 100px; /* largeur du bouton, que vous pouvez changer à loisir */height: 20px;float: left;display: block;text-align: center;border: 1px solid #fff; text-decoration: none;color: #000;background: #fff;}
.menu a:hover {color: #411;background: #AAA;border: 1px solid gray; border-bottom: 0px;color: #fff;}
.menu a span { /* définition de la balise <span> inclue dans <a> */display: none;}
.menu a:hover span { /* définition de la balise <span> au survol */display: block;position: absolute;top: 20px;left: 0;width: 600px; /* largeur de la zone de commentaires, selon la taille du menu */text-align: left;border-top: 1px solid gray;color: #000;}
Et voilà le code HTML ::
<ul class="menu"><li><a href="">Menu 1<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ipsum dui, vulputate ut, eleifend pretium, tristique a, velit. Morbi lacus</span></a></li><li><a href="">Menu 2<span>Cras eu mi vel pede tempus dignissim. Etiam malesuada scelerisque massa. Maecenas metus sem, consectetuer quis, rhoncus non, euismod id, elit</span></a></li><li><a href="">Menu 3<span>Cras fringilla. Integer in neque. Nulla massa. Vestibulum eleifend mattis erat</span></a></li><li><a href="">Menu 4<span>Sed bibendum vehicula sem. Donec venenatis diam eu erat. Ut rutrum sem ut erat</span></a></li><li><a href="">Menu 5<span>Phasellus tristique, turpis in nonummy luctus, eros enim pellentesque felis, sed venenatis quam orci quis nisl. Nulla id nunc. Nam porttitor volutpat erat<em>can't</em> she
http://www.alsacreations.com/articles/commentaires/ (2 sur 3) [12/08/2004 18:12:15]
Alsacreations, un menu css avec des commentaires au survol
do?</span></a></li><li><a href="">Menu 6<span>Dernière phrase bidon !</span></a></li></ul>
A vous de modifier et personnaliser vos paramètres !
Si certaines écritures des CSS vous paraissent obscurs, par exemple .menu a:hover span, vous auez des explications dans cet article sur les héritages et imbrications.
(inspiré librement de http://www.meyerweb.com/eric/css/edge/popups/demo.html)
Raphaël GOETTERwww.alsacreations.com
http://www.alsacreations.com/articles/commentaires/ (3 sur 3) [12/08/2004 18:12:15]
Alsacreations, un rollover sur une image en CSS
Création de sites web, cours et tutoriels CSS et XHTML
● Aller sur Alsacréations.● CV.● Liens.● Doc CSS.● Forum CSS.● Blog.● Accueil.
Galeries et Modèles
● Modèles de mise en page CSS : Des dizaines de gabarits en XHTML pour construire vos sites sans tableaux● Galeries de menus : Des menus de toutes sortes pour vous inspirer (simples, graphiques, déroulants,...)
Dernier tutoriel
● Les Principes Fondamentaux : Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le HTML et s'auto-proclamer 'webmaster' ?
Les plus visités
● Construire un site sans tableaux● Un menu déroulant en CSS● Savoir positionner les calques et balises en CSS
Une image réactive (rollover) en CSSNiveau de pratique : débutantPrérequis : initiation aux CSS de base
Une image réactive est une image (menu, bouton, photo,...) qui change lors du survol de la souris. La plupart du temps, les webmasters ont recours au javascript (onmouseover,...) pour gérer ce survol. Ce code est parfois lourd, notamment lorsqu'il est généré par des logiciels, et surtout inaccessible : en effet, à l'heure actuelle (juillet 2003) javascript est désactivé ou inutilisable chez 13% des internautes (source : W3Schools).
Nous allons donc nous y prendre différemment, sans avoir de recours à des artifices. (Voir le résultat ici)
En général, une image réactive est utilisée en tant que lien, souvent dans un menu, pour accéder à d'autres pages du site.
Version 1 : méthode classique
Nous allons donc la considérer comme tel : un lien. En clair, nous n'allons utiliser que la balise <a> pour gérer les différents états de l'image lors du survol de souris.
Grâce aux feuilles de style CSS, nous n'aurons que quelques lignes à écrire pour créer cette image réactive.
http://www.alsacreations.com/articles/imgreactive/ (1 sur 3) [12/08/2004 18:12:48]
Alsacreations, un rollover sur une image en CSS
Code CSS :
a.image { /* définition de la classe "image" de la balise <a> */ display: block; /* la balise a doit être en bloc */ width: 100px; /* largeur de l'image réactive */ height: 100px; /* hauteur de l'image réactive */ background-image: url(image1.gif); /* source de l'image de départ */ background-repeat: no-repeat; } a.image:hover { /* définition de la classe "image" de la balise <a> au survol */ background-image: url(image2.gif); /* source de l'image d'arrivée */ }
Et voilà pour le CSS !
Pour finir, il suffira de place notre balise <a> à l'endroit où l'on veut voir l'image réactive :
<a class="image" href="lien.htm"></a>
Et notre image réactive fonctionne !
Notons qu'il y'aurait quelques soucis de sctintillement sur Internet Explorer 6 / Windows, comme si l'image n'était pas prechargée.
Version 2 : méthode de l'arrière plan transparent
Cette méthode présente plusieurs avantages : elle ne nécessite pas de préchargement de l'image car elles seront toutes les deux chargées au départ. De plus, cette méthode fonctionne sur tous les navigateurs récents depuis Internet Explorer 5 (testé avec succès sur Windows IE5, IE5.5, IE6, Opera 7.23, Mozilla Firebird 0.6 et sur Mac avec Safari 1.2, IE 5.2.3, Camino 0.7, et Firefox 0.8)
L'idée générale va être celle-ci :
● L'image-lien (balise <a>) est placée dans un conteneur : <div> pour une image seule ou <li> pour une image servant d'élément de liste de menu. Dans notre cas, nous placerons l'image <a> dans une balise <div>.
● Le conteneur de l'image aura pour arrière-plan l'image survolée (image 2)● La balise de lien <a> aura pour arrière-plan l'image 1 qui va s'afficher par-dessus celle du conteneur (image 2). Elle
sera en premier plan● Au survol (a:hover), l'image de premier plan (image 1) sera masquée (transparente) et laissera afficher l'image de
second-plan (image 2)
Voici le code CSS de notre rollover :
#lien { /* "lien" sera notre conteneur, ici la balise div */position:absolute; /* placement de l'image-lien, à vous d'adapter */left: 200px; /* dimensions selon l'image, à vous d'adapter */top: 50px;width: 100px;height: 100px;background: url(image2.gif) top left no-repeat; /* placement de l'image 2 au second plan */}
http://www.alsacreations.com/articles/imgreactive/ (2 sur 3) [12/08/2004 18:12:48]
Alsacreations, un rollover sur une image en CSS
#lien a { /* définition du lien qui occupera toute la place du conteneur */display: block;width: 100%;height: 100%;background: white url(image1.gif) top left no-repeat; /* placement de l'image 1 au premier plan */color: #000;}
#lien a:hover { /* masquage de l'image1 au survol */background: transparent none;}
Voici le code HTML adapté :
<div id="lien"><a href="#"></a></div>
Voir le résultat de cette méthode
Cette méthode de rollover est inspirée de cette page : http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/update.html
Raphaël GOETTERwww.alsacreations.com
http://www.alsacreations.com/articles/imgreactive/ (3 sur 3) [12/08/2004 18:12:48]
Alsacreations, astuce pour éviter le préchargement (preload) d'images sur les survols de menus
Création de sites web, cours et tutoriels CSS et XHTML
● Aller sur Alsacréations.● CV.● Liens.● Doc CSS.● Forum CSS.● Blog.● Accueil.
Galeries et Modèles
● Modèles de mise en page CSS : Des dizaines de gabarits en XHTML pour construire vos sites sans tableaux● Galeries de menus : Des menus de toutes sortes pour vous inspirer (simples, graphiques, déroulants,...)
Dernier tutoriel
● Les Principes Fondamentaux : Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le HTML et s'auto-proclamer 'webmaster' ?
Les plus visités
● Construire un site sans tableaux● Un menu déroulant en CSS● Savoir positionner les calques et balises en CSS
Faire de multiples boutons (rollovers) avec une seule image et sans préchargementCe tutoriel fait suite au tutoriel Une image réactive en CSS. Il est conseillé d'avoir parcouru les idées de ce tutoriel avant de commencer celui-ci.
Nous allons ici concevoir un menu composé de plusieurs liens (boutons). Ce menu sera entièrement graphique et chaque bouton possèdera son propre comportement au survol, différent des autres.
(Voir le résultat final / Voir une variante / Voir une variante horizontale).
La méthode traditionnelle est de découper l'image générale en plusieurs fichiers, chacun correspondant à un bouton au repos et à ce bouton au survol. Il est donc nécessaire de créer deux images différentes pour chaque bouton, sans compter l'image générale d'arrière-plan pour le menu.
En théorie...
Nous allons procéder différemment et n'utiliser qu'une seule image pour tout le menu et tous les comportements. Seule une partie de l'image est affichée au départ et le reste de l'image (caché au début) se dévoilera selon le lien survolé.
Cette idée a été introduite sur le site Fast rollovers, no preload needed et sera reprise sous le terme de Portes coulissantes.
http://www.alsacreations.com/articles/rollover_unique/ (1 sur 5) [12/08/2004 18:13:30]
Alsacreations, astuce pour éviter le préchargement (preload) d'images sur les survols de menus
Ces deux sites développent des solutions très élégantes pour afficher un rollover sur les boutons sans avoir à faire de préchargement (preload) d'image au préalable.
Cependant, ces méthodes ne fonctionnent pas sur tous les navigateurs (notamment sur Internet Explorer) et n'ont, pour l'instant, été appliquées qu'à un seul bouton unique et un survol toujours identique. Nous allons l'étendre à un menu avec des survols tous différents les uns des autres et, surtout, le rendre compatible avec Internet Explorer, malgré ses bugs. Note : après avoir testé, il semblerait que cette technique ne fonctionne pas correctement sur IE6 / Windows 98 : le navigateur, curieusement, recharge l'image à chaque fois. Il faut donc, pour lui, préférer la solution décrite dans la seconde partie de ce tutoriel.
Avantages
Les avantages d'une telle méthode sont multiples :
● Eviter de faire un préchargement pour chaque bouton de menu.● Eviter de faire des découpes d'images et d'accumuler les fichiers inutiles.● Utilisation d'une image unique pour tout le menu et tous les survols.
En résumé, des tests sur un site réel ont donné ces résultats : poids des images réduit de moitié, nombre d'images passant d'une 20aine à une seule, et plus besoin de préchargement : le survol est immédiat !
Procédure
Voici le menu final que nous allons obtenir (largeur : 300px, hauteur : 270px) :
Comme vous le devinez, chaque bouton de menu sera différent des autres, en laissant apparaitre au survol une partie plus éclairée que l'arrière plan.
Pour parvenir à ce comportement, nous allons utiliser cette image unique (largeur : 300px, hauteur : 540px) :
http://www.alsacreations.com/articles/rollover_unique/ (2 sur 5) [12/08/2004 18:13:30]
Alsacreations, astuce pour éviter le préchargement (preload) d'images sur les survols de menus
Cette image unique servira d'arrière-plan de départ pour le menu, mais aussi de survol pour chacun des boutons.
L'idée générale est d'utiliser cette image en arrière-plan général du menu (sur une hauteur de 270px), et de la décaler en hauteur en fonction de chaque bouton.
Par exemple, chaque bouton a une hauteur de 30px, je vais donc positionner le premier arrière plan à un décalage de -30px, puis de -60px, etc... Ainsi, à chaque bouton correspondra une partie de l'image.
Voir le résultat final / Voir une variante / Voir une variante horizontale.
Code HTML et code CSS :
Le code HTML est celui d'un menu classique, basé sur une liste (ul, li). Chaque lien est défini par un id que l'on va définir en CSS. On y a rajouté les Accesskey pour faciliter l'Accessibilité à tous les utilisateurs.
Code HTML :
<ul> <li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li> <li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li> <li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li> <li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li>
http://www.alsacreations.com/articles/rollover_unique/ (3 sur 5) [12/08/2004 18:13:30]
Alsacreations, astuce pour éviter le préchargement (preload) d'images sur les survols de menus
<li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li> <li><a id="menu6" title="menu6" accesskey="6" href="#">Menu 6</a></li></ul>
Et voici le code CSS qui va définir tous les comportements :
Code CSS :
ul, li { /* utilisation de liste pour le menu */list-style-type: none; /* suppression des puces de liste */margin:0;padding:0;}
ul {position: absolute; /* positionnement pour IE5 et IE5.5 */left: 20%;top: 50px;background: transparent url(image.jpg) top left no-repeat; /* arrière-plan général du menu */height: 270px;width: 300px;text-align: center;}
li {display: inline; /* correction pour IE5 et IE5.5 */}
li a { /* dimensions et définitions des boutons */display: block; /* mise en block de <a> pour lui donner des dimensions */height: 40px;width: 300px;line-height: 40px; /* hauteur de ligne pour éviter les paddings */color: #E2C6BA;font-size: 18px;font-family: georgia, serif;text-decoration: none;}
li a:hover {color: #43271B;background: transparent url(image.jpg) top left no-repeat;}
a#menu1:hover {background-position: 0% -270px; /* décalage de l'arrière-plan pour chaque bouton */}
a#menu2:hover {background-position: 0% -310px;}
a#menu3:hover {background-position: 0% -350px;}
a#menu4:hover {background-position: 0% -390px;
http://www.alsacreations.com/articles/rollover_unique/ (4 sur 5) [12/08/2004 18:13:30]
Alsacreations, astuce pour éviter le préchargement (preload) d'images sur les survols de menus
}
a#menu5:hover {background-position: 0% -430px;}
a#menu6:hover {background-position: 0% -470px;}
NOTE : ce menu a été testé avec succès sur PC avec les navigateurs Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6, Opera 7, Mozilla 1.7, Mozilla Firebird 0.7, Mozilla Firefox 0.8, ainsi que sous Mac avec les navigateurs Camino, Safari et Explorer, et sous Linux avec le navigateur Mozilla Firefox 0.8.
Attention : il ne fonctionne pas sur les très anciens navigateurs comme Netscape 4 ou Internet Explorer 3, et les arrière plans initiaux ne s'affichent pas sur Konqueror (linux).
Raphaël GOETTERwww.alsacreations.com
http://www.alsacreations.com/articles/rollover_unique/ (5 sur 5) [12/08/2004 18:13:30]
