Send Us Your Feedback

AXURE 201 - Article 3: Menus

Overview

    1. Menu Widgets
    2. Editing Menu Widgets
    3. Adding Rollover Styles to Menu Items



1. Menu Widgets

Menus New Widgets Menu widgets are used to create simple flyout menus like those found in a typical desktop application.

Vertical and Horizontal Menu widgets are available in the Widgets pane and can be added to a wireframe by dragging and dropping from the Widgets pane onto a wireframe. By default, a menu is created with 3 menu items.


2. Editing Menu Widgets

Editing text and formatting the menu and menu items is similar to other widgets. Double-click on a menu item to edit the text. The color, font, and other styles of the menu and menu items can be changed using the toolbars.

To edit the padding around the menu items, right-click on the menu or menu item and select "Edit Menu Padding".

Menus Padding Editor


To add or remove menu items, right-click on a menu item and use the Add Menu Item and Delete Menu Item commands.

Menu Item


To add a submenu to a menu item, right-click on the menu item and select "Add Submenu".

Menus Submenu



3. Adding Rollover Styles to Menu Items


Rollover Styles can be applied to menu items in the Menu widgets similar to Button Shape widgets.

To edit the rollover style on a Menu, right-click on the Menu or Menu Item and select "Edit Rollover Style". This will open the Set Rollover Style dialog where you can choose the styles to change on rollover for a single menu item, all menu items on the menu, or all menu items on the menu and all submenus.

Check the Preview checkbox to preview the rollover styles applied to the Menu.

After rollover styles are applied, you can see the rollover style in the wireframe by mousing over the black and white square in the top left corner of the menu item.

Menus Rollover Menu