Axure RP9.0 教程：左侧菜单列表导航 ( 点击父级菜单，子菜单自动收缩或展开)【响应式的菜单导航】

最新推荐文章于 2025-06-01 14:52:44 发布
原创 最新推荐文章于 2025-06-01 14:52:44 发布 · 1.3k 阅读 · 0 GEO检测

文章目录

引言

  • 应用场景：PC端管理后台页面，左侧菜单列表导航。

  • 思路： 用到了动态面板的两个交互效果来实现：隐藏/显示切换、展开/收起元件向下

I 实现步骤

添加商品管理菜单组

  1. 在左侧画布区域添加一个菜单栏矩形框；
  2. 再添加一个商品管理菜单组及商品列表、添加商品、销售报表子菜单；
  3. 选择商品列表、添加商品、销售报表子菜单，右键创建动态面板，并将动态面板设置为隐藏

标签
#axure
了解本专栏 订阅专栏 解锁全文 超级会员免费看
【进阶教程】Axure快速创建动态面板制作左侧下拉菜单导航栏
m0_63108918的博客
04-17 6001
一、实现效果展示 本节主要介绍在产品高保真原型图制作过程中，如何利用Axure创建左侧下拉菜单导航，以更好的帮助产品经理表达产品形态、领导者明确产品设计理念、开发人员迅速开发产品。先上图，展示最终达到的效果： 二、插入动态面板 首先插入一个矩形框，调整尺寸及颜色，输入文字【一级菜单1】，右侧面板名称命名为【一级菜单1】，并点击右键转化为【动态面板】，复制一个并重命名为【一级菜单2】。如下图： 双击【一级菜单1】，进入动态面板管理，将此刻的状态【state1】重命名为【折叠】，如下图：
【Axure 教程】中继器中级教程-左侧导航
ofay
09-03 643
相信经过前面的 6 篇入门教程，大家已经对中继器有一定的入门了解，那么今天我们进一步学习如何使用中继器制作我们经常用到的左侧导航；
Axure常用交互效果五——展开与收回
BenLeiQiang的博客
10-10 2966
步骤八：为收回添加交互，载入时隐藏收回，单击时——显示展开，隐藏收回——隐藏背景1，隐藏新增查询条件——查询组合回到原位。步骤五：为展开按钮添加交互，单击时——显示查询条件和背景1——移动查询条件。步骤六：坐标的选择，需要我们模拟新增条件查询预到达位置，并记录下这个坐标；在做完以上交互后，我们还要隐藏展开这个按键，并显示收回，调起其他交互；步骤三：为新增的查询条件添加交互，组合这个查询条件，载入时隐藏。步骤四：组合查询按钮、展开和收回；
Axure实现导航栏的展开与收缩
LAO__LIN的博客
04-12 3224
使用场景一般是B端后台系统需要以导航栏的展开与收缩实现原型的动态交互，主要使用区域是左边或者顶部的导航栏展开与收缩，同一级导航下的小标题，放在一起既美观又节省时间。
保姆式一步一步制作B端左侧菜单栏
人不风流枉少年
05-24 537
因为“左侧菜单栏容器”和二级菜单的x一样，宽度也一样，所以二级菜单的右边框就与“左侧菜单栏容器”的边框重叠在一起了。为什么一定要重叠在一起呢？因为二级菜单是个矩形，矩形的右边框是实线宽度为1，一旦二级菜单的x坐标和宽度和左侧菜单栏容器的x坐标和宽度完全保持一致，就会造成一种假象：二级菜单栏没有右边框的假象（因为二级菜单栏右边框和左侧菜单栏容器的右边框重合了，给人一种错觉，这个边框是左侧菜单栏容器的边框而不是二级菜单的边框）。选中一级菜单及图标和所有二级菜单，转为动态面板，并复制一份状态，并对状态名重命名。
小白自学Axure- 侧边菜单栏
weixin_50534910的博客
01-09 2144
在状态一“折叠”下创建交互，选择事件（单击/双击...触发）-选择“设置面板状态”-修改面板状态为”展开“，并勾选二级菜单展示方式。再选择状态二“展开”以同样步骤创建交互就能得到一个菜单栏咯。建议：给每一个动态面板设置名称，这样在后续设置交互时，便于区别、操作！2、双击打开后设置每个状态的样式。1、给对应项创建“动态面板”
Axure RP9教程 推拉效果
热门推荐
jun118166的博客
06-07 1万+
Axure 动态面板快速实现菜单导航收缩展开一，说明二，效果显示三、操作步骤 一，说明 在PC端管理后台页面，经常会遇到左侧菜单列表导航，通过左侧的菜单点击打开相应的页面。如果左侧的菜单比较多时，我们就需要对菜单进行分类，实现点击父级菜单，子菜单自动收缩或展开，提升用户体验。 二，效果显示 三、操作步骤 ...
axureR9 制作左侧菜单弹出收起效果
mumuyouxi的博客
05-15 1332
单击时>显示/隐藏动态面板>切换>向下滑动>更多选项>推拉原件>下方>效果选择线性>点击完成。第三步：拖拉一个动态面板>动态面板里面拖拉button作二级菜单>动态面板隐藏。第五步：再拖拉一个button做一级菜单，和原先的一级菜单并排。第四步：点击一级菜单button，设置交互【第二步：拖拉1个button作一级菜单。第一步：打开axure,创建1个页面。
axure菜单栏实现，附原件
weixin_43601047的博客
08-24 4645
axure实现左侧菜单栏，包含：一级菜单的打开和关闭，鼠标的悬停和选中效果。原型预览地址仅作学习记录…
导航菜单栏的弹出与收起|零基础学Axure|产品经理
qq_43777616的博客
08-17 845
导航菜单栏的弹出与收起|零基础学Axure|产品经理
Axure RP 9 for mac 高保真原型图 - 案例18 【导航栏-展开、收起】导入元件库
GroupiesM的博客
09-16 3289
Axure RP 9 for mac 高保真原型图 - 案例18 【导航栏-展开、收起】导入元件库
用Axure实现左侧动态导航栏
qq_66798676的博客
06-25 1191
双击p1，面板状态管理。把state1改名为展开状态。在点击+号按钮，新添两项，取名为展开状态和收起状态。．给动态面板p1设置动作，选择状态那里选择“Next”．双击打开收起状态，在面板中画一个导航栏A一样的矩形。把把导航栏A、A1、A2设为动态面板，取名p1。给导航栏B设置动作，导航栏对应正确的动态面板。首先在面板上画几个矩形，大小一样排列好。首先在面板上画几个矩形，大小一样排列好。把B1、B2设为动态面板，取名p2。
Axure RP9——【工具栏展开收起效果】
两条线-twolines
11-25 7442
工具栏展开收起效果 TOOLBAR 目录 工具栏展开收起效果 I.效果演示 II.实现步骤 I.效果演示 当点击按钮的时候，可以显示出工具栏的内容；再次点击可以收缩复原。 如下演示： Axure RP9 ——工具栏展开收起效果 II.实现步骤 （1）工具栏展开效果 ①按钮先向右移动一小段缓冲距离 ②按钮向左移动到达指定位置；工具栏面板从中心向两端展开；工具栏组合移动到（0,0）的位置 ③按钮通过旋转变成关闭样式 （2）工具栏关闭效果 ①按钮先向左移动一段...
Axure学习记录（菜单下拉/收起效果）
qq_41604890的博客
07-05 1726
学习Axure 跳转页面 和 菜单下拉功能
Axure RP9制作三级菜单实现展开收起（保姆级教程）
qq_73566291的博客
08-28 6931
保姆级让你学会三级菜单制作！超详细！不信来看看
Axure RP制作可收缩菜单
qq_53878224的博客
10-10 1874
前言 Axure RP可以完成很多设计，其中菜单设计又必不可少，小白我来分享分享我做的可滑动收缩菜单吧！希望可以给初次使用Axure RP的人一点帮助 一、效果展示 二、步骤如下 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignore') impor
Axure 9实现左侧动态导航栏
James199209的专栏
03-26 5448
目前很多B端产品都是基于左侧的导航栏，有研究表明导航栏放在左侧效率更高。那基于Axure怎么能够实现呢，其实只需要动态面板组件就可以搞定。 1.首先，拖入四个矩形组件，如下图所示，第一个矩形取名为一级菜单1。然后将后三个全部选中，右键选择转化为动态面板。取名为二级菜单1。 2.这个动态面板可以预先设置为隐藏。该设置是为了实现在点击一级菜单时才能显示出二级菜单。默认是不展开的效果。 3.接下来设置动画效果，选中一级菜单1组件，右侧选择动作--单击时，显示/隐藏，目标选择二级菜单1，选择切换，同时
Axure8实现最常见的左侧动态导航
SCGH_Fx的专栏
03-23 1万+
转载自：Axure8实现最常见的左侧动态导航当初自己想了很久才实现了这种左侧的动态菜单栏。今天我跟大家分享一下怎么实现点击实现动态开合的那种左侧菜单栏。希望能帮助到一些刚入门的朋友们。主要知识点：通过显示/隐藏实现子菜单的开合通过移动控制菜单间的跟随移动，实现动态效果问题：想实现一个如下图一样的左侧动态菜单栏核心思路：菜单的开合怎么实现？答：可以通过动态面板的显示/隐藏实现开合，每级父菜单下的子菜...
Axure组件即拖即用：垂直折叠菜单（动态展开/收回交互）
最新发布
BenLeiQiang的博客
06-01 1393
《Axure垂直折叠菜单组件解决方案》摘要 针对Axure原型设计中的菜单交互痛点，本文推荐一款高效垂直折叠菜单组件。该组件支持多级嵌套、平滑动画和自适应宽度，经万次点击测试稳定可靠，特别适合后台系统、移动端及数据平台等场景。解决方案包含智能预加载、自定义交互事件等功能，提供5级菜单支持（可扩展至10级），并详细解答了展开方向、页面跳转等常见问题。与传统自制方案相比，该组件将开发耗时从8小时降至3分钟，显著提升原型设计效率。附赠RP文件下载及使用教程。
Axure高级交互设计：垂直菜单展开与折叠（100%成功）
BenLeiQiang的博客
10-18 2221
步骤二：命名，设置两个主菜单组合，命名为基本元件库和交互效果；并分别组合两个子菜单，分别命名为基本元件库子菜单、交互效果子菜单；步骤一：拖入矩形，将颜色设置成和案例一致即可，分别进行文字输入，参考案例；步骤六：叠加四个按钮，形成如下图的效果；如有其他相关问题，欢迎私信沟通，关注。步骤五：交互效果菜单项展开与折叠交互。步骤三：添加两个子菜单载入时隐藏；步骤七：添加整体悬停效果，完工。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java、iOS、Vue

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值