WoW:Using UIDropDownMenu

UIDropDownMenu can be used to display a basic drop down menu or a series of complex menus such as those that occur when you right click a chat tab. This tutorial explains both.

Step 1 : The Button

This button will cause the drop down menu to be displayed.

   <Frame parent="UIParent">
       <Frames>
           <Button name="MyDropDownMenuButton">
               <Scripts>
                   <OnClick>
                       MyDropDownMenuButton_OnClick();
                   </OnClick>
               </Scripts>
           </Button>
       </Frames>
   </Frame>

Next, you must choose how you want the menu to be displayed. There are two options, the last requires an extra frame.

• The standard drop down menu.

The standard drop down menu.

• Using the "MENU" keyword.

Using the "MENU" keyword.

Step 2 : The Menu

If you choose the second, "MENU" option, an extra frame is required. Otherwise, skip this step.

   <Frame name="MyDropDownMenu" inherits="UIDropDownMenuTemplate" id="1">
       <Scripts>
           <OnLoad>
               UIDropDownMenu_Initialize(this, MyDropDownMenu_OnLoad, "MENU");
           </OnLoad>
       </Scripts>
   </Frame>

The frame must inherit the UIDropDownMenuTemplate, unless you choose to remake that frame.

Step 3 : Initialization

If you skipped #Step 2 : The Menu, you must add an OnLoad function to your button in the following fashion. This will display the menu in the first style specified in #Step 1 : The Button.

  <Frame parent="UIParent">
       <Frames>
           <Button name="MyDropDownMenuButton">
               <Scripts>
                   <OnLoad>
                       UIDropDownMenu_Initialize(this, MyDropDownMenu_OnLoad);
                   </OnLoad>
               
                   <OnClick>
                       MyDropDownMenuButton_OnClick();
                   </OnClick>
               </Scripts>
           </Button>
       </Frames>
   </Frame>

As you have seen from the example, the third variable in UIDropDownMenu_Initialize changes the appearance of the menu. If the third variable is nil, the menu will be displayed in the fashion of the first example shown in #Step 1 : The Button. If the third variable is "MENU", which requires the initialization to occur in a seperate frame outside of the button as shown in #Step 2 : The Menu, the menu will be displayed in the fashion of the second example shown in #Step 1 : The Button.

The OnLoad function itself should be as follows. This example adds one option to the menu.

   function MyDropDownMenu_OnLoad()
       info            = {};
       info.text       = "This is an option in the menu.";
       info.value      = "OptionVariable";
       info.func       = FunctionCalledWhenOptionIsClicked;
       
       -- Add the above information to the options menu as a button.
       UIDropDownMenu_AddButton(info);
   end

Note that careless use of throw-away tables can make your addon generate a lot of unnecessary memory garbage. This is especially true I you don't create menu only once, but recreate it dynamically every time it is displayed to place check marks or any other dynamic content where it needed. See HOWTO: Use Tables Without Generating Extra Garbage for some advices on how to minimize or eliminate completely garbage generation in such cases.

Step 4 : Showing the Menu

Your menu will be displayed when the button is clicked. This is called by the following function.

   function MyDropDownMenuButton_OnClick() 
       ToggleDropDownMenu(1, nil, MyDropDownMenu, MyDropDownMenuButton, 0, 0);
   end

Click here for more information on ToggleDropDownMenu.