Creating a Sliding mobile menu in Unity
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.
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.
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.
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/