欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
优化推广News

简单实用|如何快速做一个手风琴菜单?

发布时间:2017:07:06 07:00:42 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有947个文字,预计阅读时间3分钟
导语
本文教大家如何利用Mockplus的“面板”组件,快速地做一个手风琴式的菜单,简单实用,学起来吧。

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

简单实用|如何快速做一个手风琴菜单?

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

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

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

简单实用|如何快速做一个手风琴菜单?

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

简单实用|如何快速做一个手风琴菜单?

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

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

简单实用|如何快速做一个手风琴菜单?

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

简单实用|如何快速做一个手风琴菜单?

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

简单实用|如何快速做一个手风琴菜单?

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

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

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

  面板1:

  链接到自己,调整大小。

  链接到面板2,位移。

  链接到面板3,位移。

  面板2:

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

  链接到面板3,位移。

  面板3:

  链接到自己,调整大小。

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

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

  文/庸 微信公众号:Mockplus

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:吴晓波:内容创业这三年很苦 用商业逻辑来看你热爱的事 风险巨大

下一篇:商城网站如何做才能吸引客户

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信