Hamburger Menu by Simple Javascript and CSS Transition

Facebook app for iPad is famous for it left slide navigation. We can unveil left side menu by tapping three horizontal lines on the top left corner. Some people called it hamburger menu, or three stripes menu.

With animation, the left menu pushing the content to the right.

How we can reproduce this by using simple javascript and simple css, without jQuery, without JavaScript framework and also cross browser, working on smartphone browser too?

Actually it just basic CSS to manipulate ‘position’ and ‘left’ properties.
First you can copy this code below: