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.


#import <UIKit/UIKit.h>
@interface SideMenuViewController : UITableViewController
{
NSArray *MenuArray;
}

view raw

gistfile1.txt

hosted with ❤ by GitHub

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 :


@implementation SideMenuViewController
{
UITableView *tableView;
}
#pragma mark – Did Load
#pragma mark –
-(void) viewDidLoad
{
[super viewDidLoad];
MenuArray =[NSArray arrayWithObjects:@"Profile",@"Friends",@"Status",@"Settings",@"Logout",nil];
self.tableView.backgroundColor = [UIColor whiteColor];
self.tableView.alwaysBounceVertical = NO;
[self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
}
#pragma mark – UITableViewDataSource
#pragma mark –
– (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return MenuArray.count;
}
– (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
cell.backgroundColor=[UIColor clearColor];
cell.textLabel.textColor=[UIColor blackColor];
UIView *lineView=[[UIView alloc]initWithFrame:CGRectMake(30, 0, 270, 1)];
lineView.backgroundColor=[UIColor whiteColor];
[cell.contentView addSubview:lineView];
}
cell.textLabel.text = [MenuArray objectAtIndex:indexPath.row];
return cell;
}
– (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 40;
}
@end

view raw

gistfile1.txt

hosted with ❤ by GitHub

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 .


#import "AppDelegate.h"
#import "ViewController.h"
#import "SideMenuViewController.h"
@interface AppDelegate ()
{
UINavigationController *navigation;
}
@end
@implementation AppDelegate
– (void)applicationDidFinishLaunching:(UIApplication *)application
{
ViewController *viewCtrl=[[ViewController alloc]init];
navigation=[[UINavigationController alloc]initWithRootViewController:viewCtrl];
navigation.navigationBar.barTintColor = [UIColor colorWithRed:72.0/255.0 green:144.0/255.0 blue:226.0/255.0 alpha:1];
SideMenuViewController *leftMenuViewController = [[SideMenuViewController alloc] init];
MFSideMenuContainerViewController *container = [MFSideMenuContainerViewController
containerWithCenterViewController:navigation
leftMenuViewController:leftMenuViewController
rightMenuViewController:nil];
self.window.rootViewController=container;
}

view raw

AppDelegate.m

hosted with ❤ by GitHub

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.


#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
– (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.navigationController.navigationBarHidden = YES;
self.view.backgroundColor = [UIColor whiteColor];
self.view.frame = [[UIScreen mainScreen] bounds];
}

view raw

gistfile1.txt

hosted with ❤ by GitHub

 

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 🙂