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
richiamo in index.htmcodice:/************************************************************** 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; } /*************************************************************/
ciaocodice:window.addEvent('domready', function(){ var myMenu = new ImageMenu($$('#imageMenu a'),{openheight:200, border:2, onOpen:function(e,i){alert(e);}}); });

Rispondi quotando