Path App Fly-out Menu using CSS3 & jQuery

December 17, 2011 by Jacob Lowe | 1 Comment

Hey Bloggies,

So I’m a huge app consumer and love to see what new apps have to offer. I gladly downloaded an app called Path which is a sudo social network. I am a huge sucker for great ui design so I fell in love. The thing that really stole my focus was the awesome fly-out menu that is in the bottom left corner. This button is the main means of navigation in this app. It had not only some good features but also had smooth animations as well. Me being a noob to application development, googled if it was made in phone gap due to it heavy customization and no it wasn’t. It ‘apparenly’ has too advanced animations.

Demo

Me being an avid advocate for HTML 5 felt that the thought of too advanced for HTML 5 felt like a challenge. So I took it upon myself, along with some other in the community, to build this animation on web technologies. Kinda disappointed by other demos, my goal was mobile compliance. So the hacking ensued.

Setup

First the major hurtle was making a layout of the menu look like the one in Path. I was challenged to make the animation so the scale and quanity was not a big issue to me. I decided a larger scale with less buttons could get the point across. Instead of opting in to a nice math battle with sin and cos for the circles I cheated by laying out the buttons on Photoshop.

Once I had some simple parameters for top and left positions I did some minor number crunching to figure in the offset to the center of the buttons because positioning is usually based off the top left.

HTML

<div id="circle-mod">
    <div id="container-circle">
        <div id="button-1" class="btn"></div>
        <div id="button-2" class="btn"></div>
        <div id="button-3" class="btn"></div>
        <div id="button-4" class="btn"></div>
        <div id="button-5" class="btn" ></div>
        <div id="base-button"></div>
    </div>
</div>

Finally after calculating the buttons positions I had end points for each button. I set up my HTML structure (above) and set some CSS for the initial positioning (below) of the buttons. After I the added the end positions with a added class called open. By default the buttons will be in the center of the base button. With a class added the buttons will move to their ending position as open. To make the transition I added the css3 property transition, and of course added vendor prefixes as well.

CSS

/* Move whole container to bottom left corner */
#circle-mod{
    position: absolute;
    bottom: 0;
    left: 10px;
}
/* Make a relative container */
#container-circle {
    position: relative;
    height: 100px;
    width: 100px;
}
/*Create my base button*/
#base-button {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50px;
    height: 80px;
    width: 80px;
    background: #ddd;
    /* Some extra styles, add -webkit prefix to work on most mobile browsers */
    box-shadow: 0px 1px 3px rgba(0,0,0,.5);
    padding: 0;
}
/* Generic button and center position */
.btn{
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    top: 15px;
    left: 15px;
    background: #ccc;
    /* Essential to the animation */
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -o-transition: all 250ms;
    -ms-transition: all 250ms;
    transition: all 250ms;
    /* Same as above */
    box-shadow: 0px 1px 3px rgba(0,0,0,.5);
}

#button-1.open{
    top: -125px;
    left: 25px;
}

#button-1.open.clicked{
    top: -135px;
    left: 15px;
}

#button-2.open{
    top: -105px;
    left: 80px;
}

#button-3.open{
    top: -75px;
    left: 125px;
}

#button-4.open{
    top: -30px;
    left: 160px;
}

#button-5.open{
    left: 175px;
    top: 25px;
}

Next I needed a way to add apply classes in an order manner so that it would look like a sweeping manner. Javascript, more specifically Jquery, was a simple answer to this. I threw a toggle on the main button which would init a each loop to run through all the buttons. For the asyncronous application of the class to each button. I set a timeout around the add class function. Each timeout fires a little later then the last due to multplying a delay against the index of the btns.

Javascript

// Delay in ms, delayTime for inside set timeout, array of btns
var delay = 40, delayTime, btns = $('.btn');
//Select base button and toggle - click is default
$('#base-button').toggle(function(){
    // Loop through buttons
    btns.each(function(i){
        //Declaring the element
        var ele = $(this);
        //Multiple the delay time by the index of the button
        delayTime = i * delay;
        //Timeout set to delaytime
        window.setTimeout(function(){
            //Add Class open
            ele.addClass('open');
        }, delayTime);
    //Close each loop
    });
//Toggle on next click
}, function(){
    //Closing Loop Next paragraph
})

With the first loop applied I tested the page. Success!. It looked nice and after some minor tweeks to the timing it was nearly perfect.

I felt if I copied my code from the first toggle it would finish the full effect. Nope it looked nice but the animation was off because it looped through the buttons in the reverse order in the actual animation. With jQuery this a simple fix.

//Full code for copy pasters
$(function(){
    //Comment for this section above
    var delay = 40, delayTime, btns = $('.btn');
    $('#base-button').toggle(function(){
        btns.each(function(i){
            var ele = $(this);
            delayTime = i * delay;
            window.setTimeout(function(){
                ele.addClass('open');
            }, delayTime);
        });
    //Now the next toggle
    }, function(){
        //Get reversed array of btns
        $($(btns).get().reverse()).each(function(i){
            //This is the same
            var ele = $(this);
            delayTime = i * delay;
            //ditto
            window.setTimeout(function(){
                //Now let remove the class 'open'
                ele.removeClass('open');
            }, delayTime);
        });
    });
})

If these are done all according to above you should have a fully functional fly-out menu. Now for the demo look at the source code. Most of it is in here but I added alot of extra styles just for look. Also check out the CSS transition timing method put on the buttons for a bit of a ease.