Component preparation

First, we use Axure system components to complete the wireframe drawing. Drag four rectangles from the component library to the design area and edit the rectangular text. These four rectangles serve as the first-level menus of the navigation bar and are named menu one, menu two, menu three, and menu four respectively. Distribute the distance between four rectangles equally spaced horizontally. As shown in Figure 2.

Drag the four vertical menus below the first-level menu, and adjust the width and height of each menu item so that it is consistent with the width and height of the first-level menu. Edit the text of each submenu item, and the four submenus are named submenu 1, submenu 2, submenu 3, and submenu 4, as shown in Figure 3. Fill each submenu item with gray #D4D4D4 to hide the submenu.

In order to make it more visually beautiful, we hide the borders of all menu items by default. Set four primary menus as an option group, and name the option group as a first-level menu. Set the selection style for the four first-level menus. When selected, the fill color is #0099FF and the text color is white. Set the mouse hover style for each menu item in the submenu. When hovering, the fill color of the menu item is #0079FE and the text color is white. Set the first-level menu and its corresponding submenu as combinations, and name the four combinations Navigation 1, Navigation 2, Navigation 3 and Navigation 4 respectively.

Next we start the interactive settings, select menu one, add the mouse move event, set the current component to the selected state, slide down to display the submenu of the current menu, namely submenu 1, and hide the other three submenus. ,The interaction setting is shown in Figure 4. Select the combined navigation 1, add a mouse out event, set the first-level menu, menu 1, to unselected, and hide the second-level submenu under the group navigation, that is, hide submenu 1. The interaction setup is shown in Figure 5.

Follow the same method to set interactive effects for the other three first-level menus and navigation combinations. The interaction setup is shown in Figure 6.

At this point, the sliding menu interaction prototype has been created. Click Preview to view the prototype in the browser.

According to the design ideas of this case, we can actually create an interactive effect that slides to the right and pops up. The principle of prototyping is the same. If you are interested, you might as well try to make it.