How to Create a Hamburger Menu to Navigate Screens
High level resolution steps
- I have Used Variables and I’ve Added Hamburger Icon, Rectangle and Labels
Detailed resolution steps
Step 1: Add a Hamburger Icon on the Screen
Here I’ve Inserted a Hamburger Icon and Set a Variable on the Select property of the Hamburger Icon.
Step 2: Insert a Rectangle and on the visible Property of the Rectangle Give the variable name “ ShowRectangle” and Add Labels inside the Rectangle to give Screen Names in the Text Property of labels.
On Visible Property of Labels Give Variable Name “Show Rectangle”
Now When we Click on Hamburger menu The rectangle with screen name Labels will appear
Step 3: Now Insert another two Labels for subsection of screen, here For Arithmetic Screen Im taking
Calculator and Expressions to navigate each specified Screens.
For This On select Property of Arithmetic screen Label, set another Variable, here I’m Using
| Set(showCalci,!showCalci) |
Step 4: Now On Visible Property of Calculator Label and Expressions Label Give Variable Name.
On select Property of Each Label Give Screen Name Navigation and Set Variable to False
For Calculator Label:
| Navigate(‘Basic Math Functions PracticeCalculator’,ScreenTransition.None);Set(showCalci,false);Set(ShowRectangle ,false) |
For Expressions Label:
| Navigate(‘Variables For Arithmetic Expressions’,ScreenTransition.None);Set(showCalci,false);Set(ShowRectangl e,false) |
Output
When you click on Hamburger menu you will get list of Screen Names and When You select that it will
navigate to that selected screen.
