Unity Hamburger Menu – Silicon Prairie Dog

So one the assumptions of my Garden App is that it will require a good old hamburger menu. To my knowledge there is no default Unity Hamburger Menu so I will have to make one. It took some serious battling on this one because apparently it is not normally done.

I had it almost working for several hours as the thing bounced when I opened it, just a little before I stumbled on the setting that fix it in a Youtube video doing something very similar. We both used the animator to solve the problem. Here is the link to his video.

Honestly, what I did and what he did is close enough that I don’t mind citing him just in case there is any issue with credit. If you have an issue, you can probably find the solution in that video. Mine is more to the point and framed slightly different and we did our animations backwards of each other but if you want to see it done then check out his video with those notions in your head. I wish I had found it earlier because I think it would have saved me a couple of hours of tinkering.

The biggest influence was I adjusted my animator to behave similarly to how they did it as I thought it a more elegant solution than my clunkier one.

I would suggest you follow his code in adding the null checks. I was just trying to keep things simple for mine and I knew there would not be a null condition but in production code you would want to do that. Also he solved the problem with the animation I was having bouncing.

With all that said and some acknowledgements, lets dig into how I created an Unity hamburger menu.

Initial Setup

Like all the tutorials about Unity I have made, lets start with a project. Open Unity Hub and select New.

Next create the project.

Next we need to create two folders, one for Scripts and one for animation.

With all that out of the way, lets dig into the panel that will make up our Hamburger Menu.

Hamburger Menu

First, lets get the panel in place that will be the container part of our hamburger menu. Create a UI Panel in the Hierarchy tab.

You should name it something useful, like Hamburger Menu or something. Me, I am just keeping it as panel since it is the only thing being done in the project.

Next lets get looking head on to the panel. Select the panel in the Hierarchy tab. Within the scene tab, press f to focus on the panel. Then press the 2D button to flatten us out to the 2D view.

We have the panel spanning the length of the screen. If for some reason yours does not, don’t freak out. We are going to move it.

Take the panel a reshape it to its desired dimensions. You can do this on any access you will only have to tweak the animation on where it goes into hiding when not wanted.

Now create a button and copy it throughout the panel.

Now it is time to select the panel because we are going to animate.

Hamburger Menu Animation

First things, first we need to open up the Animation tab. We need to press the Create button. If you have something go wrong, make sure you have the panel selected.

At the save dialog, make sure you are in the Animations directory we created earlier and name your animation. Since mine is actually hiding the animation, I named mine HamburgerHide.

With the animation created, lets animate it. Press the record button in the Animation tab.

Since our panel is in its visible form, we don’t have anything to animate at the 0 mark. Drag it to the final frame of the animation. I chose 0:30 because that is my default animation for my tutorials. It is all about how long you want the animation to run.

Now drag the Hamburger menu using the handles to keep the axis stable. Drag it out of view. In my case to the left.

Before we leave the animation to move on the animator part, we need to kill its loop time so it does not repeat.

Select the animation in the Project tab and uncheck the Loop Time in the inspector tab.

Animator Time

So we have completed the animation but now we need to get it all applied so we can trigger it. If I had to do the research on this again, I would have probably tried using a trigger rather than a boolean condition then tied it to the button. But I digress, select the Animator tab.

We need to create a new state of idle so we will right click on the grey grid of the Animator tab and select Create State -> Empty.

Then rename it to idle in the Inspector.

Right click on it and set it as the default state.

With that done, we need to set a parameter.

Click the small plus in the Animator’s parameter area.

I set a boolean and named it Visible. Next we need to create a transition between idle and Hamburger Hide.

After that, click on the newly made arrow.

We want to kill off the exit time and add a condition which is Visible false because if you can’t see it, it must be hidden and this is the hidden animation.

Next we need to create the Hamburger Show state. So right click on Hamburger Hide and select copy. Then go into grey grid and select paste to copy it.

With the new state in existence, we need a transition of the animation from Hide to Show so make a transition between the original HamburgerHide and its copy.

Like before, we need to turn off the exit time, we want to animation to react to us and not complete, and add a condition. This time we want the condition to be true because this is the exposed one.

With that out of the way, lets select the Hamburger Hide copy.

We need to do two things. One is to rename it to HamburgerShow in the Inspector tab and the other and this is super critical, set the speed to -1.

This speed variable is the thing that fixed my bounce. I have no idea on why it did. My original design was a bunch more complicated with multiple transitions bouncing around. It would have probably doubled the length of this tutorial so this speed screw you that Unity dealt, did pay multiple payoffs as this is the section that I really cribbed from the video. Mine is in a different order because of how we handle the variables. This will be reflected also in the code as I negate things they don’t so if you are going through both tutorials, know this is a tripping point between us.

Lets start wrapping this up with making a transition between the Hamburger show and the idle.

Just like the previous ones, we need to select the transition arrow.

We want to turn off the Exit time and set the condition to true.

Not exactly the best picture. You want the conditions to look like we have it but the Exit Time needs to be turned off.

With all that done, we need to select the panel object in our Hierarchy tab.

Make sure everything looks right.

Add a script component to the panel using the Add component button. For some reason, I don’t have a screen shot of this. We will name it HamburgerMenuController.

Lets look into the scripting.

Unity Hamburger Menu Script

In my situation, my script ended up outside my Scripts folder. It is easy to fix. Select the HamburgerMenuController in the Project tab and drag it into the scripts folder.

Now navigate to the Scripts folder in the Project tab.

Finally, double click on the script to open it up in Visual Studio.

Our script is pretty easy. You can delete the start and update stubs that were given to you, if you want.

using UnityEngine;
 
public class HamburgerMenuController : MonoBehaviour
{
    public GameObject hamburger;
 
    public void setHamburgerVisible()
    {
        Animator animator = hamburger.GetComponent<Animator>();
 
        bool isVisible = animator.GetBool("Visible");
        Debug.Log(isVisible);
        animator.SetBool("Visible", !isVisible);
    }
}

Wrapping Up Unity Hamburger Menu

With that done, save the script and go back into Unity Editor. Select the Panel object in the Hierarchy tab. In the inspector make sure the Hamburger Menu Controller is attached to the Panel.

Switch back to Scene view by clicking on the Scene tab.

We need to create a button. This button will call the animation to show or hide the menu. This would normally have our horizontal lines indicating that it is a Hamburger Menu but I am feeling lazy and just left it as a button. Anyway in the Hierarchy tab create a UI -> Button.

Make sure you have the button selected in the Hierarchy tab and find the On Click part of the button script. Add a event using the small plus.

This is easy to do but hard to explain. With the button selected in the Hierarchy tab, drag and drop into the On Click Event the Panel object.

In the combo box with no function assign it the function we wrote in the script.

We are in the home stretch now. Select the Panel object in the Hierarchy. You will notice in the Hamburger Menu Controller, the Hamburger is None. We need to drag and drop the panel into it. This because of the public variable we had in our script. We need the animator attached to the Panel.

Finally after all that work, we have it done. Give it a go and you should see the menu go in and out.

This wraps up this tutorial, hopefully everything is working for you. Feel free to drop some comments down below and enjoy your new Unity Hamburger Menu.