用Axure实现左侧动态导航栏

已于 2023-06-25 23:51:20 修改
阅读量890 收藏
点赞数
文章标签： axure 交互
于 2023-06-25 23:48:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66798676/article/details/131388065
版权
本文介绍了两种用Axure实现左侧动态导航栏的方法。第一种方法涉及动态面板p1的创建和状态管理，包括展开和收起状态。第二种方法同样利用动态面板p2，设置不同导航项的动作，以实现相应的交互效果。
摘要由CSDN通过智能技术生成

第一种方法：

1.首先在面板上画几个矩形，大小一样排列好。

2. 把把导航栏A、A1、A2设为动态面板，取名p1

        

最低0.47元/天 解锁文章
贝贝.785
关注
Axure RP从入门到精通（五十一） 案例 - 左侧菜单栏导航
人不风流枉少年
08-10 2340
1 更改页面尺寸，将Auto改为Web，页面布局改为左侧对齐。 页面尺寸和页面布局都会对元件的位置有影响。 拖一个动态面板作为左侧菜单导航栏的整体容器，设置x:0, y:50（这里留出50是给顶部导航使用的）w: 210，双击动态面板进入State1设置填充颜色R: 48 G: 66 B: 86，动态面板只有一个状态State1。 页面载入时设置尺寸，设置高度为：[[Window.height - 50]]，至此左边导航栏的容器算是完成。 双击导航栏容器进入State，拖拽一个矩形作为一级
【进阶教程】Axure快速创建动态面板制作左侧下拉菜单导航栏
m0_63108918的博客
04-17 5437
一、实现效果展示 本节主要介绍在产品高保真原型图制作过程中，如何利用Axure创建左侧下拉菜单导航，以更好的帮助产品经理表达产品形态、领导者明确产品设计理念、开发人员迅速开发产品。先上图，展示最终达到的效果： 二、插入动态面板 首先插入一个矩形框，调整尺寸及颜色，输入文字【一级菜单1】，右侧面板名称命名为【一级菜单1】，并点击右键转化为【动态面板】，复制一个并重命名为【一级菜单2】。如下图： 双击【一级菜单1】，进入动态面板管理，将此刻的状态【state1】重命名为【折叠】，如下图：
Axure8实现最常见的左侧动态导航
热门推荐
SCGH_Fx的专栏
03-23 1万+
转载自：Axure8实现最常见的左侧动态导航当初自己想了很久才实现了这种左侧的动态菜单栏。今天我跟大家分享一下怎么实现点击实现动态开合的那种左侧菜单栏。希望能帮助到一些刚入门的朋友们。主要知识点：通过显示/隐藏实现子菜单的开合通过移动控制菜单间的跟随移动，实现动态效果问题：想实现一个如下图一样的左侧动态菜单栏核心思路：菜单的开合怎么实现？答：可以通过动态面板的显示/隐藏实现开合，每级父菜单下的子菜...
【Axure 教程】中继器中级教程-左侧导航
最新发布
ofay
09-03 298
相信经过前面的 6 篇入门教程，大家已经对中继器有一定的入门了解，那么今天我们进一步学习如何使用中继器制作我们经常用到的左侧导航；
小白自学Axure- 侧边菜单栏
weixin_50534910的博客
01-09 1213
在状态一“折叠”下创建交互，选择事件（单击/双击...触发）-选择“设置面板状态”-修改面板状态为”展开“，并勾选二级菜单展示方式。再选择状态二“展开”以同样步骤创建交互就能得到一个菜单栏咯。建议：给每一个动态面板设置名称，这样在后续设置交互时，便于区别、操作！2、双击打开后设置每个状态的样式。1、给对应项创建“动态面板”
Axure左边菜单，右边显示内容案例
03-29
Axure8.0制作选择左边菜单栏，右边显示相关内容案例，相关详细图文操作，可以参考博客内容：http://blog.csdn.net/ffacffac/article/details/67639914
Axure中动态面板使用及轮播图&多种登录方式&左侧导航栏之案列
2301_76988707的博客
12-15 1756
轮播图是一种常见的界面元素，用于在网页或移动应用中展示多个图片或内容，并通过自动循环或手动切换的方式进行展示。通常由一个主要的显示区域和一组导航指示器（如小圆点或箭头）组成。轮播图可以用于展示产品、广告、新闻、图片集等内容，以吸引用户的注意力并提供更多的信息和选择。它一般会在页面的头部或突出位置展示，通过切换不同的图片或内容，引导用户进行浏览和交互。轮播图可以自动播放，按照设定的时间间隔自动切换展示的内容；也可以由用户手动切换，通过点击导航指示器或滑动触摸屏幕来切换内容。通过合适的。
Axure 9实现左侧动态导航栏
James199209的专栏
03-26 4581
目前很多B端产品都是基于左侧的导航栏，有研究表明导航栏放在左侧效率更高。那基于Axure怎么能够实现呢，其实只需要动态面板组件就可以搞定。 1.首先，拖入四个矩形组件，如下图所示，第一个矩形取名为一级菜单1。然后将后三个全部选中，右键选择转化为动态面板。取名为二级菜单1。 2.这个动态面板可以预先设置为隐藏。该设置是为了实现在点击一级菜单时才能显示出二级菜单。默认是不展开的效果。 3.接下来设置动画效果，选中一级菜单1组件，右侧选择动作--单击时，显示/隐藏，目标选择二级菜单1，选择切换，同时
Axure8实现左侧动态菜单的几种方法
sinat_38715103的博客
06-12 1万+
以下实现的教程采用Ant design的界面模版进行分步说明，左侧动态菜单的实现方法关键在于怎么实现交互而不是设计规范，这里推荐大家在团队协作过程中使用规范的设计框架，网上有很多，可以自己找。特别是后台产品的设计开发，有助于快速输出产品，把原型转变为html这个过程的沟通时间和开发时间可以大大减少，所以我在这篇教程中也是怎么方便怎么来。 首先我们要知道需要做什么，做成什么效果，通常我们...
Axture RP9实现动态导航栏
2301_76794079的博客
06-27 883
4，主导航栏选择新建交互-单击时-显示隐藏-选择元件（为之前动态面板）-选择切换-动画效果按照自己想法设置-确认。完成简单交互，如图所示。2，将子导航栏全选，并按鼠标右键，转化为动态面板，给动态面板加一个名字（方便后续选择），并将动态面板隐藏，如图所示。3，在主导航栏这一项选择交互，按照自己想法添加元件样式。实现动态导航方法很多，简单介绍一种。1，如图做好自己想要做到导航栏。此帖子为作者学习经验记录。
Axure制作web后台左侧菜单栏
仅此而已
12-07 2836
1、添加一级菜单、二级菜单 在元件库拖拽一个矩形到‘左侧菜单栏’页面，设置矩形背景颜色。 在元件库拖拽一个文本标签到‘左侧菜单栏’页面当作一级菜单，设置字体大小和颜色。 复制几个文本标签当作二级菜单，设置字体大小和颜色。 2、设置动态面板 选中二级菜单右键点击‘转换为动态面板’。 将动态面板设置为隐藏。 选中动态面板设置一个名称。 参照上述步骤将其他二级菜单也添加一下动态面板。 3、添加切换动作，点击一级菜单时，显示下属二级菜单。 选中一级菜单，在交互里面找到‘鼠标单击时’。 切换可见性——
axure9左侧导航菜单完整示例.rp
08-01
使用动态面板实现左侧菜单完美展示，每个菜单点击后会有对应的页面展示，非常适合各个产品经理当做母版使用。
Axure动态交互侧边栏UI隐藏弹出动态菜单导航-2018时尚版
09-14
手机端和PC端都可以用的交互，侧边栏，侧滑效果，隐藏效果。
仿京东的左侧菜单
11-30
仿京东的左侧菜单，非常好用，大家都来试一下吧
Axure RP 10制作导航栏指示效果
Peppaaa的博客
05-31 630
本文介绍了如何用Axure RP 10制作导航栏指示效果。
Axure |导航条的实现
求知：数据科学家之路
03-28 1174
实现导航条使用Axure RP 9 制作导航条功能参照物Axure中的操作新建page页面制作页面和导航页设置交互名称左侧导航条与内容绑定将导航条转为动态面板发布，看效果 使用Axure RP 9 制作导航条功能 疫情期间，学学Axure，为以后能将常规数据功能实现产品化准备。 参照物 在拖动鼠标上下滑动时，右侧的导航栏目是没有变化的，此外点击导航栏中的按钮，也是不会改变导航栏的位置。现在来模仿下...
Axure8.0：标签导航栏
weixin_43516258的博客
07-08 1118
本次分享的的案例是Axure8.0制作的标签导航栏。 预览及下载地址：https://40074m.axshare.com
使用Axure RP 8制作两种导航菜单-下拉导航
qq_38548448的博客
09-15 3319
日常在绘制web端原型时，往往会涉及到导航栏的制作，文章主要记录两种常见导航栏的绘制方法。
axure web左侧菜单
07-08
Axure是一种可用于创建原型和交互设计的工具，而左侧菜单是网页设计中常见的导航栏样式之一。Axure中的左侧菜单通常用于展示网页的主要功能或页面间的导航链接。 在Axure中，我们可以使用自定义的交互组件来创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值