Problème Fancy Menu avec Mootools

[Manatee]

Bonjour,

J'ai un soucis avec un Fancy Menu qui fonctionne avec Mootools, je l'ai fait en suivant ce tutoriel http://devthought.com/cssjavascript-true-power-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 :

   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 :

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

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

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 ?

[Ifmy]

Bonjour,

Reprenez le code d'origine. De souvenir le if est useless. Mootools gère déjà cela (il suffit de vérifier la console d'erreurs pour être certain).

Ensuite une variable ça ce déclare

Pour finir et c'est la cause du problème je pense la class slideList ne semble pas pouvoir ce passer le l'event onClick ...

Il ne reste plus qu'a ajouter dans la fonction lancée par l'event onClick un window.open("lien");

Pour récupérer le lien il faut voir ce que retourne item et faire un tour dans la doc de mootools pour récupérer l'attribut href de votre lien.

Le ev.stop(); n'a plus d'utilité dans votre cas.

[Manatee]

Merci beaucoup