Creating a Sliding mobile menu in Unity

Published in

Developer’s Arena

4 min readDec 4, 2019

Often you hay have seen sliding of UI panels when navigating across an app. Like clicking on the settings icon slides out the home screen and slides in the settings menu.

In this article, we will be creating a simple yet scalable sliding menu system that I am personally using in most of my Android games.

I will be using DoTween for making animations. So you need to install DoTween package in your Unity Project

Creating the Home and Settings Menu

To begin with, I have created a scene with two UI elements (Home and Settings menu) covering the complete screens as shown in the gif below.

The Home and Settings are two images covering the full screen containing elements like settings button, back button, and Labels.

Creating HomeUIManager and SettingsUIManager

Now we need to create UI Managers for each of the menu screens. In this case, we will have two Managers, each for Home UI and for Settings UI.

Create a script HomeUIManager.cs and paste the following code into the file.

Create a script SettingsUIManager.cs and paste the following code into the file.

After creating these scripts, attach the HomeUIManager.cs script to the HomeUI panel covering the full screen.

Also, attach the SettingsUIManager.cs to the Settings UI element.

Attaching SettingsUIManager.cs to Settings UI

Now click on the Play button and notice how the Home and Settings menu gets position itself side by side with the Home menu completely visible and the Settings menu hiding beyond the screen.

Settings and Home Menu placing side by side

Sliding Menu in Action

We have the Settings button in the Home UI. We will place the click action for the Settings Button in the HomeUIManager.cs file.

Add the following function to the HomeUIManager.cs file.

public void ShowSettingsMenu()
{
    Hide();
    SettingsUIManager.Instance.Show();
}

Now bind this function to the button on the click of the Settings icon in the Home UI.

Now bind the click event on the button to the ShowSettingsMenu() that we added in the HomeUIManager.cs script.

Binding the click event on Settings button

With this, you will now have a working sliding animation for showing the Settings menu.

Sliding out the Settings Menu

Now that we have the sliding in the settings menu, we will now update the code to navigate back to the Home screen with a sliding animation.

In SettingsUIManager.cs, add the following function

public void ShowHomeScreen()
{
    Hide();
    HomeUIManager.Instance.Show();
}

Bind the following function with the Back button on the Settings Menu.

Conclusion

Now that you have bound the buttons with the corresponding functions, its the time to test how the UI menu slides.

Click on the Play button and notice how the Home Menu slides out and the Settings menu slides in and vice versa.

The final result will look like

The above example is just a boilerplate code to implement Sliding Menus in Unity. This code is easily expandable and supports adding multiple more UI Screens like Store UI, Levels Selection Menu, etc.

For more such articles, visit www.knowledgescoops.com

Want to read more articles like this?
Follow me on medium @kunaltandon.ktConnect with me on LinkedIn:
https://www.linkedin.com/in/kunal-tandon/