non so che dirti, qui funziona
imageMenu.js
codice:
/**************************************************************
Script : Image Menu
Version : 2.2
Authors : Samuel Birch
Desc :
Licence : Open Source MIT Licence
**************************************************************/
var ImageMenu = new Class({
getOptions: function(){
return {
onOpen: false,
onClose: Class.empty,
openheight: 200,
transition: Fx.Transitions.quadOut,
duration: 400,
open: null,
border: 0
};
},
initialize: function(elements, options){
this.setOptions(this.getOptions(), options);
this.elements = $$(elements);
this.heights = {};
this.heights.closed = this.elements[0].getStyle('height').toInt();
this.heights.openSelected = this.options.openheight;
this.heights.openOthers = Math.round(((this.heights.closed*this.elements.length) - (this.heights.openSelected+this.options.border)) / (this.elements.length-1))
this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
this.elements.each(function(el,i){
el.addEvent('mouseenter', function(e){
new Event(e).stop();
this.reset(i);
}.bind(this));
el.addEvent('mouseleave', function(e){
new Event(e).stop();
this.reset(this.options.open);
}.bind(this));
var obj = this;
el.addEvent('click', function(e){
if(obj.options.onOpen){
new Event(e).stop();
if(obj.options.open == i){
obj.options.open = null;
obj.options.onClose(this.href, i);
}else{
obj.options.open = i;
obj.options.onOpen(this.href, i);
}
}
})
}.bind(this));
if(this.options.open){
if($type(this.options.open) == 'number'){
this.reset(this.options.open);
}else{
this.elements.each(function(el,i){
if(el.id == this.options.open){
this.reset(i);
}
},this);
}
}
},
reset: function(num){
if($type(num) == 'number'){
var height = this.heights.openOthers;
if(num+1 == this.elements.length){
height += this.options.border;
}
}else{
var height = this.heights.closed;
}
var obj = {};
this.elements.each(function(el,i){
var w = height;
if(i == this.elements.length-1){
w = height+5
}
obj[i] = {'height': w};
}.bind(this));
if($type(num) == 'number'){
obj[num] = {'height': this.heights.openSelected};
}
this.fx.start(obj);
}
});
ImageMenu.implement(new Options);
ImageMenu.implement(new Events);
/*************************************************************/
imageMenu.css
codice:
/**************************************************************
Image Menu
v 2.2
**************************************************************/
#imageMenu {
position: relative;
width: 100px;
/* height: 200px; */
overflow: hidden;
}
#imageMenu ul {
list-style: none;
margin: 0px;
display: block;
/* height: 200px; */
width: 100px;
}
#imageMenu ul li {
/* float: left; */
}
#imageMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-top: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:100px;
height: 50px;
}
#imageMenu ul li.landscapes a {
background: url(images/landscapes.jpg) repeat scroll;
}
#imageMenu ul li.people a {
background: url(images/people.jpg) repeat scroll;
}
#imageMenu ul li.nature a {
background: url(images/nature.jpg) repeat scroll;
}
#imageMenu ul li.urban a {
background: url(images/urban.jpg) repeat scroll;
}
#imageMenu ul li.abstract a {
background: url(images/abstract.jpg) repeat scroll;
}
.clear {
clear: both;
}
/*************************************************************/
richiamo in index.htm
codice:
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openheight:200, border:2, onOpen:function(e,i){alert(e);}});
});
ciao
Rispondi quotando
