Web and Mobile Apps Dev

I have been playing around with MooTools recently and came up with an idea to allow users to change the orientation of the menu for my updated site with animation. MooTools is an Object Oriented JavaScript framework similar to jQuery. The main reason I chose this framework instead of jQuery is that it can easily create customized animations. Although I’m still learning how to use MooTools’ full features, I wrote a HTML page that toggles between vertical and horizontal menu with custom animations just by using MooTools framework. Note that this is a prototype to the upcoming updated site menu. It only contains the background color and doesn’t contain any content. Here is the MooTools code for the page:

window.addEvent("domready", function() {
         $('hori').setStyle('opacity','0');
         $("change").addEvent("click", function() {
             $('change').setStyles({
                 'visibility':'hidden',
                 'opacity':0
             });
             var changeMenu = new Fx.Tween($('menu'));
             changeMenu.start('width','50px')
                 .chain(function() {
                     changeMenu.start('height','400px');
                 })
                 .chain(function() {
                     changeMenu.start("left", "10px");
                 })
                 .chain(function() {
                     changeMenu.start("top", "40px");
                 })
                 .chain(function() {
                     $('hori').fade('in');
                 });
             return false;
         });
          $("hori").addEvent("click", function() {
             $('hori').setStyles({
                 'visibility':'hidden',
                 'opacity':0
             });
             var changeMenu = new Fx.Tween($('menu'));
             changeMenu.start("top", "50px")
                 .chain(function() {
                     changeMenu.start("left", "100px");
                 })
                 .chain(function() {
                     changeMenu.start('height','50px');
                 })
                 .chain(function() {
                     changeMenu.start('width','600px');
                 })
                 .chain(function() {
                     $('change').fade('in');
                 });
             return false;
         });
      });

Notice that I used CSS property names and MooTools functions to create animations. You can view the whole source code by right-click the prototype page since it is just a plain HTML and JavaScript page.

I created this prototype with the help of MooTools 1.2 Beginner’s Guide and MooTools Docs.