https://product.pinggu.org/js/imageMenu.js

1/**************************************************************
2
3	Script	: Image Menu
4	Version	: 2.2
5	Authors	: Samuel Birch
6	Desc	: 
7	Licence	: Open Source MIT Licence
8
9**************************************************************/
10
11var ImageMenu = new Class({
12	
13	getOptions: function(){
14		return {
15			onOpen: false,
16			onClose: Class.empty,
17			openWidth: 200,
18			transition: Fx.Transitions.quadOut,
19			duration: 400,
20			open: null,
21			border: 0
22		};
23	},
24
25	initialize: function(elements, options){
26		this.setOptions(this.getOptions(), options);
27		
28		this.elements = $$(elements);
29		
30		this.widths = {};
31		this.widths.closed = this.elements[0].getStyle('width').toInt();
32		this.widths.openSelected = this.options.openWidth;
33		this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))
34		
35		
36		this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
37		
38		this.elements.each(function(el,i){
39			el.addEvent('mouseenter', function(e){
40				new Event(e).stop();
41				this.reset(i);
42				
43			}.bind(this));
44			
45			el.addEvent('mouseleave', function(e){
46				new Event(e).stop();
47				this.reset(this.options.open);
48				
49			}.bind(this));
50			
51			var obj = this;
52			
53			el.addEvent('click', function(e){
54
55				if(obj.options.onOpen){
56					new Event(e).stop();
57					if(obj.options.open == i){
58						obj.options.open = null;
59						obj.options.onClose(this.href, i);
60					}else{
61						obj.options.open = i;
62						obj.options.onOpen(this.href, i);
63					}
64					
65					
66				}
67				
68			})
69			
70		}.bind(this));
71		
72		if(this.options.open){
73			if($type(this.options.open) == 'number'){
74				this.reset(this.options.open);
75			}else{
76				this.elements.each(function(el,i){
77					if(el.id == this.options.open){
78						this.reset(i);
79					}
80				},this);
81			}
82		}
83		
84	},
85	
86	reset: function(num){
87		if($type(num) == 'number'){
88			var width = this.widths.openOthers;
89			if(num+1 == this.elements.length){
90				width += this.options.border;
91			}
92		}else{
93			var width = this.widths.closed;
94		}
95		
96		var obj = {};
97		this.elements.each(function(el,i){
98			var w = width;
99			if(i == this.elements.length-1){
100				w = width+5
101			}
102			obj[i] = {'width': w};
103		}.bind(this));
104		
105		if($type(num) == 'number'){
106			obj[num] = {'width': this.widths.openSelected};
107		}
108				
109		this.fx.start(obj);
110	}
111	
112});
113
114ImageMenu.implement(new Options);
115ImageMenu.implement(new Events);
116
117
118/*************************************************************/