Axure系列:摩拜单车-----左侧抽屉菜单

这次我们来做一下摩拜左侧抽屉菜单。

目标:

1、点击左上角人像按钮,滑出菜单

2、左划隐藏菜单

3、点击菜单列表有按下效果


步骤

1、拖进一个动态面板,设置尺寸为 (320,568),样式设置为

2、参照摩拜放入头部

3、关键的步骤来啦,用中继器来实现菜单列表。

3.1、首先拖入一个中继器

3.2、双击中继器,参照列表放入图片、文本、矩形,并设置元件名称。给cell矩形设置选中状态颜色为#C9C9C9


3.3、选中中继器,对中继器中的表格表头进行编辑

编辑表头为icon和label,图片的输入是:复制图片,选中单元格直接粘贴即可

3.4、对中继器添加载入时事件

使载入时,让元件自动从中继器中获取文字来展示


和文本的方式类似

到这,列表就出来了,效果如图:

3.5、添加菜单的按下效果,双击中继器,选择所有元件,右键转换为动态面板,给动态面板添加事件

4、首页左上角添加个人icon,添加事件

5、在“左侧抽屉菜单中加个透明的元件,添加事件

再补充一些小细节就完成了。

福利:

原型预览地址:http://pko7xu.axshare.com

源文件地址:http://pan.baidu.com/s/1pLjvUEv 密码:rw73

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,170评论 19 139
  • 这里我就用一个主界面和多层的动态面板内嵌(只是钻研和加深交互练习,平常还是跳转链接更方便)。演示一下关于QQ界面的...
    夏天灬阅读 2,876评论 0 7
  • 一、辅助线 全局辅助线作用于站点中所有页面,包括新建页面。 页面辅助线只作用于当前页面 自适应视图辅助线只显示在用...
    追忆与憧憬阅读 477评论 0 0
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,262评论 6 13
  • 在我老家,把叔叔称作“爸爷”。 猴爸爷是我二爷爷最小的儿子。二爷爷一共有四个儿子三个女儿,猴爸爷在所有的孩子当中排...
    虹姐有话说阅读 953评论 2 2