Axure学习笔记（十）-手风琴菜单效果实现（使用动态面板）

最新推荐文章于 2024-04-03 15:19:22 发布
VIP文章 最新推荐文章于 2024-04-03 15:19:22 发布
阅读量610 收藏 2
点赞数
分类专栏： Axure 文章标签： 产品设计 axure
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48911487/article/details/119816863
版权

注：本笔记适用环境：win10+Axure RP 8

1.构建两个状态

2.勾选自动调整尺寸（让下拉的部分能够显示出来）

3.设置点击事件（state1和state2要分开画，不然会不管点击哪——选项卡或者是子选项，都会跳转到下一个状态的）

第二个图有错！！！看最后的补充！

最低0.47元/天 解锁文章
雨季袭来
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Axure 三级菜单 手风琴效果
10-31
Axure 三级菜单 手风琴效果的RP文件，无论是学习，还是自用，都可以方便使用。
使用Axure制作手风琴菜单
weixin_44540247的博客
01-15 1086
Axure在页面设计这一块起到了很大作用，它不仅可以将客观的文本改变为直观的演示模板，还可以对于页面的各个方面进行UI设计美化页面等等。 例如设计一个网站肯定少不了菜单栏。菜单栏的样式很多，有点击显示菜单、移入显示菜单等等。现在在设计上都喜欢加入一些看起来比较酷的操作，手风琴菜单也是比较普遍的样式。从展开样式，到动画特效看起来都是比较舒服的。 下面将分为两块来讲解如何使用Axure制作一个手风琴菜单的样式模板。 菜单样式布局： 如上图是一个简单的菜单栏样式。 这样一个布局很简单，首先需要搭建一个背景框架，
Axure案例分享—垂直手风琴（附下载地址）
最新发布
weixin_43516258的博客
04-03 485
今天分享的案例是Axure8(兼容9和10)制作的垂直手风琴
axure9 变成小手_Axure9原型设计：动态面板实现手风琴菜单（低配版）
weixin_39974958的博客
12-19 260
原标题：Axure9原型设计：动态面板实现手风琴菜单(低配版)编辑导语：手风琴菜单常常在多级目录中使用，是系统设计中常见的设计之一。本文作者主要分享了用Axure9动态面板如何实现手风琴菜单效果，一起来看看~ 在学习动态面板的时候，看到5分钟玩转Axure之动态面板(进阶)手风琴菜单效果很好，只是写的不够详细，在一番摸索后，貌似到达了同样的效果。所以分享出来，做一个简单的示例说明。步骤如下：一、拖...
Axure 9 实战案例，动态面板的应用 6，导航菜单栏的手风琴效果
默林工作室
09-02 2449
Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>我们接着再继续学习动态面板的应用，本篇课程我们来讲解一下，如何运用动态面板绘制导航菜单栏的手风琴效果。我们还是先来看看完成效果图，大家可以看到，手风琴菜单的交互主要包括：①点击菜单1~3时，可展开或收起内容区域；②点击收起菜单1~2时，其余下方菜单均向上移动；③点击展开菜单1~3时，其余菜单均收起（即手风琴效果）。菜单初稿一如既往，这里提前把菜单初稿准备好了。下面来给大家讲解一下手风琴效果的实现步骤。
axure7.0原型_小楼作品_中继器手风琴菜单.rp
12-29
axure7.0原型_ 中继器手风琴菜单.rp axure的手风琴效果，
Axure设计-图片手风琴效果
05-31
Axure设计—图片手风琴效果；Axure设计—图片手风琴效果；Axure设计—图片手风琴效果
axure-菜单栏母版实现-使用动态面板
08-24
axure实现左侧菜单栏，包含：一级菜单的打开和关闭，鼠标的悬停和选中效果。
axure8利用动态面板实现手风琴效果
10-18
利用动态面板实现手风琴效果视频教程加原文件，原创。
Axure9原型设计：动态面板实现手风琴菜单.docx
05-30
Axure9原型设计：动态面板实现手风琴菜单.docx
Axure 折叠面板（手风琴）动态交互效果制作
weixin_44933101的博客
08-01 2260
什么是折叠面板？ 折叠面板可能是响应式设计中的最重要主力。这是一个非常有用的逐步呈现的模型——突出显示每个部分的重要细节，必要时利用点击来显示更多详细信息。因此，设计始终集中在最先显示的关键信息上，以便其他一切都易于访问。......
Axure RP9 手风琴效果设置
07-08
利用Axure画原型，分享手风琴效果的模版
下拉菜单的手风琴效果
lelewang123的博客
07-23 863
html代码<div class="site-nav"> <ul class="site-accordion"> <li> <div class="tab-head">学科领域</div> <ul class="tabs-list"> <li>机械电子</li> <
动态菜单_Axure教程：快乐实现手风琴菜单动态效果
weixin_33507838的博客
01-15 256
每个人心里都有一个小九九，幻想自己是某一个领域的技术大神，但现实中我们少了那份执着和坚持；而我曾经是这样子的，可现在想改变了，想让自己每天都变得进步一点点，所以坚持每周更新Axure教程，希望与大家共勉一起学习。今天和大家分享的是Axure手风琴效果实现，见如下自制动态效果：效果实现解读：拖拽三个动态面板，每个动态面板分别创建两个state，然后添加内容，如：State1内容：State2内容：分...
Axure教程—折叠面手风琴效果
weixin_43516258的博客
06-24 854
上文中介绍了用Axure制作折叠面板的基础制作，这次介绍折叠面板手机风琴效果
Axure绘制折叠面板-手风琴效果
产品阿强
06-27 276
Axure如何绘制折叠面板（手风琴效果）
Axure RP从入门到精通（四十九）案例 - 手风琴菜单
人不风流枉少年
07-10 816
拖入一个矩形，设置文本为“菜单一”并命名为“菜单一”，拖入一个动态面板命名为“内容一”，放在矩形的整下方，填充动态面板状态的内容并默认设置为隐藏。 复制菜单一矩形命名为菜单二并放在菜单一的正下方。 在菜单二的正下方放置一个动态面板并命名“内容二”，填充一下State1的内容。 复制菜单二矩形命名为“菜单三”放在菜单二的正下方。 在菜单二的正下方再添加一个动态面板。 为菜单一添加鼠标单击事件，让内容一切换隐藏性，隐藏其它(内容二和内容三)的动态面板。 为菜单二添加鼠标单击事件，让内容二切换隐藏性，隐藏其它(.
HTML+CSS：手风琴菜单
努力学习编程中
04-23 749
源于b站up视频，觉得很有趣，想保存下来学习，“34行CSS代码简单实现手风琴菜单”，原视频见https://www.bilibili.com/video/BV1v7411R7pn 效果图如下：（感觉超级好！） html部分： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"...
[原创] 手风琴菜单
大象的博客
01-07 465
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #subView body,ul,li{margin: 0 auto;padding: 0;font-family: 'Microsoft Yahei',Arial, sans-serif} #subView ul,#subVie
AXure如何使用动态面板
03-25
Axure中使用动态面板实现条件分支、状态切换、表单验证等功能，并可将多个页面合并在一起，极大地降低了页面数量，提高了用户体验。下面是使用动态面板的步骤： 1. 在Axure中创建一个页面，添加需要的元素，如按钮、输入框、图片等。 2. 选择需要实现动态效果的元素，然后在样式属性栏中点击“交互”选项卡，在“选择触发事件”中选择“单击”。 3. 在右侧“动作”面板中选择“设置面板状态”，然后选择面板状态，如“打开面板”、“关闭面板”等。 4. 在面板状态中添加需要显示的元素，可以通过复制、粘贴等方式添加，还可以设置元素的触发事件、样式等属性。 5. 在主页面上添加动态面板所需的条件和逻辑，如根据输入内容显示不同的信息、根据用户选择展示不同的图片等。 6. 导出Axure原型，进行测试和优化。 使用动态面板可以大大提高原型的交互性和易用性，同时也充分展示了Axure的优势及其应用价值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值