Coolest Dojo Menu Ever

I’m currently playing around with some dojo features for a project that I’m currently working on. To be more precise I had to create a menu that drops down from the top to the bottom of the screen simulating gravity. Actually, the menu looks really cool ;-).

So, here is what I did:

/*
 Copyright (c) 2010, web-punk.
*/

dojo.require("dojo.fx.easing");
dojo.require("dojo.window");

var menuItems = [["First", "/someurl/First"],
                         ["Second", "/someurl/Second"],
                         ["Third", "/someurl/Third"],
                         ["Fourth", "/someurl/Fourth"]]; 
var vs = dojo.window.getBox();
var offset = (vs.w - (vs.w / menuItems.length)) / menuItems.length; 

dojo.addOnLoad(function(){
   // create menu items
   var lnode = dojo.byId("dropmetest");
   for (var i = 0; i <= (menuItems.length - 1); i++) {
     var curnodeID = "di" + i;
     var xpos = offset * (i + 1);
     var item = "<div id='" + curnodeID + "' class='dropitem' style='left: " + xpos +  "px;'><a href='" + menuItems[i][1] + "'>" + menuItems[i][0] +   "</a></div>";        
     lnode.innerHTML = lnode.innerHTML + item;
   }
   // start animating the menu in 1 second
   setTimeout("animDropper()", 1000);
});

function animDropper() {
   var anims = [];
   for (var i = 0; i <= (menuItems.length - 1); i++) {
     var curnodeID = "di" + i;
     var xpos = offset * (i + 1);
     var naptime = i * 700000;
     anims.push(dojo.fx.slideTo(
         {node: curnodeID, 
          duration: 2500,
          // make sure that not all menu items 
          // drop in at same time
          beforeBegin: function(){
             for (var n=0; n<naptime; n++) {
                n = n + 0; // do nothing
             }
          },                         
          top: (vs.h - 54 ),
          left: xpos,
          easing: dojo.fx.easing.bounceOut
   })
   );
 }
 dojo.fx.combine(anims).play();
}

The dojo.addOnLoad() function generates all the necessary div-Tags for the menu items and makes sure that they are positioned along the x-axes using the width of the browser window. Furthermore, it calls the animDropper() function with a delay of 1 second (this is simply to get the users attention before the menu appears).

The animation itself is defined in the animDropper() function. Should be pretty straight forward if you are familiar with dojo animations.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share with Stumblers
• Tweet about it