本课程学习如何创建自定义导航按钮。使用图片热区部件和OnMouseEnter事件隐藏按钮。

下拉菜单按钮

步骤1：添加图片热区部件

首先，打开FlyoutMenu.rp文档Flyout Menu页面。页面中有两个弹出菜单按钮：Women和Men。
拖入图片热区部件到Women弹出导航上，调整图片热区尺寸，四边至少留多10px覆盖在Women弹出导航上。围绕Women弹出导航菜单四边留出的图片热区区域，当鼠标移出导航菜单时，将设置触发隐藏子菜单事件。
接下来，右键图片热区，快捷菜单选择“顺序->置于底层”。

步骤2：转换为动态面板

圈选图片热区和Women弹出导航菜单。右键，快捷菜单选择“转换->转换为动态面板”，将选中的所有部件转换为动态面板。
部件属性窗口，命名转换的新面板标签为：Women

步骤3：移动到相应位置并设为隐藏

拖动动态面板到菜单项合适位置，使Women弹出导航菜单与菜单项中的Women按钮重合。
右键动态面板，快捷菜单选择“编辑动态面板->设为隐藏”。被隐藏的Women菜单变为黄色。再右键动态面板，快捷菜单选择“顺序->置于底层”。

步骤4：设置显示弹出导航菜单的交互

下一步，选择菜单项中的Women按钮。部件窗口交互标签中，双击OnMouseEnter事件，打开用例编辑器。添加以下两个动作：
1.显示面板（Women）
2.将面板（Women）置于顶层

步骤5：设置隐藏弹出导航菜单的交互

双击Women面板的状态1，选中图片热区部件，在OnMouseEnter事件添加用例，设置用例动作“隐藏面板（Women）”。
生成面板，测试交互效果。当鼠标移入菜单项中的Women按钮，弹出Women导航菜单，当鼠标移入周围的图片热区区域时，Women导航菜单被隐藏。

步骤6：每个菜单项按钮重复步骤1-5

如果需要，重复步骤1-5，制作菜单项Men和Home的弹出导航菜单。查看3个弹出导航菜单的切换效果。
如课程结束，注意：弹出导航菜单可以根据菜单项需要，使用文字、图片或其它部件设计制作。