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

最新推荐文章于 2024-10-29 21:19:05 发布
最新推荐文章于 2024-10-29 21:19:05 发布
阅读量4.6k 收藏 10
点赞数 2
分类专栏： Axure 文章标签： 产品经理 产品设计 交互设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_51370367/article/details/113114080
版权
本文详细介绍了如何使用Axure创建一个包含三级菜单的左侧导航栏。通过转换动态面板和设置隐藏状态，实现了菜单的展开与收起效果。首先创建菜单元件，然后将三级菜单转换为动态面板并隐藏，接着为二级菜单添加交互动作以展示三级菜单，最后为一级菜单设计交互，完成导航栏的制作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. 先放入菜单的相关元件，可以使用矩形，设置相应样式。

  1. 选中所有三级菜单，点击鼠标右键，选择转换为动态面板和设为隐藏，同时将面板命名为‘’ThreePanel‘’。

    在这里插入图片描述

  2. 选中二级菜单和刚才设置的ThreePanel，点击鼠标右键，选择转换为动态面板和设为隐藏，（此时为了方便起见，暂不设为隐藏）；之后，把这个新设置的动态面板命名为“Submenu”。

    在这里插入图片描述

  3. 再双击“SubMenu”，选中“二级菜单”，添加交互动作，首先点击右侧交互，再点击右下角按钮。

