Simple dropdown menu

I need help creating a simple dropdown menu. I am looking for a menu similar to this one

This thread might help.

1 Like

If you want to fully style and customize behaviors for a dropdown/popup menu list, it needs to be built manually. There are several pre-built working examples available from here:

I copied content from your example site to show you a basic method you can use for this purpose.
menu dropdown.rp (80.6 KB)

  • There is a dynamic panel named “Dropmenus”
    • Each individual menu (File, Vehicles, etc.) is a state in this dynamic panel
    • This dynamic panel has a style, set for each state, with a 1 px border and rounded corners
  • You can inspect to code to see how the “menuitem” buttons set the Dropmenus panel to the correct state, move it, and toggle its visibility.
    • With this setup, there are 3 situations that need to be handled:
      • Dropmenus is hidden: Show Dropmenus in the correct state.
      • Dropmenus is shown but in a different state (e.g., showing the Vehicles list instead of File list when File is clicked)
      • Dropmenus is shown and on the same list (e.g., clicking File when File list is shown): Hide Dropmenus.
    • The first two situations can be handled in the same conditional case. Otherwise, Dropmenus just needs to be hidden.
    • (You could also create wholly separate dynamic panels (or groups), one per menu item, place them manually as you want them to appear, and hide all by default. You’d need to include a method to show the associated dynamic panel, e.g., clicking on “File” shows the dropmenu for File) and hide all others. By setting up each list as a state in one “Dropmenus” dyanmic panel, the hiding/showing is taken care of automatically.)
  • I show two different structures for the menu list content. You can pick whichever works best for you.
    • The File list is built with standard rectangle widgets, one per item.
    • The Vehicles list is built with a Repeater widget. Repeaters offer more power, more extensibility and reuse, and easier maintenance, but they can slow down initial page loading, especially if you have a lot of them .
      • The repeater cell has a rectangle widget, styled the same as for File items.
      • To add/edit items, just edit the repeater datasheet–in the STYLE pane, and include page links by right-clicking each row in the “Link” column to set a Reference Page.
  • Note the Dropmenus dynamic panel hides itself with a Loaded event. I could have just set this to Hidden by default–which is fine–but I prefer to see my widgets like this in the editor as it makes them easier to find and edit, especially months down the road.
  • I also added a Page Click or Tap event to hide the Dropmenus panel, so clicking on the page background (or any widget without a click event) will dismiss the dropmenu.
1 Like