三级菜单(甚至更多级菜单)在我们的各种产品中出现的频率是比较高的,同样,在问怎么做的小伙伴也特别多。想了一下还是说一下三级菜单的做法吧。

先看看三级菜单的效果:https://8bf5ra.axshare.com/#c=2

说到三级菜单,我们就先来看看二级菜单怎么做。把二级菜单项都放在一个动态面板中,然后,点击一级菜单时显示这个动态面板,并带有向下推动元件的效果。

三级菜单的做法要比二级的要稍微复杂一点,我们不能直接使用同样的方法在二级菜单面板中再加三级菜单的面板,直接让它显示。三级菜单显示时不能推动一级菜单往下,因为在物理上讲,它们已经不在一个空间上了。

不能直接来,我们可以利用曲线救国的方法。怎么做?来看

二级菜单的展开和收起可以跟原来的一样做,不同的是三级菜单展开和收起。既然一级菜单只能通过二级菜单的动态面板去推动,那我们就在这里想办法,让二级菜单在三级菜单展开之后再显示,那这个时候就可把一级菜单往下推动了。那在点击一级菜单的时候,二级菜单就已经显示出来了呀?怎么办?就先让它隐藏就可以了。

可能会有点不是太理解,没关系,我们一起来看一下具体的设置方法

先把一二三级菜单做出来。(这里可以先分别只做一个选项:一二三级菜单分别只做一个)二级菜单用动态面板制作,在二级的面板中,在用动态面板制作三级的菜单,注意要进行命名

所有动态面板都要选择“自动调整为内容尺寸”,确保动态面板会随着展开的内容而自动调节它的高度,这样就能够将内容全部展示出来。

部件准备好之后,就开始交互的设置了。在单击“一级菜单”时,显示或隐藏相对应的二级菜单面板,并推动部件。二级菜单的展开和收起就设置好了。

接下来设置三级菜单的展开和收起,在前面说过不能直接设置显示隐藏,要利用二级菜单的显示隐藏来做。这里先把二级菜单隐藏,接着显示三级菜单,最后让二级菜单再一次显示,并且推动其余的部件往下。

设置一个按钮上面的交互,然后预览看看,这时候会发现基本是对的,但是有一点,二三级菜单都状态之后,点击一级菜单会收起,再次点击一级菜单,原来打开的二三级菜单还是展开的状态

那回到一级菜单的单击时事件,我们再做一次修改。点击它的时候,只显示或隐藏二级菜单就行了,三级菜单就将它隐藏。

这个时候再次预览就没有问题了。没有问题之后我们将用例复制到其他的按钮上然后进行修改。

PS:如果你是每个元素分别只先制作了一份的话,这时候就将所有的按钮和面板选中之后,直接复制几个副本就可以了,还不用修改用例内容,省事!

这样我们通过动态面板和简单的动作结合使用就实现了三级菜单的制作。当然,这只是一种方法,还会有其他的方法可以做到,如果你有其他的做法,欢迎一起交流。

(加微信:pexuepexue,小编邀请您进入全国产品经理交流群)
群内每日分享学习资料、重磅报告、面试问题、招聘信息、免费课程
更多精品文章查看:http://axure.pexue.com/PeiXue/Default.aspx

