最近学习了一下网页原型制作。仿照纪梵希官网做的网页原型，其中导航栏涉及逻辑较复杂，打卡记录一下。
首先，分析官网导航栏动效的需求：
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.
注意：元件的命名。方便在设置事件时，快速找到需要设置的对象。