imagemenu and mootools 1.2.x [updated]

Originally imagemenu is not compatible with newest release of Mootools >1.1.

The modifications suggested here in forum are not complete

1/2 : « transition:Fx.Transitions.Quad.easeOut » modif is ok.

but 2/2 the way to detect the onOpen or onClose function is not running.

why ? – because the detection of the passed functions is not correct.
If the functions are not present, the default action of the DOM event must be fired (i.e. a link). And if the functions are present, the function declared in the calling class only can be fired.

The first part of the class is changed like that :

var ImageMenu = new Class({
Implements: [Options, Events],
defaultVal: 'something',
onOpen: -1,
onClose: $empty,
onStart: $empty,
openWidth: 200,
transition: Fx.Transitions.Quad.easeOut,
duration: 500,
open: null,
border: 0
initialize: function(elements, options){

The part detecting and firing the action is modified as here to call new functions that fire the open or close events :

el.addEvent('click', function(e){
var openfunc = $type(obj.options.onOpen);
if (openfunc != 'number'){
new Event(e).stop();
if( == i){ = null;
obj.closing(this.href, i);
}else{ = i;
obj.opening(this.href, i);

and at the end of the class the two functions are added :

opening: function(e,i){
this.fireEvent('open', [e,i], 10);
closing: function(e,i){
this.fireEvent('close', [e,i], 10);

A structured calling script can be like

<script type="text/javascript">
function OpenDiv(e,i){
$('ac').set('text', 'You open enter '+e+' of '+i).highlight();};
function CloseDiv(e,i){
$('ac').set('text', 'You closed enter '+e+' of '+i).highlight();};
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:110, border:2,
onClose: function(e,i){CloseDiv(e,i);}

When initializing menu, if selected li is 0, the initial js is faulty. Only the reset need to be activated if open value is not null.

if($type( == ‘number’){
} // else {
//if( =={
// this.reset(i);

The running demoshop include here the modified code in a complexe integration.

Here the full script available as zip.

081129 M

Ce contenu a été publié dans Studies, avec comme mot(s)-clé(s) , , , . Vous pouvez le mettre en favoris avec ce permalien.