Discussion :

[taffMan]

Bonne nuit,

Je me lance corps et âme dans les sous-menus css, toutefois je ne comprends pas pourquoi le rollOver sur un élément de liste ne remplace pas img1.jpg par img2.jpg, jugez plutôt:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px; }
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
  border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
  border-bottom: 1px solid #CCC;}
div#nav li.submenu {background-image:url(img1.jpg);}
div#nav li.submenu:hover {background-image:url(img2.jpg);}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
  display: none;}
div#nav ul.level1 li.submenu:hover ul.level2, 
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}

et l'HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="nav">
<ul class="level1">
	<li><a href="/">a</a></li>
	<li class="submenu"><a href="/services/">b</a>
			  <ul class="level2">
			   <li><a href="/services/strategy/">b1</a></li>
			   <li><a href="/services/optimize/">b2</a></li>
			   <li> </ul>
	</li>
	<li><a href="/events/">c</a></li>
</ul>
</div>

Ce livre provient du bouquin de Meyer, je précise que j'appelle bien csshover.htc qui permet sous IE le :hover pour des balises autres que <a>
Merci pour vos lanternes!

[Auteur]

bonjour,

Certes je ne t'apprends rien mais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
div#nav li.submenu {background-image:url(img1.jpg);}
div#nav li.submenu:hover {background-image:url(img2.jpg);}

le hover ne fonctionne que sur des balise a sous IE.

Ce livre provient du bouquin de Meyer, je précise que j'appelle bien csshover.htc qui permet sous IE le :hover pour des balises autres que <a>

Le problème est que nous nous ne savons pas ce qu'est csshover.htc

[viviboss]

...... Moi non plus je ne sais pas ce que c'est, mais je me dis que ca ne peut venir que de là : il serait relativement aisé de changer ton code afin d'utiliser les "a:hover", et tu verra ca passera omme une lettre à la poste !!!

[taffMan]

Mais pourtant le :hover est detecté car csshover.htc permet d'étendre les capacités de survol à tous les éléments dans IE/win. C'est magique, le pb est que au lieu de remplacer l'image par une autre, l'image disparaît, voilà tout. Par contre on peut remplacer la couleur d'arrière-plan.

Je vais voir ce que je peux faire en me contentant d'un a:hover, et me renseigner plus avant sur csshover.htc

[Auteur]

ça ne serait pas plus simple d'utiliser onmouseover et onmouseout ?

[taffMan]

je crains que l'utilisation de javascript aille à l'encontre des standards oueb n'est-il pas?

[Bisûnûrs]

je crains que l'utilisation de javascript aille à l'encontre des standards oueb n'est-il pas?

Depuis quand ?

[viviboss]

Javascript est un langage ECMA (labélisé au niveau Européen) client. Tu confond "standard web" et, je dirais, recommandation.

En effet, il n'est pas souhaitable de programmer un site 100% javascript, il faut l'utiliser avec parcimonie car trop tributaire du client (il suffit de désactiver javascript et ca met la grouille.... )

C'est un très bon complément à des langages comme PHP qui sont situés serveur, mais la recommandation est quand même la suivante : tant que tu peux faire autrement, n'utilise pas Javascript (bref, faut pas en abuser Mais c'est comme tout.....)

Le jour ou tu voudra faire de l'AJAX, tu sera bien obligé d'y toucher de toute les facons !!!!

[taffMan]

L'Ajax justement j'y viens!! C'est tout de même ennuyeux de devoir recharger la page pour faire une requête MySQL, et un peu d'interractivité semble bienvenu dans ces utilitaires côtés serveur si peu fantaisistes que je développe humblement!

Pour en revenir au menu déroulant je l'ai développé en js mais il faut admettre qu'il faut 4 fois plus de code qu'en CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script type="text/javascript">
 
	function init(){
		urlInit = Array("ressources/btns/fontaines-bureaux.jpg", "ressources/btns/fontaines-passe-partout.jpg", 
		"ressources/btns/fontaines-ecoles-sport.jpg", "ressources/btns/fontaines-industries.jpg", 
		"ressources/btns/fontaines-collectivites.jpg", "ressources/btns/fontaines-universites.jpg");
 
		for(var i = 1; i <= 6; i++){
				document.getElementById("btn" + i).style.backgroundImage = "url(" + urlInit[i - 1] + ")";
			} 
	}
 
	function over(obj, url){
		obj.style.backgroundImage = "url(" + url + ")";
	}
 
	function out(obj, url){
		if(obj.clicked == false || obj.clicked == undefined){
			obj.style.backgroundImage = "url(" + url + ")";
		}
	}
 
	function cache(i){
 
		if(document.getElementById("submenu" + i).style.display == "block"){
			document.getElementById("submenu" + i).style.display = "none";
		}
		document.getElementById("btn" + i).style.backgroundImage = "url(" + urlInit[i - 1] + ")";
		document.getElementById("btn" + i).clicked = false; 
	}
 
	function afficheSousMenu(obj, num, url){
		over(obj, url);
		obj.clicked = true;
		document.getElementById("submenu" + num).style.display = "block";
 
		if(num == 1){
 
			for(var i = 2; i <= 6; i++){
				cache(i, url);
			}
 
		}else if(num == 2){
 
				cache(1, url)
 
		for(var i = 3; i <= 6; i++){
 
				cache(i, url);
 
			}
 
 
		}else if(num > 2){
 
			num = Number(num);
 
			for(var i = 1; i < num; i++){
 
				cache(i, url);
 
			}
 
			for(var j = num + 1; j <= 6; j++){
 
				cache(j, url);
 
			}  
		}
}
</script>

Sans parler des gestionnaires dévènements et des paramètres des fonctions!

J'ai tout essayé en CSS et je ne suis pas parvenu à faire un sous-menu comme celui-ci http://www.htmldog.com/articles/suck...owns/example/# en jouant uniquement sur l'image d'arrière plan de la balise <li>