Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Today I will show you how to use the drawer menu in Axure. In the drawer menu, two interactive effects need to be achieved, namely:

Interaction 1

The telescopic effect of the 1st and 2nd level menu items in the drawer menu

Implementation logic: Setting the switching state of dynamic panels and implementing "push/pull originals"

Interaction 2

Toggle the selected state of a menu item

Implementation logic: Set the selected state in the auxiliary view

Let's take a look at the implementation steps:

Interaction 1: The telescopic effect of the 1st and 2nd level menu items in the drawer menu

step 1

1. Drag in a dynamic panel and adjust the size of the dynamic panel

2. Double-click the dynamic panel, set the dynamic panel name: "Menu 1", add 2 dynamic panel states, named: Collapse, Expand

Step 2

1. Double-click the collapsed state to enter the "collapsed" state page

2. Drag a rectangle into the page and name it "Menu 1 - Collapse". Adjust the size of Menu 1 and enter the text "Menu 1".

3. Drag the drop-down arrow image and adjust the size

Step 3

Add mouse hover and selection styles for "Menu 1-Collapse", and set the font color: blue and fill color: light gray respectively.

Step 4

Set the mouse click use case for the "Menu 1 - Collapse" rectangle:

Select the "Switch Panel State" action, set "Menu 1" to switch to the "Expanded" state, and select the "Push/Pull Component" property.

Step 5

1. Copy the content of the dynamic panel "collapsed" state to the "expanded" state page

2. In the "Expand" status page, change the name of the rectangle to "Menu 1-Expand".

Interaction 2: Switching the selected state of a menu item

Step 6

1. Copy "Menu 1-Expand" as a submenu, modify the name component text, and name it: Submenu 1

2. Set the mouse click event of submenu 1, select the "Set Selected" action, and configure the current component to be selected.

Step 7

1. Batch copy multiple submenus, modify the text and name them separately

2. After selecting all submenus, set the selection group name: 1

Preview to see the effect.