Discussion :

[vodiem]

Bonjour,

voici mon premier code JS, histoire de me faire la main.
si cela peut servir cela me ferait plaisir d'avoir un feedback.
dans tous les cas vu que c'est mon premier code en js toutes critiques seront les biens venues.
il s'agit donc d'un menu horizontal déroulant uniquement en javascript.

je suis parti à l'origine de l'exemple ici
bien entendu il ne s'agissait pas de plagier le code.
j'ai refait complètement le js tout en gardant la façade.
vous remarquerez que la conception est très différente et j'espère que mon code est plus lisible et adaptable.
j'ai pour cela fait des effets de transitions différents.

l'initialisation se fait simplement par:

Code :

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

1
2
3
<script type="text/javascript">
	DDMenu.Wrap("menu");
</script>

après le chargement de l'id "menu" (sans oublié la déclaration préalable du script ).

j'ai introduit un nombre d'intération "c.i" allant jusqu'à "ni" toutes les "t" millisecondes ce qui permet de faciliter la création d'effets de transition.
j'ai en plus rajouté un délai "tc" à la sortie du survole du menu.

testé sous :

FF3, FF3.5
IE 7.0, IE 8
Opéra 10.0x
Chrome 3.0x

IE 6 -> pb d'affichage

le JS:

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
DDMenu={t:25,ni:10,tc:700,m:[],z:50,
	Wrap:function(n){var w=document.getElementById(n),s=w.getElementsByTagName('ul'),l=s.length;this.m[n]=[];
	for(i=0;i<l;i++){
		s[i].style.display='block';s[i].style.visibility='hidden';
		c=this.m[n][i]={e:s[i],h:s[i].offsetHeight,w:s[i].offsetWidth,i:0};
		c.e.style.height=c.h+"px";c.h-=c.e.offsetHeight-c.h;
		c.e.style.width=c.w+"px";c.w-=c.e.offsetWidth-c.w;
		c.e.style.zIndex=this.z;this.z++;
		c.e.parentNode.onmouseover=Function("DDMenu.onOpen('"+n+"',"+i+")");
		c.e.parentNode.onmouseout=Function("DDMenu.onClose('"+n+"',"+i+")");
		};
	},
	onOpen:function(n,i){var c=this.m[n][i];
		if(!c.t){c.e.style.visibility='visible'};
		clearInterval(c.t);c.t=setInterval(function(){DDMenu.onOpen(n,i)},this.t);
		if(c.i==this.ni){c.e.style.overflow='visible';c.e.style.filter='';clearInterval(c.t);}
			else {
				c.e.style.overflow='hidden';
				c.i++;
				o=c.i/this.ni;c.e.style.opacity=o;c.e.style.filter='alpha(opacity='+(o*100)+')';
				c.e.style.height=Math.ceil(c.h*(c.i/this.ni))+"px";
				c.e.style.width=Math.ceil(c.w*(c.i/this.ni))+"px";
				};
	},
	onClose:function(n,i){var c=this.m[n][i];
		function AfterTimeout(){
			clearInterval(c.t);
			if(c.i!=0){
				c.t=setInterval(function(){AfterTimeout()},DDMenu.t);
				c.i--;
				o=c.i/DDMenu.ni;c.e.style.opacity=o;c.e.style.filter='alpha(opacity='+(o*100)+')';
				};
			};
		clearInterval(c.t);c.t=setTimeout(function(){AfterTimeout()},(c.i==this.ni)?this.tc:0);
	}
}

pour ceux qui le sujet intéresserait j'ai trouvé ces liens avec des effets intéressants:
webdesignledger assez complet (vous remarquerez qu'il n'y a pas pléthore de code uniquement en js sans librairie)
kriesi
rokmoomenu
infinitesims

par ici pour la démo

@+

[vodiem]

maj code:
.ajout du zindex
.correction bug sur height/width du au border

[DoubleU]

Vraiment sympa

[le_chomeur]

Très sympa ^^

juste un petit bug, les menus reste affiché trop longtemps :

- premier menu, afficher le premier sous menu
- aussitot le second

le premier est encore ouvert on voit deux item 1

juste ça, sinon code clair net et propre

[kimjoa]

sympa, très court, pas de chichi , par contre mettre des noms de variable composé d'une lettre, c'est abusé

Au pire tu aurais pu fournir une version compresse...

Aussi, pour les animations, ca aurait été sympa, de mettre en argument des fonctions pour définir ses propres animation ...

Sinon y'a un bug sous IE6, les li sont en ligne, au lieu d'être en mode block

a+

[vodiem]

merci beaucoup pour vos appréciations.

@le_chomeur: c'est vrai que la superposition des deux sous menu déroute un peu... on peut effectivement accélérer le temps de la fermeture ou mettre une ombre porté. en attendant, voilà j'ai "corrigé" le "bug"... lol

@kimjoa:

mettre des noms de variable composé d'une lettre, c'est abusé

tu as raison, en générale je mets des noms de variable plus explicite et surtout je commente. j'ai pensé à faire deux codes, un documenté et un autre compacté mais je n'étais pas sur de l'intérêt que cela susciterait ni des corrections à y porter. j'ai donc privilégié la simplicité.
j'ai pensé dès le départ à faire des fonctions pour le calcul de la largeur et hauteur et position mais je cela est assez restrictif.
on pourrait imaginer d'autre effet qui demanderait de stocker plus de variable dans "c" il faudrait donc ajouter une fonction d'initialisation...
pourquoi pas, je craignais d'alourdir le code et sa compréhension.
cela dit il est facile (et dans certain cas recommandé) d'extraire les 4 lignes qui traite les effets d'ouverture et fermeture dans des fonctions à part.
en fait je pensais faire un peu plus tard un autre code un peu plus complet qui permettrait d'intégrer des fonctions personnalisées à chaque niveau de sous menu, ce qui conduit inéluctablement à établir une série de fonction d'effet.

merci d'avoir remonté le bug sur IE6, je ne pourrais le corriger dans l'immédiat.
entre nous, je pense qu'on aurait plus vite fait de dire sur quel navigateur ca marche...

j'ai donc installé, testé et validé sur Opéra 10.0x, et Chrome 3.0x

les différences sur la durée d'affichage des effets conforte dans l'idée qu'il serait préférable pour bien faire de prendre l'horloge pour mesure de temps pour les itérations...