Recreating the Awesome AirBnb iOS7 Menu Animation for the Web

Have you seen AirBnb’s new iPhone app they redesigned for the iOS7? If you are using an iPhone, I suggest you download the app and play around with their side menu. The awe-inspiring animation had me stunned when I first saw it and so I decided that I would try my best to recreate a similar experience, but for the web. The result was this jQuery plugin I made called Fly Side Menu.

Fly Side Menu will let you add the same side menu animation on your website without all that technical mumbo jumbo. Without further ado, let's dive into what the plugin is and how it functions.

Note: This plugin has been tested on Chrome, Firefox, Safari, both on desktop and mobile. This has not been tested on IE.

Recreating the Awesome AirBnb iOS7 Menu Animation for the Web


Using Fly Side Menu

How does it work?

Since the animation consists of many moving parts and in order to make the experience as smooth as possible, I decided to animate everything using CSS3 rather than jQuery itself.

Basically, the plugin will grab all the content, clone it and move everything to the side menu container and attach it to the left hand side (or in any position) of the document out of the view port. Once the toggle function is executed, the whole wrapper will move to the right showing the previously attached side menu. While the container is moving, the CSS is also skewing, rotating and scaling the whole container in order to replicate the 3D effect you see in the AirBnb’s app.

Once the animation is done, the menu items will then fly in from the left creating multiple layers of animation. After that, I added a click target to the whole container so that the user can go back by simply clicking the moved container. A similar behavior is also present in the AirBnb’s app as well.

With this concept, I was able to recreate a similar experience using CSS3 and jQuery. Now, let’s see what options I have put in place for you to play around with.

How-Tos

Since this is a jQuery plugin, be sure to include the latest jQuery library available here, jQuery.fly_sidemenu.js and fly_sidemenu.css which can be found here, in to your document’s <head&gt;.

Once that is done, prepare your HTML markup like this:

HTML:

<body>
  ..
  <ul class="sidemenu">
    <li><a href="...">...</a></li>
    <li><a href="...">...</a></li>
    <li><a href="...">...</a></li>
    <li><a href="...">...</a></li>
    <li><a href="...">...</a></li>
  </ul>
  ..
</body>

These contents inside the side menu list will be used to populate the side menu and displayed when the user activates the side menu. Now, all you have to do is call the function on the side menu list like this:

JS:

$(".sidemenu").fly_sidemenu({
    btnContent: "=",.
    position: "left",
    customSelector: "li",
    hideButton: false
  });

The script will then grab and hide all the content in the side menu list and generate a new side menu according to the options above. Here are a few options you can play around with:

  • btnContent: You can change the icon of the auto generated side menu button by defining yours here. You can use strings or any HTML tags for this option. The default value is =.
  • position: This option will let you define where the side menu will appear on the page. Acceptable options are left, right, top and bottom. The default value is “left” which is the same as what you see in the AirBnb’s app.
  • customSelector: In case you are not a fan of using lists as your navigation, you can define your custom CSS selector here. For example if your HTML markup is like this:

    HTML:

    <body>
      ..
      <nav class="sidemenu">
        <div><a href="http://www.bucketlistly.com">BucketListly</a></div>
        <div><a href="http://www.mycolorscreen.com">MyColorScreen</a></div>
        <div><a href="http://www.thepetedesign.com">The Pete Design</a></div>
        <div><a href="http://www.thepetedesign.com/#design">Free jQuery Plugins</a></div>
        <div><a href="http://www.blog.bucketlistly.com">My Blog</a></div>
      </nav>
      ..
    </body>
    

    The option here would be div which will overwrite the default behavior of using li to populate links in the side menu.

  • hideButton: Last but not least, you can trigger the side menu manually (more info below) with this plugin and If you decide to do that, make sure to set this to true to disable the auto generated button.

Public Method

$.fn.toggleMenu()
As mentioned earlier, you can activate the side menu manually by calling the toggleMenu() function like this:

JS

$(".sidemenu").toggleMenu();

This public method will let you create your own buttons and place them anywhere you like and still get the same function as using the auto generate button. Since this is a toggle method, simply call the same function again to close the side menu.

Conclusion

Pretty neat right? Now you will have a very attractive side menu animation like you see on the AirBnb’s app, but right on your website. Once again, if you would like to show us what you have implemented using this plugin or if you have any questions/comments/suggestions, feel free to let me know in the comments below.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.