DropMenu UnityGUI Elements

Demo Dynamic Demo
The DropMenu asset proposes simple DropLists created with the new unity GUI.
In its simplest form all you have to do is select one of the DropMenus, add new items in a list of string, then choose a method that will be triggered by a click on one of the menu items.

Art by Kenney
DropMenu Elements Example

DropButton Element

Add with GameObject menu:

  • Select: GameObject >> UI >> DropMenu >> DropButton

Add with Prefab object:

  • Drag and drop the DropMenu prefab (not the item menu’s prefab).
  • Because it is missing a linked button you should see a warning reading: “No button linked to this panel”.
  • Click the button (“Create linked button”) below the warning to correct this.
However you added this new DropButton you still see two warnings:
  • “No elements added to this menu” telling you that you need to add menu items.
  • “No function selected” reminding you to choose a General function.
Concernning the first warning, start by setting the Items list’s size, follow by entering the names of the items you want (important: they will be displayed in this order).
Now, the functions you will choose in the panel’s inspector are the General functions (see here for more information), they will be triggered by default by a menu item if you haven’t assigned any Particular functions to it.
DropButton Element
DropButton inspector DropDirection: The direction the DropMenu will unroll toward.
IsTitle: If chosen, the clicked item will become the menu’s title (the button’s label).
Show Selected Item: If true, the selected item will be displayed differently.
Y Offset: This will move the panel up or down relative to its linked button.
DropSpeed: The speed at which the panel will unroll.
Linked Button (necessary): The linked button will toggle the DropMenu as well as determine its position and width.
Normal Item (necessary): A panel (with a DropMenuBehaviour component) having a text element has a child. By default a menu item will be made from this prefab.
Separator Item (optional): A simple panel which graphic will act as a separator. You can modify its height through a layout element.
Static Item (optional): Same as an Item Prefab, but without interactibilty (it doesn’t react to mouseOver, mouseClick, …).
Wrap On Activate: When Activating, do you want the menu to play the roll up animation or simply appear.
Wrap On Deactivate: When deactivating, do you want the menu to play the roll up animation or simply disappear.
Items: This list is used to create the menu’s items. A certain syntax is allowed to create special items (see here).
On Item Click (String): The General function triggered by items who aren’t assigned a particular function. See here for more information.
Create/Delete Items (Button): You may create the menu items within the editor before runtime. See here for more information.

DropPanel Element

Add with GameObject menu:

  • Select: GameObject >> UI >> DropMenu >> DropPanel

Add with Prefab object:

  • Drag and drop the DropPanel prefab (not the item menu’s prefab).
  • There is no need for a linked Button in this case.
However you added this new DropPanel you now see two warnings:
  • “No elements added to this menu” telling you that you need to add menu items.
  • “No function selected” reminding you to choose a General function.
Concernning the first warning, start by setting the Items list’s size, follow by entering the names of the items you want (important: they will be displayed in this order).
Now, the functions you will choose in the panel’s inspector are the General functions (see here for more information), they will be triggered by default by a menu item if you haven’t assigned any Particular functions to it.
DropButton Element
DropPanel inspector DropDirection: The direction the DropMenu will unroll toward.
IsTitle: If chosen, the clicked item will become the menu’s title (the button’s label).
Show Selected Item: If true, the selected item will be displayed differently.
DropSpeed: The speed at which the panel will unroll.
Normal Item (necessary): A panel (with a DropMenuBehaviour component) having a text element has a child. By default a menu item will be made from this prefab.
Separator Item (optional): A simple panel which graphic will act as a separator. You can modify its height through a layout element.
Static Item (optional): Same as an Item Prefab, but without interactibilty (it doesn’t react to mouseOver, mouseClick, …).
Wrap On Activate: When Activating, do you want the menu to play the roll up animation or simply appear.
Wrap On Deactivate: When deactivating, do you want the menu to play the roll up animation or simply disappear.
Items: This list is used to create the menu’s items. A certain syntax is allowed to create special items (see here).
On Item Click (String): The General function triggered by items who aren’t assigned a particular function. See here for more information.
Create/Delete Items (Button): You may create the menu items within the editor before runtime. See here for more information.

