Now we have all the elements in place for our menubar, all that's left to do is to animate it. The idea is that when the user hovers over the menubar, the width of the left hand section of the blob increases, making it appear to expand. The right hand section of the blob, being left-floated, will be shunted across the screen by the left hand section. When the transition is complete, the menu will appear.

1. If you don't already have it, download version 1.1 of Mootools from mootools.net/download.

2. Now all we need is the script to create the animation. I've reproduced it here, and broken it down into several sections to try and explain what's going on.

First things first - attach an event so that when the page is ready, the effect kicks in:

window.onDomReady(function(){
  initLogo();
});
We need to expand the menu when the mouse enters the blob area and contract it again when the mouse leaves the blob. The previous version of this script made use of mouseover and mouseout events to determine when this occurred. However, thanks to a phenomenon known as event bubbling, a cacophony of mouseenter and mouseleave events are triggered as the user moves between different elements within our div. Fortunately v1.1 of Mootools has implemented "mouseenter" and "mouseleave" events. The mouseenter event, when attached to our menubar, ensures that the function which expands our menubar is only triggered when we enter the blob area, and not as we move around between elements within it. Similarly the mouseleave event is triggered only when we move outside our blob area.

Take a look at Quirksmode's description of event bubbling which covers this phenomenon in greater detail.

Now the heart of the script - the initLogo() function. Firstly we define the transitions that form the effect; menuAppear displays the menu and menuDisappear hides it again, titleFade fades the logo, and blobStretch expands the width of the left hand section of the blob.

initLogo = function(){
  var menuAppear = new Fx.Style('blobmenu', 'opacity', {duration:200, wait:false}).set(0);
  var titleFade = new Fx.Style('bloblogo', 'opacity', {duration:500, wait:false});
  var blobStretch = new Fx.Style('blobleft', 'width', {duration:1000, wait:false,
    onComplete: function(){
      if($('blobleft').getStyle('width').toInt() > 400) {
        $('blobmenu').setStyle('display', 'block');
        menuAppear.start(0.99); // not quite 1 because of Safari
      }
    }
  });
  
  var menuDisappear = new Fx.Style('blobmenu', 'opacity', {duration:200, wait:false,
    onComplete: function(){
      $('blobmenu').setStyle('display', 'none');
      titleFade.start(1);
      blobStretch.start(106); //change this figure to the original length
    }
  });

The final part of the initLogo() function is the attachment of the mouseenter and mouseleave events.

  $('bloblogo').addEvent('mouseenter', function(event){
      titleFade.start(0.1);
      blobStretch.start(440); //change this figure as desired
    }).addEvent('mouseleave', function(event){
      menuDisappear.start(0);
    });
}

And there you have it... one swanky Mootools effect! Take a look at the finished product.