As mobile apps become more and more complex, there is an ever increasing need to handle more complex navigation structures. The prevailing paradigm is the hamburger menu, which is usually displayed use either a button or right swipe, this is also referred to as a sliding menu. So popular this design strategy has become that Android made it a native control with the Navigation Drawer control. Implementing it in iOS is more complicated, but well worth it.

Do it yourself? Or download one

I have seen people implement this effect with great success but usually it follows a tremendous amount of effort. My recommendation is to use a library to achieve this effect. CocoaPods makes integrating a third party library extremely easy. If you search for “iOS Sliding Menu” in Google, you will find MANY sliding menu libraries, a testament to the popularity of this approach. For this tutorial we will be using ECSlidingViewController: https://github.com/ECSlidingViewController/ECSlidingViewController
Installing this couldn’t be easier. First create your project in Xcode. Our application will be a Single View Application. Note: I am currently using the Beta version of Xcode 6. My target for this app will be iOS 7
Once the application is fully setup, close Xcode and open a Terminal window. cd to the project directory and create a file called ‘Podfile‘. The contents of this file should resemble the image below: Note: Podfile is part of the Cocoa Pods dependency management system. This file dictates the dependencies of an application
Once you save the file, return to the terminal and run the following command: ‘pod install‘
Note: if you get a command not found it means Cocoa Pods is not installed. To install run the command: ‘sudo gem install cocoapods’
If this also does not work, I suggest referencing cocoapods.org for a complete installation.
Once the installation completes you will be instructed to open your app using the .xcworkspace file instead of .xcodeproj. Please be sure to do this as the workspace will ensure your pod dependencies are properly linked into your projects.

The Setup

The setup in this application is going to consist of a principal (root) view, two content views, and a menu. Below indicates the parent class for each:

• InitViewController : ECSlidingViewController
• MainViewController : UIViewController
• SecondViewController : UIViewController
• MenuTableViewController : UITableViewController

One of the great resources I had in learning this library was YouTube and Kyle Begeman tutorial series on this library: https://www.youtube.com/watch?v=tJJMyzdB9uI. However, the version he is using is out of date. The new version relies on the use of User Defined Keys for the initial view in the storyboard.
Here is a shot of all of my views laid out on the storyboard:
The key thing here is check the Identity Inspector for InitViewController, below: There are two user defined keys here:

• topViewControllerStoryboardId
• underLeftViewControllerStoryboardId

topViewControllerStoryboardId indicates the Id of the view on the storyboard which will represent the “top” content, or the initial content that will be shown. underLeftViewControllerStoryboardId indicates the Id on the storyboard which represents the left under view, this is the menu. In our example, MainViewController defines a StoryboardId for itself (on the Identity Inspector) of Main and MenuTableViewController defines a StoryboardId for itself of Menu. These are defined here to define the initial setup. There are many more keys which can be defined, see here.
Be sure to check the Use StoryboardId checkbox
If you run the application now within the Simulator, you will see your initial view, but you will not be able to access the menu. We will add those bits next.

Getting the Menu to open and slide

Go to the MenuTableViewController file and add the following method implementation and corresponding header file entry:
This method will be responsible for “unwinding” the menu slide segue which you will add in the next step.
Switch back to the Storyboard and add a UIButton to each subservient view (Main and Second). It can be placed wherever you like. Next, select the “Exit” icon for the View Controller (below):
Note: this icon may be green in your version of Xcode
With the “Exit” icon selected, Ctrl-Click and drag the unwindToMenuViewController action to the newly created UIButton. Below is a screen shot with the “Connections Inspector” visible and the Menu button selected.
Running the application now, will allow you to open the Menu by clicking the button. However, we are left without a way to close the menu and our menu items will not take us anywhere. Let us fix that.

Setting up Advanced Interaction

One of the big things missing is the ability to pan the sliding menu. It is very common for the user to be able to “drag” the menu from the side to reveal it, along with having a button. To accomplish this, we must add a Pan Gesture. This gesture is associated with each subservient view controller; it is added within the viewDidLoad method.
Note: This line of code must be added to each view in which you want the user to be able to slide the menu out. I recommend a base class
Note: To ensure that slidingViewController is a valid property you will have to import the “UIViewController+ECSlidingViewController.h” file
If you execute the application now you should be able to drag the menu out by swiping from the left screen edge toward the right edge. You can even drag it back to hide the menu. Pretty cool.

Adding Navigation

The last bit of this is to add a sliding segue to support navigation between the menu items and their corresponding views. To this, select the appropriate Table View Cell and Ctrl-Click drag to the appropriate View Controller. When you release select the sliding option (below):
Run the application and you should be able to navigate and show off your new sliding menu.

Conclusion

I have always find these kind of pull out side navigation very helpful for more involved applications. There are just certain limitations to tabs and a need for a different approach to navigation. I hope this was helpful, please let me know if anything didn’t work. The complete code can be downloaded here: https://dl.dropboxusercontent.com/u/13029365/SlideMenuTest.zip. Remember to open the .xcworkspace file.