Axure用一个功能搞定手风琴式菜单设计

10人阅读 评论(0) 收藏 举报

其实很简单,只需要使用“切换可见性”即可完成。(以Axure8为例)

第一步:绘制相关图形

绘制三个矩形作为按钮,分别命名为标题一、标题二、标题三

再绘制三个动态面板,里面填充一些可以区别的内容,命名为内容一、内容二、内容三

第二步:摆放图形位置

标题一与内容一对应,将内容一放置在标题一的下方,其他的依此类推,摆放完毕后,将动态面板设为隐藏。

第三步:设置标题一的动态效果

选中标题一,添加鼠标点击效果。选择切换可见性,设置如下:

先选择内容一位设置为切换、推动拉动元件向下

再选择内容二(三),设置为隐藏、拉动元件向下

第四步:设置标题二

选中标题二进行鼠标点击的设置,和标题一的设置基本一致,注意切换的是当前标题对应的动态面板,隐藏的是其他标题的动态面板

第五步:标题三用同样的方法,设置完后就可以预览看效果了。

题外话:

1. 同样的方法还可以设置左右的切换,在推动\拉动元件时选择向右即可。

2. 如果想要做的效果是,展开内容后,点击其他标题不收起,只有点击当前标题时才收起,只需要将隐藏的动作去掉即可。

3. 另外这种效果不仅可以做菜单也可以做内容的展示,如下图

Axure内的设计:

预览效果:

4. 以上演示的是Axure8的版本,如果使用的Axure7的话使用同样的功能,动作名称有点区别,如下图

查看评论

Axure之手风琴菜单效果实现

先说思路: 1、使用的控件:动态面板(利用动态面板的pull below功能),中继器(位于动态面板之内,两列数据,一列为ID一列为二级菜单名称,使用过滤器提取ID以及一级菜单名称相同的数据即可获得...
  • u013816144
  • u013816144
  • 2016年07月05日 22:27
  • 3079

原生JS手风琴下拉(修改)

上一篇写的原生JS手风琴。有朋友说在同一页面上不能同时new两个方法。不然就会被覆盖。确实是这样。因为写法的问题所以怎么new都是引用的是一个对象;其他的会被覆盖掉.所以针对这事件,做了修改 java...
  • hao452378531
  • hao452378531
  • 2016年08月03日 12:12
  • 852

纯CSS实现手风琴式菜单

最近练手的一个小作品,具体美化还没完善,只是实现基本功能。CSS代码也是用的最基础的,适合新手操作演练。 上代码! CSS部分: ul { list-style:none; marg...
  • ll328062201
  • ll328062201
  • 2014年09月27日 10:19
  • 410

原生js实现手风琴菜单效果 与 css3的过渡实现手风琴效果

最近学了css3的变形、过渡和动画,写了一个用css3手风琴菜单的效果,又想着用原生JavaScript来实现手风琴菜单效果。感觉挺有意思的,现在给大家分享一下。 1、css3实现手风琴效果 ...
  • lgdshr123
  • lgdshr123
  • 2016年11月01日 17:23
  • 2709

风琴式菜单

1.数据库准备 打开RapidWebDevSample.pdm,添加表T_FunctionType如下: 拷贝Preview中的SQL语句在查询器中执行。 手工录入几条数据,注意其中父编...
  • Mr_Walter
  • Mr_Walter
  • 2012年08月30日 15:49
  • 6989

手风琴下拉菜单demo

今天学习了写一个关于手风琴下拉菜单demo,要求:鼠标滑过时打开菜单,兼容IE7、IE8、IE9、Chrome、firefox,index.html必须用iframe 包含着下拉菜单 如下:...
  • fly_feidream
  • fly_feidream
  • 2012年08月13日 12:04
  • 1314

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

手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器。即使是功能强大的Axure,想实现该效果也比较麻烦。但如果你对Mockplus有所了解,你一定知道,利用Mockplus的...
  • jongde1
  • jongde1
  • 2017年06月29日 11:33
  • 685

jQuery和CSS3动感手风琴多级列表树菜单

mtree.js是一款效果非常炫酷的jQuery和CSS3动感手风琴多级列表树菜单插件。该手风琴多级列表树菜单基于velocity.js和CSS3 transitions来制作。它提供了5种主题样式的...
  • sunny_girls
  • sunny_girls
  • 2015年05月26日 12:59
  • 3030

JQ实现手风琴菜单

效果图预览:html和jq:
  • sinat_19327991
  • sinat_19327991
  • 2017年05月17日 00:19
  • 229

Bootstrap 手风琴菜单

  • thingir
  • thingir
  • 2017年01月20日 13:31
  • 479
    个人资料
    等级:
    访问量: 4312
    积分: 167
    排名: 107万+
    文章分类