DropMenuPaired Element

Add with GameObject menu:

  • Select: GameObject >> UI >> DropMenu >> DropMenuPaired

Add with Prefab object:

  • Drag and drop the DropMenuPaired prefab (not the item menu’s prefab).
  • Because it is missing a linked button you should see a warning reading: “No button linked to this panel”.
  • Click the button (“Create linked button”) below the warning to correct this.
However you added this new DropMenuPaired you still see two warnings:
  • “No elements added to this menu” telling you that you need to add menu items.
  • “No function selected” reminding you to choose a General function.
Concernning the first warning, start by setting the Items list’s size, follow by entering the names of the items you want (important: they will be displayed in this order).
Now, the functions you will choose in the panel’s inspector are the General functions (see here for more information), they will be triggered by default by a menu item if you haven’t assigned any Particular functions to it.
DropMenuPaired Element
DropMenuPaired inspector DropDirection: The direction the DropMenu will unroll toward.
IsTitle: If true, the clicked item will become the menu’s title (the button’s label).
Flip Image Button: If true, the linked button object will rotate 180° on the z axis when the menu is clicked (see here for more information).
Show Selected Item: If true, the selected item will be displayed differently.
X Offset: This will move the panel left or right relative to its linked button.
DropSpeed: The speed at which the panel will unroll.
Linked Button (necessary): The linked button will toggle the DropMenu as well as determine its position and width.
Normal Item (necessary): A panel (with a DropMenuBehaviour component) having a text element has a child. By default a menu item will be made from this prefab.
Separator Item (optional): A simple panel which graphic will act as a separator. You can modify its height through a layout element.
Static Item (optional): Same as an Item Prefab, but without interactibilty (it doesn’t react to mouseOver, mouseClick, …).
Wrap On Activate: When Activating, do you want the menu to play the roll up animation or simply appear.
Wrap On Deactivate: When deactivating, do you want the menu to play the roll up animation or simply disappear.
Items: This list is used to create the menu’s items. A certain syntax is allowed to create special items (see here).
On Item Click (String): The General function triggered by items who aren’t assigned a particular function. See here for more information.
Create/Delete Items (Button): You may create the menu items within the editor before runtime. See here for more information.

RightClickMenu Element

Add with the GameObject's menu:

  • Select: GameObject >> UI >> DropMenu >> RightClickMenu

Add with Prefab object:

  • Drag and drop the RightClickMenu prefab (not the item menu’s prefab).
  • Because it is missing a linked window you should see a warning reading: “No UI window chosen”.
  • Correct this thus: Drag and Drop a UI element (with a RectTransform component) in the LinkedWinow option.
However you added this new RightClickMenu you now see two warnings:
  • “No elements added to this menu” telling you that you need to add menu items.
  • “No function selected” reminding you to choose a General function.
Concernning the first warning, start by setting the Items list’s size, follow by entering the names of the items you want (important: they will be displayed in this order).
Now, the functions you will choose in the panel’s inspector are the General functions (see here for more information), they will be triggered by default by a menu item if you haven’t assigned any Particular functions to it. The drop direction for this item is downward by default.
DropButton Element
RightClickMenu inspector DropSpeed: The speed at which the panel will unroll.
Linked Window (necessary): This menu needs to be bound to a window, this will define the zone in which a right click will activate it.
Normal Item (necessary): A panel (with a DropMenuBehaviour component) having a text element has a child. By default a menu item will be made from this prefab.
Separator Item (optional): A simple panel which graphic will act as a separator. You can modify its height through a layout element.
Static Item (optional): Same as an Item Prefab, but without interactibilty (it doesn’t react to mouseOver, mouseClick, …).
Wrap On Activate: When Activating, do you want the menu to play the roll up animation or simply appear.
Wrap On Deactivate: When deactivating, do you want the menu to play the roll up animation or simply disappear.
Items: This list is used to create the menu’s items. A certain syntax is allowed to create special items (see here).
On Item Click (String): The General function triggered by items who aren’t assigned a particular function. See here for more information.
Create/Delete Items (Button): You may create the menu items within the editor before runtime. See here for more information.

