Hamburger Menu Component
This component provides a Hamburger Menu system that you can customize to your own requirements.
When you select the Hamburger Menu component, it will automatically load a Preset style and populate your scene tree and your page with its own group of sub-navigation items that you can change, add or delete.
The Hamburger Menu component has 3 components in its sub-group.
- ‘Menu Button’: allows you to control the visual presentation, behavior and position of the Hamburger Menu on your screen. Note; this has the same behavior as a Toggle Button Component.
- ‘Anim in start’: this Rectangle component defines the origin of your Hamburger Menu animation. It can be resized and repositioned on your workspace. It is the starting point for a simple animation timeline.
- ‘Anim out end’: this Rectangle component defines the destination of your Hamburger Menu animation. It can be resized and repositioned on your workspace. It is the end point for a simple animation timeline.
Next is the ‘Menu Content’ which holds a sub-group of components that you can chose to customize, add or remove. The first group of components is used to control the presentation and heading of the navigation. Below that is a default list of buttons that you can add or subtract from, as well as customize their look and behavior. The Image, Text and Button components are all configurable using the same component properties as listed on their help page under Basic Components.
How to use the ‘Hamburger Menu’ component
Note: This video is made using Umajin version1.4.0.0. so there are some UI and naming changes but the basic functionality of using the Hamburger Component remains the same.
- The Hamburger Component is now under the Navigation Tab rather than a Layout Tab
- Components and Actions have new icons and are categorized differently
- Umajin now has a more comprehensive top File menu
Properties for Hamburger Menu Component
| Name | When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel. |
| Position and Size | Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height on order to create a Menu thats size will be maintained across devices. |
| Opacity | The opacity slider sets the transparency of the whole group of components that make up the Hamburger Menu component. 100 is maximum opacity. |
| Animation In | The properties below allow you to set the origin of the menu animation and how the animation will function. |
| Start Alpha | This sets the starting opacity/transparency of the whole menu component as it enters the page. 100 is maximum opacity. |
| Start Angle | This sets the starting angle of the entry point for the menu. The angle can be set at 0 for straight entry or use the + or – buttons to alter the angle of entry. |
| Alpha Tween | The hamburger menu offers a range of animations for how the alpha will be applied when the menu enters the page. |
| Angle Tween | The hamburger menu offers a range of animations for how the angle will initiate when the menu enters the page. |
| Position Tween | The hamburger menu offers a range of animations to usher the menu onto the page. |
| Duration | The duration sets the number of milliseconds that the hamburger menu will take to enter the page. |
| Origin X% | This sets the origin or pinpoint of the angle for the menu to begin its journey onto the page. Origin X sets the horizontal position. (0,0 would be top right hand corner) |
| Origin Y% | This sets the origin or pinpoint of the angle for the menu to begin its journey onto the page. Origin Y sets the vertical position. (100,100 would be bottom right hand corner) |
| Animation Out | The properties below allow you to set the destination of the menu animation and how the animation will exit. |
| End Alpha | This sets the ending opacity/transparency of the whole menu component as it exits the page. 100 is maximum opacity. |
| End Angle | This sets the final angle of the exit point for the menu. The angle can be set at 0 for straight entry or use the + or – buttons to alter the exit angle. |
| Alpha Tween | The hamburger menu offers a range of animations for how the alpha will be applied when the menu exits the page. |
| Angle Tween | The hamburger menu offers a range of animations for how the angle will initiate when the menu exits the page. |
| Position Tween | The hamburger menu offers a range of animations to exit the menu from the page. |
| Duration | The duration sets the number of milliseconds that the hamburger menu will take to exit the page. |
| Origin X% | This sets the origin or pinpoint of the angle for the menu to begin its journey off the page. Origin X sets the horizontal position. (0,0 would be top right hand corner) |
| Origin Y% | This sets the origin or pinpoint of the angle for the menu to begin its journey off the page. Origin Y sets the vertical position. (100,100 would be bottom right hand corner) |
Presets
A Preset is a pre-determined set of properties and files for a component. You can have a Predefined Preset (Umajin created) or a Custom Preset (custom designed by you). Where the component has a standard Predefined Preset it will automatically be loaded into your app as the default when you insert that component.
The ’LOAD’ button opens the Preset Selector, which has tabs for Predefined and Custom, so you can choose which Preset to load for your component.
Create your own custom Preset by building your assets and storing them in the image folder inside your project folder. Populate your properties panel with these assets and the ‘SAVE’ button will enable you to name and save your preset under the Customs tab.
The Hamburger Menu has a standard Preset that loads as the default. There is also the option of a Central Menu Preset.
Actions
The Hamburger Menu component has 2 events that you can add actions to. These can be found under the Actions Tab: ‘On menu opened’ and ‘On menu closed’.
This allows you to perform an action/s both as the menu is opened and as it is closed. I.e. you might like to have the background fade out or change color to draw attention to your open menu.
