Your Own DropDown Menu Making _ PowerApps

 Let's utilize Gallery to make your own Dropdown Menu

Previously on 'our blog', we showed how to make a 'global navigation bar' in the component mode with the 'Gallery' function. When it comes to 'dropdown', the first thing occuring to your head might be the 'drop down' input of the insert menu in PowerApps like the picture below. However, today we are going to explore another way of it. 

Now that we created the navigation menu bar with the Gallery function, let's elborate the interface into a dropdown form~!!

First of all, we need a button (arrow style or whatever) for clicking to literally drop down the menu.

We chose a button in input as above. To make the button look intuitive, we put an arrow mark in it. When the button is clicked, the navigation bar menu will drop down. Our desired interface is like below. The navigation menu is invisible and visible by clicking the button. 

To create this interface, what we need to manipulate from now on are :

• 'OnSelect' property of the buttons with 'Set (as variable)'
• 'Height' property of the 'Gallery' not 'Visibility' property

* We will skip how to make the two different arrow buttons (▼,▲) appear and disappear by clicks because we already dealt with it before in our blog. 

The reason why we go with 'Height' property instead of 'Visibility' is that the beforehand setups in 'App's Onstart property is vulnerable once it becomes invisible. Therefore, we recommend adjusting 'Height' to control the visibility of the navigation menu. 

The 'OnSelect' property of ▼ button

The 'OnSelect' property of ▲ button

Regardless of whether you choose 'Visibility' or 'Height', the first thing you should handle is 'OnSelect' property of the ▼, ▲ arrow buttons. In our case, we assign variables to the buttons with 'Set' function. Once the ▼ button is hit, the variable of 'MainMenuVis' becomes 1 (integer). Likewise, the ▲ button's Onselect will change the variable 'MainMenuVis' change into 2.

The next thing we have make change is the 'Height' properties of the navigation menu. The code in 'Height' is 

"If(MainMenuVis = 2, 0, MainMenuVis=1, 701)"

It means that if the variable 'MainMenuVis' is 2, the height of the navigation menu will become 0, which means the menu will be invisible. On the other hand, if the variable 'MainMenuVis' is 1, the height of the menu will become 701. This is how we integrate/combine 'button' and 'variable' to control many things in Power Apps. 

Consequently, understanding of 'Set' operator as variable can help you detailedly control many small things, which could make your apps much more better in terms of their interfaces and usabilities.