souci avec le fancy menu

**eilijah** · 11/09/2008, 15h41

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 index.html :

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
 <!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 styles.css :

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
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 mainMenu.js :

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
 
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 !

**_Mac_** · 13/09/2008, 14h36

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.

**eilijah** · 13/09/2008, 15h56

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?

**_Mac_** · 13/09/2008, 16h47

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

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 !