如何用Mockplus快速做一个手风琴菜单？

手风琴菜单是一种比较常用的菜单形式，利用原型工具来做这种菜单通常要用到中继器。即使是功能强大的Axure，想实现该效果也比较麻烦。但如果你对Mockplus有所了解，你一定知道，利用Mockplus的“面板”组件，可以快速地做一个手风琴式的菜单。

我们来看看具体的操作步骤：

第一步：选择“面板”组件，自定义菜单样式。

在左侧的交互分类中选择“面板”组件，此处为了节省时间我在“面板”中添加一个列表。然后将带列表的面板复制两次。并将第二，第三个面板的名称改为“面板2”和“面板3”

“面板”组件的特点：调整面板大小时，面板里的内容不会随着面板大小的变化而变化。

第二步：设置交互，使面板大小恢复的同时“面板2”向下位移。

将三个面板都缩小至只显示表头，选中第一个面板，在界面右侧交互设置区域，点击“+”，选择面板，选择“调整大小”，勾选“自动恢复”，在下方输入需要增加的像素，第一个交互就设置完成了。这个交互的目的是让用户在点击表头位置时，面板拉长到显示全部列表的位置。

同样地，选中第一个面板，在界面右侧交互设置区域，点击“+”，选择面板2，选择“移动”，勾选“自动恢复”，在下方输入需要移动的像素（即第一个面板拉长时增加的像素），第二个交互就设置完成了。这个交互的目的是让第一个面板在拉长时，第二个面板同时向下位移相同数量的像素。

此时，我们需要在第一个面板上再添加一个交互，使第三个面板也向下位移同等数量的像素。方法同上。

第三步：按照一，二步的方法，为面板2和面板3设置交互。

这样，一个简易的手风琴菜单就做好了。你还可以在菜单选项中添加图标等组件，将菜单设置成你想要的样子。

我们来看看每个面板上都有哪些交互：

面板1:

链接到自己，调整大小。

链接到面板2，位移。

链接到面板3，位移。

面板2：

链接到自己，调整的大小。

链接到面板3，位移。

面板3：

链接到自己，调整大小。

是不是很简单呢？一个面板组件，两个简易的交互，就能做出一个像样的手风琴菜单。

Mockplus虽然是一款操作简单的原型工具，但利用它你可以做出很多复杂的交互，实现不可思议的效果。当然了，无论任何工具，设计师都要先熟悉了它的操作方法和各个组件的用途，才能用它们做出优秀的作品。如果你想了解更多Mockplus组件的使用方法，可以直接到它的官方教程网站doc.mockplus.cn，那里既有文字教程，又有视频解说，会让你的学习过程充满乐趣。

如何用Mockplus快速做一个手风琴菜单？相关推荐

如何快速做一个HTML5移动播放器
这段时间公司一直在做一个PC的教育类单页应用,庞大复杂,涉及非常多H5的知识,音频就是其中的一部分.前些天偷台风的闲暇时写了一个移动音乐播放器,作为练手项目(存放在码云).若你觉得该文章对你有帮助,别 ...
unity的vr场景怎么做_如何用Unity快速创建一个VR体验
文章相关引用及参考:uxdesign 不断试验Unity3D,探索Asset Store,并尝试创建出令人称奇的体验. (映维网 2017年08月25日)我(Andrew Coyle)一直希望为虚拟现 ...
pyqt5如何循环遍历控件名_如何用 PyQt5 快速构建一个简单的 GUI 应用
点击上方"Python全家桶","星标"或"置顶" 关键时刻,第一时间送达本文已获授权,欢迎分享转发 1. 介绍 Python GUI 常 ...
如何用 Python 快速开发一个区块链数据结构？
作者 | arjuna sky kok 整理 | Aholiab 出品 | 区块链大本营(blockchain_camp) 根据IEEE此前的一项调查,Python已成为最受开发者欢迎的语言之一.由于 ...
java制作管理系统视频_阶段1：手把手快速做一个Java swing mysql学生信息管理系统附带完整源码及视频开发教程【猿来入此自营】...
<p> <span style="color:#666666;font-family:"font-size:16px;background-color:#FFFF ...
[转载] 如何用 PyQt5 快速构建一个简单的 GUI 应用
参考链接: Python | 使用PyQt设计GUI应用程序点击上方"AirPython",选择"加为星标" 第一时间关注 Python 技术干货! 1. 介 ...
如何用python简单做一个植物大战僵尸源码
简单实现的植物大战僵尸我自己网上扣了王校长的图做了个热狗射手hhhhhhhh最后面给大家分享一下我扣的热狗png图片求点赞!!!""" v1.81.完善僵尸类2.加载僵尸 ...
如何用Python快速实现一个垃圾分类APP【附带微信小程序】
嗨害大家好鸭!我是小熊猫❤ 今天这篇文章主要介绍的是: 如何利用现有的工具来实现一个垃圾分类的应用有什么python相关报错解答自己不会的.或者源码资料/模块安装/女装大佬精通技巧都可以来这里:( ...
VUE如何快速做一个轮播图
1. 第三方插件 https://github.com/surmon-china/vue-awesome-swiper npm install swiper vue-awesome-swiper -- ...
用html制作一个卡通形象,教你快速做一个自己的卡通形象
作者制作卡通画的思路比较特别.首先找一副人物素材图片,在PS中适当调节(局部可以调整大小及角度,并用液化工具等适当处理),做成简单的大头效果.然后在AI或PS中画出写意效果即可. 最终效果 1.在Ph ...

如何用Mockplus快速做一个手风琴菜单？

如何用Mockplus快速做一个手风琴菜单？相关推荐

最新文章

热门文章