我们经常在各种Web后台页面中看到抽屉式菜单，本文将介绍如何使用axure实现抽屉式菜单效果~~如果你看完学会了，可以随手点个赞哦，比心心(#^.^#)
开发见山，先放效果图：
抽屉式菜单效果
下面是具体步骤：
一、元件准备
本案例包括两个一级菜单、两个二级菜单，如下图所示。同时为了更明显的表示菜单展开和收回的效果，增加了“上箭头”与“下箭头”图标。
菜单元件
元件命名
二、 摆好元件位置（位置很重要哦~）
1. 首先将两个一级菜单按照上下关系摆好；
一级菜单位置关系
2. 然后将“用户管理”子菜单放到“用户管理”下方，并设置为“隐藏”状态；
子菜单位置（黄色部分）
3. 将“统计分析”子菜单放到“统计分析”菜单下方，并设置为“隐藏”状态。
子菜单位置（黄色部分）
PS：这个步骤就是将各个子菜单放在应该出现的正确位置上~
三、添加事件与用例
1. 为“用户管理”一级菜单设置选中样式，这里简单设置为更改背景色；
一级菜单选中样式
2. 为“用户管理”一级菜单添加OnClick（单击时）事件，用例为：设置选中状态为toggle(切换)，也就是：菜单可以在选中与未选中之间通过点击的方式切换。
一级菜单点击事件与用例
3. 接着为“用户管理”一级菜单添加OnSelected（选中时）事件，用例为：显示用户管理子菜单，同时一定要设置向下推动元件（push widgets,below）（画重点哦~）；
一级菜单选中用例
4. 同时为“用户管理”一级菜单添加UnSelected（未选中）事件，用例为：隐藏用户管理子菜单，同时要设置向下拉动元件（pull widgets,below）；
一级菜单未选中用例
5. 同理为“统计分析”一级菜单设置选中样式，添加OnClick（单击时）、OnSelected（选中时）与UnSelected（未选中）事件，这里就不再多说了~
到这里，已经实现抽屉菜单效果啦~
最后，为了更明显的表示菜单展开和收回，我们再加上菜单右侧箭头变化的效果：
(1) 将“下箭头”放在“上箭头”位置，同时设置“下箭头”为隐藏状态；
放置“下箭头”位置
（2）为“用户管理”和“统计分析”一级菜单的OnSelected（选中时）与UnSelected（未选中）事件增加“箭头”的显示、隐藏内容。
箭头显示隐藏设置
axure实现web页面抽屉式菜单就介绍完啦，简单来说就是：摆好各个菜单的位置，并设置好显示、隐藏状态；然后利用axure中显示/隐藏元件时的推动、拉动选项，就OK了~
网友评论