最低0.47元/天 解锁文章
Axure RP9.0 教程：左侧菜单列表导航 ( 点击父级菜单，子菜单自动收缩或展开)【响应式的菜单导航】
专注于计算机研发知识和资讯分享
03-25 507
1. 设置目标原件时，选择切换，这样就可以实现，当原件展示时，点击自动隐藏，隐藏时自动显示； 2. 展开/收起原件（推动/拉动原件）设置为方向**向下**
Axure疑难杂症：利用中继器制作三级下拉菜单（逻辑判断进阶）
最新发布
benleiqiang的博客
04-28 672
实现的整体逻辑是利用文本框和中继器制作“伪下拉列表”，从应用场景上广泛应用于后台类型选择框、电商类的类目选择框、物联网平台类型选择框，是中高级产品经理必须掌握的重要知识点。制作难点：用户应用场景下的逻辑判断，实现难度中等；
Axure设计之多级菜单导航教程（中继器）
招风的黑耳优快云
10-29 1420
2、设置好目录/菜单元件后，添加中继器数据列，这里定义了menu_tag、menu_id、parent_id、menu_name、menu_icon、menu_type、selected、display、collect、searchValue、page列，然后再给中继器添加交互。5、设置头部导航目录/菜单，并添加交互。
Axure中ERP框架的三级菜单.rp
07-31
Axure中erp框架三级菜单的实现模型原理及方法，在实际的设计中用处很是广泛。欢迎广大朋友们提出指教及批评！
AXURE技巧用中继器制作三级菜单
mumuyouxi的博客
05-19 2363
xiaji:是否最后一级，1代表还有还一级，例如一级菜单下有二级菜单，就设置为1，没有二级菜单就代表末级，此时设置为0。用户设计好表格模型后，通过控制台的一系列命令，把最终要呈现的数据呈现给用户。注意：这里要设置选中的样式【选中矩形>交互样式>选中>填充颜色】menulevel:菜单等级，1代表一级菜单，以此类推。2）设置左侧图标1级显示icon，非1级隐藏。见上图：按矩形，小图标，箭头图标来设置。display：是否显示，1代表显示。ture:是否显示，1代表选中。载入时，隐藏的菜单会占位，见图。
Axure设计之三级菜单导航教程（中继器）
招风的黑耳优快云
08-21 2057
中继器作为复杂的元件，通常被用来制作“高保真”的动态原型，以达到良好的视觉效果和交互效果。本文将教大家通过AxureRP9工具如何使用中继器设计三级菜单导航。
教你用Axure绘制三级菜单
热门推荐
04-25 1万+
三级菜单（甚至更多级菜单）在我们的各种产品中出现的频率是比较高的，同样，在问怎么做的小伙伴也特别多。想了一下还是说一下三级菜单的做法吧。先看看三级菜单的效果：https://8bf5ra.axshare.com/#c=2  说到三级菜单，我们就先来看看二级菜单怎么做。把二级菜单项都放在一个动态面板中，然后，点击一级菜单时显示这个动态面板，并带有向下推动元件的效果。三级菜单的做法要比二级的要稍微复杂...
使用axure9绘制三级导航
jujuzhu00的博客
04-06 2113
先放一张效果图???? 学习axure肯定会碰到需要做导航栏的时候，并且我觉得导航栏的设计是最基础的，但却不是最简单的交互效果。设计导航栏时，只需要将其想象成多个图层即可。因为axure是原型设计软件，就像一个会动的ps，所有的效果都是通过不同的图片交替展现出来的，每一个鼠标的操作，都对应着改操作下的一个样式，或者说一张图片。所以说交互效果就是不同图层的交换展示，这样可能会好理解一些。 下面我们开始进入教程 1.首先需要将你的全部1、2、3级导航的样式做出来 2.设置三级导航 不管几级导航，都要从最低一级
axure9左侧导航菜单完整示例.rp
08-01
使用动态面板实现左侧菜单完美展示，每个菜单点击后会有对应的页面展示，非常适合各个产品经理当做母版使用。
Axure中继器实现三级菜单
weixin_44933101的博客
10-26 2297
在日常产品设计中，我们时常会使用到系统一级、二级、三级菜单等，那除了传统的动态面板设计菜单、矩形直接设计，有什么更便捷的方式吗，那就是用中继器实现三级菜单，下面我们一起来看看如何实现。Axure Design 高保真原型设计欢迎您，本站提供Axure多种动态交互元件库以及原型模板、高效便捷，提高设计效率。Axure Design 高保真原型设计欢迎您，本站提供Axure多种动态交互元件库以及原型模板、高效便捷，提高设计效率。步骤1：页面中拖入一个中继器，中继器中放三个元件，分别为图片、矩形、箭头图片。
【进阶教程】Axure快速创建动态面板制作左侧下拉菜单导航栏
m0_63108918的博客
04-17 5672
一、实现效果展示 本节主要介绍在产品高保真原型图制作过程中，如何利用Axure创建左侧下拉菜单导航，以更好的帮助产品经理表达产品形态、领导者明确产品设计理念、开发人员迅速开发产品。先上图，展示最终达到的效果： 二、插入动态面板 首先插入一个矩形框，调整尺寸及颜色，输入文字【一级菜单1】，右侧面板名称命名为【一级菜单1】，并点击右键转化为【动态面板】，复制一个并重命名为【一级菜单2】。如下图： 双击【一级菜单1】，进入动态面板管理，将此刻的状态【state1】重命名为【折叠】，如下图：
Axure 三级菜单 手风琴效果
10-31
Axure 三级菜单 手风琴效果的RP文件，无论是学习，还是自用，都可以方便使用。
漂亮三级菜单 导航菜单 菜单
04-23
漂亮三级菜单 导航菜单 菜单 js tree 好用
jQuery后台左侧三级导航菜单
11-19
jQuery后台左侧三级导航菜单 jQuery后台左侧三级导航菜单 jQuery后台左侧三级导航菜单 jQuery后台左侧三级导航菜单
纯CSS实现横向三级菜单导航栏
06-28
纯使用CSS技术实现三级联动导航菜单栏，有需要的盆友可以下载试试看，保证可以正常运营，查看三级联动的效果！
jQuery左侧三级下拉导航菜单
11-19
jQuery左侧三级下拉导航菜单 jQuery左侧三级下拉导航菜单 jQuery左侧三级下拉导航菜单 jQuery左侧三级下拉导航菜单
AXURE8.0制作二级菜单和三级菜单
PM_JING的博客
08-11 5392
Axure 二级菜单 三级菜单
Axure RP9制作三级菜单实现展开收起（保姆级教程）
qq_73566291的博客
08-28 5472
保姆级让你学会三级菜单制作！超详细！不信来看看
css3 三级菜单导航栏
俊刚的博客
10-15 1909
css3制作的三级菜单导航栏： 效果图： 这个是垂直菜单栏：  代码： CSS3 3级菜单 *{margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; font-size:12px;} a{text-decoration:none;display:block;transition:transf
Axure8设计：APP汉堡菜单交互原型
由于提供的信息中，【标题】、【描述】和【压缩包子文件的文件名称列表】内容相同...通过使用Axure8等专业工具进行设计和原型制作，设计师可以快速实现汉堡菜单，并通过测试和迭代不断优化设计，以达到最佳的用户体验。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值