在我们使用的网页菜单上，经常遇到以下这种下拉菜单，其特点是把同一类型的功能子项，下设在一个统一的功能父项下面。通过鼠标点击父项，会折叠或显示子项。对于产品经理或者交互设计师而言，往往需要在产品原型设计中体现这种效果，下面通过axure来实现。

使用axure画出以下几个模块，箭头使用的是FontAwesome字体。字体速查表可以访问https://fontawesome.com/v4.7.0/cheatsheet/

将FontAwesome的css网络链接地址(http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css)配置在发布->预览选项->配置->Web字体中。

将子项1，子项2，子项3组合成一个动态面板（菜单1子项），并给菜单1添加鼠标单击时动作。

给菜单1鼠标单击时添加条件，当元件可见时，隐藏动态面板（菜单1子项），动画为向上滑动200ms，从下方拉动元件，动画为线性200ms。同时设置箭头为⬇。

给菜单1鼠标单击时添加条件，当元件隐藏时，显示动态面板（菜单1子项），动画为向下滑动200ms，从下方推动元件，动画为线性200ms。同时设置箭头为⬆。

同理，可对菜单2和菜单2子项设置同样的效果。

最后发布的效果请关注微信公众号九万里大数据观看。

欢迎关注我的公众号“九万里大数据”，原创技术文章第一时间推送。