souci avec le fancy menu

J'ai fais le tuto : http://devthought.com/cssjavascript-...er-fancy-menu/

Cependant j'arrive a rien, la zone qui est censé bougé derriere les boutons, soit tout l'interet du tuto , n'apparait meme pas :/
Et donc bouge encore moin...

voila les fichiers :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>menu</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />	
		<script type="text/javascript" src="mootools.js"></script>
		<script type="text/javascript" src="mainMenu.js"></script>
	</head>
 
	<body>
		<div id="fancymenu">
			<ul>
			<li class="current" id="menu_home"><a href="#">Home</a></li>
			<li id="menu_about"><a href="#">About</a></li>
			<li id="menu_services"><a href="#">Services</a></li>
			<li id="menu_portfolio"><a href="#">Portfolio</a></li>
			<li id="menu_contact"><a href="#">Contact</a></li>
			<li id="menu_blog"><a href="#">Blog</a></li>
			</ul>
		</div>
	</body>
</html>

Code:

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
72
73
74
75
76
77
78
79
80
81
82
83
 #fancymenu {
		position: relative;
		height: 29px;
		width: 421px;
		/*background: url('images/bg.gif') no-repeat top;*/
		background-color: blue;
		padding: 15px;
		margin: 10px 0;
		overflow: hidden;
 }
 
#fancymenu ul {
		padding: 0;
		margin: 0;
}
 
/* Don't apply padding here (offsetWidth will differ in IE)
 If you need padding add it to the child anchor */
 
#fancymenu ul li {
		margin:0px;
		float:left;
		list-style: none;
  }
 
#fancymenu ul li a {
		text-indent: -500em;
		z-index: 100;
		display: block;
		float: left;
		height: 30px;
		position: relative;
		overflow: hidden;
 }
 
/*Now, we have to add the background images for each link:*/
 
#menu_home a {
width:58px;
background:url(images/home.gif) no-repeat center;
}
 
#menu_about a {
width:63px;
background:url(images/about.gif) no-repeat center;
}
 
#menu_services a {
width:81px;
background:url(images/services.gif) no-repeat center;
}
 
#menu_portfolio a {
width:81px;
background:url(images/portfolio.gif) no-repeat center;
}
 
#menu_contact a {
width:74px;
background:url(images/contact.gif) no-repeat center;
}
 
#menu_blog a {
width:51px;
background:url(images/blog.gif) no-repeat center;
}
 
 /* li transparente qui bouge*/
 
#fancymenu li.background {
		/*background: url('images/bg_menu_right.png') no-repeat top right !important;*/
		background: url(images/bg_menu_right.gif) no-repeat top right;
		z-index: 8;
		position: absolute;
		visibility: hidden;
 }
 
#fancymenu .background .left {
		/*background: url('images/bg_menu.png') no-repeat top left !important;*/
		background: url(images/bg_menu.gif) no-repeat top left;
		height: 30px;
		margin-right: 9px; /* 7px is the width of the rounded shape */
 }

Code:

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
 
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);
 
// création de l'objet :
 
window.addEvent('domready', function() {
	new SlideList($E('ul', 'fancymenu'), {
		transition: Fx.Transitions.backOut, duration: 700, 
		onClick: function(ev, item) { ev.stop(); }});
	});

il y'a aussi les boutons , qui sont bien a la bonne place dans le repertoire images. ( j'ai tout mi la:http://lapanoplie.com/menu.zip)

Si jamais quelqu'un comprenait ... merci !

C'est ton fichier mootools.js qui pose problème : en faisant un copier-coller du fichier http://devthought.com/wp-content/the...pt/mootools.js dans le tien, ça marche.

aaaaaaaahhhhhh mon sauveur!!!

Bon alors faut vraiement que tu m'expliques comment on recupère mootools, parce que je suis incapable de recupérer la meme version que toi.

t'es passé par le core builder, le more builder?

Un truc hyper-rusé de vieux brigand : le copier-coller :king:

Dans Firefox, j'ai ouvert un nouvel onglet, j'ai collé l'URL http://devthought.com/wp-content/themes/devthought/javascript/mootools.js dans la barre d'adresse, ça m'a affiché le code, clic droit dans la fenêtre > Tout sélectionner, Ctrl-C (copier), j'ai ouvert ton fichier mootools.js dans PSPad, Ctrl-A (pour tout sélectionner et donc tout remplacer), Ctrl-V (coller), Ctrl-S (sauver) et hop !

Ahah :bravo:
en effet c'est tres judicieux :)

Sinon sur le site de mootools tu crois que c'st possible de recup un mootool complet qui a tous les modules? :aie:

je sens le "oui c'est possible." arriver :yaisse2:

Merci en tous les cas mac.

Aucune idée, faut essayer, je ne connais absolument pas ce truc :aie: