我们经常在各种Web后台页面中看到抽屉式菜单,本文将介绍如何使用axure实现抽屉式菜单效果~~如果你看完学会了,可以随手点个赞哦,比心心(#^.^#)
开发见山,先放效果图:
抽屉式菜单效果
下面是具体步骤:
一、元件准备
本案例包括两个一级菜单、两个二级菜单,如下图所示。同时为了更明显的表示菜单展开和收回的效果,增加了“上箭头”与“下箭头”图标。
菜单元件
元件命名
二、 摆好元件位置(位置很重要哦~)
1. 首先将两个一级菜单按照上下关系摆好;
一级菜单位置关系
2. 然后将“用户管理”子菜单放到“用户管理”下方,并设置为“隐藏”状态;
子菜单位置(黄色部分)
3. 将“统计分析”子菜单放到“统计分析”菜单下方,并设置为“隐藏”状态。
子菜单位置(黄色部分)
PS:这个步骤就是将各个子菜单放在应该出现的正确位置上~
三、添加事件与用例
1. 为“用户管理”一级菜单设置选中样式,这里简单设置为更改背景色;