Dropdown Menu

This Component provides a dropdown menu system that you can customize to your own requirements.

When you select the Dropdown 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 Dropdown Menu component has 3 Components in its sub-group.

  1. The ‘Menu Button’: allows you to control the visual presentation, behavior and position of the Dropdown Menu on your screen.
    This has the same behavior as a Toggle Button Component.
  2. ‘Anim in start’: This Rectangle Component defines the origin of your Dropdown 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 Dropdown 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 5 navigation Button Components and a Rectangle component to make a color panel behind the buttons. These buttons can all be re-designed to match your branding, and actions added to control what they do; for example, navigate to a new page.

The Rectangle and Button Components are all configurable using the same component properties as listed on their help page under Basic Components


How To Use The ‘Dropdown Menu’ Component

Note: This video is made using Umajin version 1.4.0.0. There are some UI changes and naming changes but the basic functionality stays the same.

  • The Dropdown Menu Component is now under a Navigation Tab rather than a Layout Tab
  • The Show Page Action is now under a Navigation Tab rather than a Simple Tab
  • Components and Actions have new icons and are categorized differently
  • Umajin now has a more comprehensive top File menu. You can find a detailed description on the
    Overview page. https://help.umajin.com/overview/

Properties For Dropdown 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.

OpacityThe opacity slider sets the transparency of the whole group of components that make up the
Dropdown 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 TweenThe dropdown menu offers a range of animations for how the alpha will be applied when the menu enters the page.
Angle TweenThe dropdown menu offers a range of animations for how the angle will initiate when the menu enters the page.
Position TweenThe dropdown menu offers a range of animations to usher the menu onto the page.
DurationThe duration sets the number of milliseconds that the dropdown 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 left 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 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 dropdown menu offers a range of animations for how the alpha will be applied when the menu exits the page.
Angle TweenThe dropdown menu offers a range of animations for how the angle will initiate when the menu exits the page.
Position TweenThe dropdown menu offers a range of animations to exit the menu from the page.
DurationThe duration sets the number of milliseconds that the dropdown 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 thepage.

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 Dropdown Menu has a standard Preset that loads as the default. There is also the option of a Poll Preset.

This Poll menu is designed as a popup graph to demonstrate the flexibility of the component.

Actions

The Dropdown 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.