Axure导航栏移入移出显示隐藏下拉菜单——纪梵希官网导航栏动效

最近学习了一下网页原型制作。仿照纪梵希官网做的网页原型，其中导航栏涉及逻辑较复杂，打卡记录一下。

首先，分析官网导航栏动效的需求：

1.鼠标点击导航选项卡，跳转至对应的导航页面。

2.鼠标移入导航选项卡时，出现对应的下拉菜单，选项卡下方显示选中状态。

3.鼠标向上移出选项卡时，下拉菜单消失，选中状态消失。

4.鼠标向下移入下拉菜单时，下拉菜单、选中状态依然显示。

5.鼠标移出下拉菜单，下拉菜单、选中状态消失。

6.鼠标点击下拉菜单内的子链接，跳转至对应的子页面。

纪梵希官网

1.总动态面板

1).设置一个动态面板——总导航，导航栏部分和几个下拉菜单部分全设置这个面板区域内。

2).双击state1进行面板内容编辑。导航选项卡在一个矩形区域内，文字和选中状态的编辑。其中选中状态设置为隐藏。

     

（蓝色线是标尺）

 

2.设置下拉菜单

1).每个下拉菜单就是一个动态面板。在页面中，“总导航”内拖动一个动态面板，同样双击state1进入动态面板进行文字图片的编辑。

2).四个下拉菜单同样的设置。并且所有的菜单动态面板都紧贴在导航栏下方。然后所有的下拉菜单都设置为“隐藏”。

 

3.动效需求1：鼠标点击导航选项卡，跳转至对应的导航页面。

在选项卡动态面板内，选中需要点击跳转的选项，在右侧捡视区，设置元件的鼠标单击事件——打开链接——目标URL。

 

4.动效需求2：鼠标移入导航选项卡时，出现对应的下拉菜单，选项卡下方显示选中状态。

在选项卡动态面板内，选中需要点击跳转的选项，在右侧捡视区，设置元件的鼠标移入事件——显示对应下拉菜单同时隐藏其他下拉菜单——显示“选中状态”黑色小矩形。

 

5.动效需求3：鼠标向上移出选项卡时，下拉菜单消失，选中状态消失。

鼠标移出选项区域，下拉菜单和选中状态消失，此时需要设置热区了，热区可以控制没有其他元件的区域触发某些事件。

拖动热区到如下红框区域，鼠标移入这些区域，都可以触发下拉菜单、选中状态隐藏。

分别设置这些热区的鼠标移入事件——隐藏所有的下拉菜单和选中状态。

 

6.动效需求4：鼠标向下移入下拉菜单时，下拉菜单、选中状态依然显示。

鼠标下移出选项区域，下拉菜单、选中状态不改变，很简单，刚才已经设置了热区的隐藏事件（即向上和双侧区域），所以此时不需做任何选项移出事件即可。（这个弯我绕了很久。。。）

 

7.动效需求5：鼠标移出下拉菜单，下拉菜单、选中状态消失。

在每个下拉菜单动态面板下设置鼠标移出事件——隐藏该下拉菜单、该选中状态。

 

8.动效需求6：鼠标点击下拉菜单内的子链接，跳转至对应的子页面。

在下拉菜单的动态面板内，选中需要点击跳转的选项，在右侧捡视区，设置元件的鼠标单击事件——打开链接——目标URL。

通需求1.

 

注意：元件的命名。方便在设置事件时，快速找到需要设置的对象。