Follow

Link > Popup Menu

You can leverage the Popup Menu control to capture a popup menu that enables users to navigate to different pages throughout the Zapp. As opposed to the Menu control, which can transform any list of links into a dropdown menu, Popup Menu is for use with dropdown menus existing in the web application.

 

Access the Popup Menu tool in the Simplify Toolbar by selecting "Link." Then click "Popup Menu" in the dropdown menu.

 

Popup_Menu.png

 

Select the element that opens up the popup menu. Select an item from within the menu that you want to include in your Zapp.

 

Screen_Shot_2017-05-22_at_3.02.03_PM.png

 

The Capriza Designer can now detect all elements in the menu. Click on each element that you want to include in the popup menu.

 

 

Screen_Shot_2017-05-22_at_3.02.10_PM.png

 

The Designer will then prompt you to click to interact with the popup menu items. You may click and begin connecting the appropriate Zapp pages or wait until you have completed the rest of the page.

 

Screen_Shot_2017-05-22_at_2.50.16_PM.png

 

If the popup menu is not autodetected by Capriza, you can hold down the Alt key and click to capture. In this case, the Designer may prompt you to choose also relevant entries in the popup menu.

 

Screen_Shot_2017-05-22_at_2.49.37_PM.png

 

Select all items. Once finished, click again within the menu to save.

 

Screen_Shot_2017-05-22_at_2.49.50_PM.png

 

Once saved, Capriza will prompt you to verify if the entries are correct.

 

Screen_Shot_2017-05-22_at_2.49.59_PM.png

 

The popup menu will now look like this in the mobile preview.

 

Screen_Shot_2017-05-22_at_2.50.31_PM.png

 

Styling Options

 

Once captured, you can access the In Line Editor (ILE) to update your popup menu's display options. 



Screen_Shot_2017-05-22_at_2.50.56_PM.png

 

Several options are available via the ILE:

  • Presets: Select a predefined mobile style preset for the dropdown.

  • Display: Set the dropdown's width and background color.

  • Use Client Side Filtering: Use this option to filter the available options from the dropdown as the user types. This is done on the mobile device and not in the web app.

  • Show as Modal: By default the dropdown options are displayed as a popover in the page, when the dropdown is opened. If this option is turned on, the open dropdown will be displayed as a full page.

  • Content: Set placeholder and tooltip text.

  • Text: Adjust line height, text size, and color.

  • Label: Specify a label and style its text.

  • Margins: Change the margins for the dropdown menu.

  • Suggest Recent Values: Displays recent values first to streamline the user experience.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.