How to Add Slide-out Menus to Mobile Apps

“Slide-out navigation consists of a panel that 'slides out' from underneath the left or the right of the main content area, revealing a vertically independent scroll view that serves as the primary navigation for the application.”

When you look at successful mobile applications like Facebook and Twitter, you'll notice they use slide-out menus. It’s a great way to give your application a fresh look and feel, as well as more navigational capabilities.

In this article, Xcode developer Hardi B. Salih shares a step by step process on how to add a slide-out menu to your mobile app.

SWRevealViewController, by John-Lluch, is a well-known library for slide-out menus. I've watched their videos and tutorials and most of them are useful. However, they are difficult to understand. Here, I will share the source code for slide-out menus with Xcode. In the future, I would like to provide more articles as tutorials for new features.

... Hardi B. Salih

# note : You will also be learning how to add and use Objective-C in your Swift application.

Create a new Xcode project.

For template, choose Single View App.

Product Name

For Product Name, select Slide-out Menu.

Choose your organization name and team and save to your computer.

Download Assets:

Find the source code and assets here:

Download assets with SWRevealViewController or get the file from github.

Drag and drop SwrevealViewController.m and SwrevealViewController.h into your project.

Choose Create Bridging Header

Import...

Import SWRevealViewController by adding this line of code:

#import "SWRevealViewController.h"

You can use the assets we have provided, or use your own Ideas to create the interface for your project….

Add ViewController . . .

Add ViewController. In this case, it is Right and Left. From ViewController, connect them inside (Main.storyboard ).

You will find three different Segue Identifiers inside the library. When you make a segue to each view controller as “reveal view controller set controller,” you should identify this segue by adding the identifier the SwrevealLibrary has provided.

Here are the Identifiers in SWRevealViewController.m :

// pragma mark - SWRevealViewControllerSegueSetController segue identifiersNSString * const SWSegueFrontIdentifier = @"sw_front";For the Front ViewController use “sw_front”.(You must have this inside your project.)NSString * const SWSegueRearIdentifier = @"sw_rear";For the left ViewController Use “sw_rear “NSString * const SWSegueRightIdentifier = @"sw_right";For the right ViewController use “sw_right”

The Identifiers...

Now we are set to add the @IBOutlet for the right and left button inside FrontVC.

Finally...

Set up the function for Right and Left Button and add them to the Viewdidload.

Right Menu Code...

override func viewDidLoad() { super.viewDidLoad() setUpRevealRightView() } func setUpRevealRightView() { rightBtn.addTarget(self.revealViewController(), action: #selector(SWRevealViewController.rightRevealToggle(_:)), for: .touchUpInside) self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer()) self.view.addGestureRecognizer(self.revealViewController().tapGestureRecognizer()) }

Left Menu Code...

override func viewDidLoad() { super.viewDidLoad() setUpRevealLeftView() } func setUpRevealLeftView() { leftBtn.addTarget(self.revealViewController(), action: #selector(SWRevealViewController.revealToggle(_:)), for: .touchUpInside) self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer()) self.view.addGestureRecognizer(self.revealViewController().tapGestureRecognizer()) }

You can customize the side of the Slide out View Controller Right and Left by using this simple function for the left side.

Front View Code...

Here we ask the size of left side menu be only 100, as you can see above.

import UIKitclass LeftVC: UIViewController {override func viewDidLoad() { super.viewDidLoad() setupRevealView()}func setupRevealView() { self.revealViewController().rearViewRevealWidth = 100 }}