• Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Animation
      • Render Kit
      • Particle
      • Video
    • Maps
      • Google Maps
      • Offline Map
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Features
    • Cloud Services
      • Introduction
      • Google Analytics
      • Umajin Analytics
    • Publishing
      • Introduction
      • Apple App Store Information
      • Google Play Store Information
      • Packaging the Application for Stores
      • Packaging Mac and Windows apps
Menu
  • Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Animation
      • Render Kit
      • Particle
      • Video
    • Maps
      • Google Maps
      • Offline Map
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Features
    • Cloud Services
      • Introduction
      • Google Analytics
      • Umajin Analytics
    • Publishing
      • Introduction
      • Apple App Store Information
      • Google Play Store Information
      • Packaging the Application for Stores
      • Packaging Mac and Windows apps
Components > Navigation Components > Hamburger Menu

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.

  1. ‘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.
  2. ‘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.
  3. ‘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
https://www.youtube.com/watch?v=svAUQX2gOTo

Properties for Hamburger Menu Component

NameWhen 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 SizeSets 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.
OpacityThe opacity slider sets the transparency of the whole group of components that make up the Hamburger Menu component. 100 is maximum opacity.
Animation InThe properties below allow you to set the origin of the menu animation and how the animation will function.
Start AlphaThis sets the starting opacity/transparency of the whole menu component as it enters the page. 100 is maximum opacity.
Start AngleThis 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 TweenThe hamburger menu offers a range of animations for how the alpha will be applied when the menu enters the page.
Angle TweenThe hamburger menu offers a range of animations for how the angle will initiate when the menu enters the page.
Position TweenThe hamburger menu offers a range of animations to usher the menu onto the page.
DurationThe 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 OutThe properties below allow you to set the destination of the menu animation and how the animation will exit.
End AlphaThis sets the ending opacity/transparency of the whole menu component as it exits the page. 100 is maximum opacity.
End AngleThis 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 TweenThe hamburger menu offers a range of animations for how the alpha will be applied when the menu exits the page.
Angle TweenThe hamburger menu offers a range of animations for how the angle will initiate when the menu exits the page.
Position TweenThe hamburger menu offers a range of animations to exit the menu from the page.
DurationThe 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.

  • Umajin
  • Developers
  • Support Home
Menu
  • Umajin
  • Developers
  • Support Home