iPhone sliding menu (facebook style)

A while back I wrote about the sliding menu in the Facebook application. I was truly impressed by their application and especially the sliding menu. One of the major problems with the iPhone UI in my opinion is the lack of intuitive ways to present navigation to many functions for a single view. The sliding menu is the best implementation that adress that problem I’ve seen so far.

I actually went about building a sliding menu control with the intent to put the code on my blog. However, I didn’t finish it because I was still busy with my real job at Avantime and the iPhone application I was working on. But yesteday I got an email from a fellow iPhone developer asking if he could get some pointers in how to go about building sliding menu and to be honest I had sort of forgotten about the project all together. I spent a few hours today completing the code and adding comments to make it fit for another iPhone related blog post.

The idea behind the sliding menu is to use an UIScrollView to host the buttons and listen to the scrolling events to find the content offset of the UIScrollView and show/hide some indicator to inform the user that he/she can actually scroll the button row. I’ve recorded a short demo here:

Amazingly beautiful colors init?

The sliding menu control is initialized with a frame dictating the size of the control, the background color and an array of UIButtons. I didn’t implement the “can scroll left/right” indicator but the function exist and prints messages to the log.

Download the sample project containg the sliding menu control

19 thoughts on “iPhone sliding menu (facebook style)

  1. Great tutorial! Help me a lot~ Many thanks~

    In advance, could you teach me how to move each button to the exact perfect and accurately location? Like iPhone Home Layouts – they can move to the specific place where they should be going to.

    Like if I touch “button 2″, and “button 2″ move gracefully and automatically to the perfect location.

    thanks~

    KTK.

  2. How would you add multiples of this control? When I add a new instance things go screwy in a hurry.

  3. Thanks buddy i am very new to iOS development and searching for the same.. Keep continue to post such good articles.

  4. Do you have a more recent code example, the one you have for download doesnt seem to allow scrolling!?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>