Axure Tutorial: Right Click to Display Menu

Introduction

The right-click menu is very common in software or website. It can be used as a shortcut, and it contains various commands to choose from. Today, I will teach you that how to use dynamic panel to make a context menu.

Features to be Realized

After the making is completed, it should have the following effects

  1. Click the right mouse button, a menu will pop up, and the pop-up position is the position of the mouse pointer
  2. Click menu option to switch pictures

 

Widgets Setup

1. Dynamic Panel (Menu Options)

The context menu of this tutorial is made with a dynamic panel. Make 4 options with 4 rectangles, set their mouseOver and Selected styles.

Select all options and  set selection group, the first option is selected by default.

2. Picture

Import a picture for later interaction.

 

Interactions Setup

1. When the right mouse button is clicked on the picture.

First, you need to hide the context menu. Then move the picture to the cursor pointer position (cursor.x, cursor.y), and finally show the context menu.

2. Interactions of menu options

When clicking the menu option, we need to change the picture, select the option, and then hide the context menu dynamic panel.

 

3. Finally

We need to block the default context menu of the system: set a blank right click event.

Finally, we want to hide the context menu when we click elsewhere on the screen. Set a screen click event. If the mouse is not within the context menu, the context menu will be hidden. 

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).


Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.