Discussion :

[Manatee]

Bonjour,

Pour commencer toutes mes excuses si le post n'est pas dans la bonne partie mais je dois dire que j'hésite pas mal entre les catégories

J'ai un soucis avec un Fancy Menu qui fonctionne avec Mootools, je l'ai fait en suivant ce tutoriel http://devthought.com/cssjavascript-...er-fancy-menu/ .

Au début j'avais un problème car les liens étaient cliquable mais ne fonctionné pas.

Pour résoudre le problème j'ai changé ce code :

Code :

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

1
2
3
   1.  window.addEvent('domready', function() {
   2. new SlideList($E('ul', 'fancymenu'), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});
   3. });

Par celui ci :

Code :

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

1
2
3
4
5
window.addEvent('domready', function() {
	// orange menu demo
	if($('fancymenu'))
		FancyExample = new SlideList($E('ul', 'fancymenu'), {transition: Fx.Transitions.backOut, duration: 700});
});

Maintenant les liens fonctionnent parfaitement mais le "background" reste toujours derrière le liens accueil et je n'arrive pas a trouver de solution, alors si quelqu'un peut m'aider ça serait bien gentil.

Voilà le code complet :

menu.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
37
38
39
40
41
42
43
44
45
var SlideList = new Class({
initialize: function(menu, options) {
this.setOptions(this.getOptions(), options);
this.menu = $(menu), this.current = this.menu.getElement('li.current');
this.menu.getElements('li').each(function(item){
item.addEvent('mouseover', function(){ this.moveBg(item); }.bind(this));
item.addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
}.bind(this));
 
this.back = new Element('li').addClass('background').adopt(new Element('div').addClass('left')).injectInside(this.menu);
this.back.fx = this.back.effects(this.options);
if(this.current) this.setCurrent(this.current);
},
 
setCurrent: function(el, effect){
this.back.setStyles({left: (el.offsetLeft)+'px', width: (el.offsetWidth)+'px'});
(effect) ? this.back.effect('opacity').set(0).start(1) : this.back.setOpacity(1);
this.current = el;
},
 
getOptions: function(){
return {
transition: Fx.Transitions.sineInOut,
duration: 500, wait: false,
onClick: Class.empty
};
},
 
clickItem: function(event, item) {
if(!this.current) this.setCurrent(item, true);
this.current = item;
this.options.onClick(new Event(event), item);
},
 
moveBg: function(to) {
if(!this.current) return;
this.back.fx.custom({
left: [this.back.offsetLeft, to.offsetLeft],
width: [this.back.offsetWidth, to.offsetWidth]
});
}
});
 
SlideList.implement(new Options);

main.js

Code :

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

1
2
3
4
5
window.addEvent('domready', function() {
	// orange menu demo
	if($('fancymenu'))
		FancyExample = new SlideList($E('ul', 'fancymenu'), {transition: Fx.Transitions.backOut, duration: 700});
});

Merci d'avance !

[Manatee]

Aucune idée ? ou manque d'info ?