教你用Axure绘制三级菜单相关推荐

  1. Axure绘制左侧菜单

    Axure绘制左侧菜单 前言 问题描述 解决方案 1.先拉一个动态面板作为菜单 2.双击动态面板,添加层 3.添加交互效果 4.点击预览查看效果 前言 以后可能会用到Axure进行项目的初步设计,所以 ...

  2. axure流程图模式_手把手教你用AXURE绘制流程图的图文教程

    用AXURE绘制流程图其实已经很专业,因为有专业的设计界面,专业的部件库和控件.绘制一般的流程图已经足够用了.今天明月PM,以注册流程的流程图为例给大家具体的将讲解以下流程图的具体操作步骤和流程.总共 ...

  3. Axure中继器实现三级菜单

    在日常产品设计中,我们时常会使用到系统一级.二级.三级菜单等,那除了传统的动态面板设计菜单.矩形直接设计,有什么更便捷的方式吗,那就是用中继器实现三级菜单,下面我们一起来看看如何实现. 实现效果预览: ...

  4. axure 鼠标变成手,Axure教程|鼠标移入移出自动显示与隐藏三级菜单

    前几天因工作需要做一个鼠标移入显示隐藏菜单,鼠标移出自动隐藏菜单, 做的时候觉得没有什么问题,做完后预览就发现一个很严重的问题,就是鼠标移出一级菜单向二级菜单时二级菜单不显示,或者二级菜单显示三级菜单 ...

  5. Axure 制作左侧导航栏实现三级菜单效果

    先放入菜单的相关元件,可以使用矩形,设置相应样式. 选中所有三级菜单,点击鼠标右键,选择转换为动态面板和设为隐藏,同时将面板命名为''ThreePanel''. 选中二级菜单和刚才设置的ThreePa ...

  6. CAD教程之CAD序号绘制注意事项

    CAD教程之CAD序号绘制注意事项 使用CAD绘图软件的过程中,CAD序号是比较常见的,下面来给大家总结下绘制CAD序号的注意事项,希望CAD初学者能够掌握. 1. 首先,打开浩辰CAD机械软件. 2 ...

  7. 权限组件(10):三级菜单的展示和增删改查

    效果图: 三级菜单的实现和一级.二级菜单差不多.需要注意的是增加三级菜单时,三级菜单是用户提交后在后台通过二级菜单的id添加的. 一.路由分发 rbac/urls.py ... from django ...

  8. 新手小白 python之路 Day1 (三级菜单功能实现)

    直接上需求: 实现一个多级菜单 三级菜单的实现 可以依次选择进入各个子菜单 也可以返回上级菜单 所需知识 列表 字典 需求也比较简单,但实际上做起来还是遇到许多的问题,我这边主要用到的知识点大概就是 ...

  9. python编写登录接口与三级菜单小程序

    一:登录接口 编写思路 python登录接口登录三次失败锁定: 一:建一个数据库文件保存用户名和密码,用来判断用户是否存在 二:用户锁定文件,当用户登录三次错误后记录用户信息进入锁定文件,下次登录时就 ...

  10. python自动化办公都能做什么菜-Python自动化开发学习之三级菜单制作

    本文实例为大家分享了Python三级菜单展示的具体代码,供大家参考,具体内容如下 作业需求: (1)运行程序输出第一级菜单 (2)选择一级菜单某项,输出二级菜单,同理输出三级菜单 (3)让用户选择是否 ...

最新文章

  1. 1-2 用Python编写【房价预测】模型----paddle
  2. oracle中的decode的使用
  3. 好用的Java开发IDEA插件汇总推荐
  4. opencv+海康威视网络摄像头实时预览+抓图(环境配置加程序)
  5. 基础:用android开发的ASCII码转换器
  6. 音频功率放大电路(使用过的语音方案电路记录)
  7. C++ 负数在内存中存储
  8. 交换机的工作模式:IVL和SVL
  9. 网络中的IP地址管理策略及其划分
  10. Bitflip问题案例分析
  11. 引用hammer左右滑动后上下滚动失效
  12. 网页版无需客户端下载视频
  13. 线路板基础知识详细解析
  14. php实现采集电影数据
  15. 线上微课堂:信号与系统
  16. SpringBoot整合RabbitMQ 访问保错: reply-text=NOT_ALLOWED - access to vhost '/' refused for user 'cuit'
  17. 什么是版权,怎么申请
  18. java服务架构 之MGW(美团点评高性能四层负载均衡)
  19. 助记词是什么,有什么用?
  20. 树莓派驱动小功率电器

热门文章

  1. slk文件转换器安卓版_CoolUtils Total Excel Converter下载
  2. 通信算法之三十五:GMSK/MSK/CPFSK/CPM/FSK仿真链路
  3. SSD目标检测论文简读
  4. 成功解决python.exe 无法找到入口 无法定位程序输入点
  5. mikrotik固件升级
  6. BugKu_MISC_(3)
  7. 第三章 操作系统基础
  8. pip卸载pillow时的报错解决
  9. Qt信号与槽机制原理及优缺点
  10. 自抗扰控制(ADRC)