Add a Slide Out Sidebar Menu in iOS Apps

Last updated on July 31st, 2016 at 11:13 am

In this tutorial, I will show you how create a slide-out (side) menu in iOS application,  similar to the one you will see in Facebook or Gmail application . In this post i am using custom library for implementing side menu which is MF SIDEMENU .

Step 1 : 

Download library from Github and extract the zipped file. Copy all the classes to your new project .

Classes of MFSideMenu will include (Both .h / .m files) :-

1. MFSideMenu
2. MFSideMenuContainer
3. MFSideMenuShadow
4. UIViewController+MFSideMenuAdditions

Add these classes to your new project.

OR

You can add pod 'MFSideMenu' to your Podfile.

For adding pod

1. Open terminal .
2. Write cd space DRAG FOLDER TO TERMINAL.
3. Write the following command in the terminal .
4. pod init // This will initialize the pod.
5. open -a Xcode Podfile // This will open the PodTextFile.
6.  Then add the following code in the text file  pod 'MFSideMenu' .
7. Write pod install in the terminal
8. Wait for few minutes ,After that Pod installation is been completed.

After pod installation , a workspace is created for your project . Start using workspace instead of the project file .

You can either use pod or can copy files to the Xcode itself.

Step 2 :

Create a new objective -c class which will contain the list of items of side menu.

1. Press cmd + n  to create a new objective c class and name it SideMenuViewController
2. Make the class of type UITableViewController
3. Add the following code in .h file of the SideMenuViewController.
4. Create a global array which will contain the list of items go the sideMenu.

Step 3:

In the .m file of SideMenuViewController

1. Import the MFSideMenu.h
2. Add the items in the global array and create a tableView which will hold the list of items of the sideMenu.
3. Add tableView`s data source to display data in your menu .
4. Code of .m file of SideMenuViewController will look like this :

Step 4:

Go to AppDelegate

1. Import ViewController.h and SideMenuViewController.h
2. Add the following code to add SideMenuViewController to mainController.(In this controller i am adding SideMenuViewController to)
3. Import MFSideMenu.h in AppDelegate.h file.
4. Code for AppDelegate.m is this .

Step 5 :

Go to ViewController.m, as i dont want to see navigation bar at this time , I add the following code. You can modify this code accordingly your requirements.

 

Step 6 :

Swipe Right to see SideMenu in your project.

You can also show SideMenu on button`s click by adding this code in UIButton Action  :

[self.menuContainerViewController toggleLeftSideMenuCompletion:^{}];

Thank You 🙂