Basics

Default and Special menu items


General and Particular Methods

General functions are set through the menu inscpector, Particular functions are those added to the menu’s children (items) they are unique to an item.
General function are triggered by default but are overriden by particular ones. For example, you may set a general method that will be used by all your items but one, to which you want to set a different function that only it will use.

Returned values

The value returned by an item is a string, namely its label (Text.text value).
Modify or Override the DoAction method in DropMenuItemBehaviour to change this.
If you want to return a non-string value you will need to create a new ButtonClickEvent class inheriting from UnityEvent. E.g.:

public class ButtonClickedEventInt : UnityEvent<int> { }

Static and Dynamic Methods

When in the process of choosing a method you will notice two categories: static and dynamic.
A static method is the one you are probably most familiar with, you have the option to choose a parameter for it if you can.
Dynamic methods are those that can have as parameter the type of variable we chose has return value (string here), you cannot input a custom parameter here. In the demo scene you will see that as an example, the dynamic method chosen is a Text UI element Text.text, meaning that a click on an item will change this text value.

Creating and Deleting items

You have the possibilty to create or delete the items of a menu before runtime via the a button (“Create/Delete Elements”) in the menu’s inspector.
If the items aren’t already created they will be at runtime by the DropMenuBehaviour script.
The “Delete Elements” function will only delete elements who have a Text component in one of their children or which name is “Separator”.

Dynamic DropLists (runtime modifications)

You can modify your DropList at runtime through three general methods (and their overloads).
Dynamism is brought through the possiblity to remove an item, insert a new item anywhere in the list and move an item to a new position in the list.
As well, don't forget that you have access to most methods and variables through scripting, like setting an item as selected; adding/removing a method invoked by the Onclick Event; changing an item's label (SetLabel method); etc.

Special Items

You have the possibility to use special items thanks to a syntax, but they are optional.

Disabled: by appending -disabled- to an item’s name it will not react to users' click input anymore. This state can be modified with isDisabled property and doesn’t require a prefab different from the default one.

Static: by appending -static- to an item’s name it cannot be interacted with, its label will also appear bold by default.

Separator: by using ——— (three minus symbols) as an item’s name it will display a separator.

Important: you can change the syntax by modifying the class ItemSyntax in DropMenuUtils.cs.

FAQ

  • I added a new item but it doesn’t appear in-game. Why?
    • If you create elements before runtime you may need to delete and recreate them again as they will not be updated otherwise.
    • A new element won’t be added automatically if the containing panel already contains some.
  • The rolling animations (up and down) of the DropLists feel jerky. Why?
    • This happens when the pixelPerfect option is selected in the Canvas. It is inherent to how UGUI works, unselecting this option is the only solution for the moment.
  • How should I set the panel's RectTransform position in a DropButton?
    • The panel will automatically set its x and y coordinates relative to its button, its width will be the button’s width.
    • If you need the panel to appear higher or lower relative to the button you can use the OffSet option.
  • How should I use the OffSet option?
    • The Offset value will move a panel, further or closer to its linked button, on the specified axis.
  • Why should I add a DropMenu via the GameObject menu rather than by dragging and dropping a prefab?
    • When you add a DropMenu through the GameObject menu it will be near-ready to function, also it will be placed as a child of a canvas element by default.
    • Moreover adding a DropMenu this way will add a canvas and an eventsystem object if they don’t already exist. Elements without which UI elements cannot function.
  • My DropPanel's or DropMenuPaired's first item is not well aligned vertically.
    • This happen when the game is not running and you have already created the items.
    • At runtime, all items but the first one will be disabled, the first one will then be aligned as it should.
  • What is the Flip Image Button option supposed to do?
    • If true, the linked button's transform is rotated 180° on the Z axis.
    • E.g. an arrow pointing down when the DropMenuPaired is inactive will point up when activated.
    • Keep in mind this will flip vertically the button's image and all of its children's image as well.