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_** · 16/09/2008, 09h46

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

souci avec le fancy menu

JavaScript

Vue hybride

Discussions similaires

Partager

Partager