【Axure动态面板】利用动态面板实现树形菜单的制作

这篇具有很好参考价值的文章主要介绍了【Axure动态面板】利用动态面板实现树形菜单的制作。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

利用动态面板,简单制作高保真的树形菜单。

、先看效果

       https://1poppu.axshare.com

二、实现思路

1、菜单无非就是收缩和展开,动态面板有个非常好的属性:fit to content,这个属性的含义是:面板的大小可以根据内容多少而变化;

2、菜单的收缩和展开,可以通过切换面板的状态来实现即可,即每个菜单设置两个状态:收缩和展开两个状态;

3、再利用面板状态切换时,对某个菜单下面的组件进行推或者拉的功能,实现移动其他菜单的位置。

三、需要的元件

1、一个菜单的容器面板(Panel)

2、若干个菜单面板,一个菜单就一个子面板,凡在容器面板中;

3、每个菜单都放一个Box组件,即线框,否则没办法实现菜单的鼠标移入的动态效果

4、每个菜单面板设置两个状态:收缩状态就是菜单名(一级),展开状态就是菜单名和这个一级菜单下的字菜单。

如下图:

【Axure动态面板】利用动态面板实现树形菜单的制作,axure

【Axure动态面板】利用动态面板实现树形菜单的制作,axure

、交互的添加

1、一级菜单的Box组件,设置MouseOver Style的属性,如下图:

【Axure动态面板】利用动态面板实现树形菜单的制作,axure

2子菜单的Box组件,是这MouseOver Style的属性和Selected Style,并且SelectGroup设置同一个值,如“子菜单”等,如下图:

【Axure动态面板】利用动态面板实现树形菜单的制作,axure

3、菜单的Panel添加Click Or Tab交互,如下图:

【Axure动态面板】利用动态面板实现树形菜单的制作,axure

上图中,箭头标识出的一定要“勾选”上,否则没有菜单的效果。

4、子菜单的Box组件添加Click Or Tab交互,这里只实现了选中状态,可以添加点击时,打开某一个页面,Open link。,如下图:

【Axure动态面板】利用动态面板实现树形菜单的制作,axure

每个一子菜单都需要填写。

按照以上步骤,即可实现高保真的菜单效果文章来源地址https://www.toymoban.com/news/detail-631660.html

到了这里,关于【Axure动态面板】利用动态面板实现树形菜单的制作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Axure教程—菜单(中继器)

    本文将教大家如何用AXURE中的中继器制作菜单(自动折叠其他菜单) 一、效果介绍 如图: 预览地址:https://iuek50.axshare.com 下载地址:https://download.csdn.net/download/weixin_43516258/87854640?spm=1001.2014.3001.5503 二、功能介绍 点击菜单,展示其子菜单 自动折叠其他菜单 三、制作方法 (

    2024年02月08日
    浏览(48)
  • Axure rp9 利用中继器实现列表新增行、删除行的效果

    中继器(英文名Repeater)是目前为止Axure最复杂的功能(没有之一),学习它的使用有助于我们快速设计一些复杂的交互界面。本文通过Axure rp9 利用中继器实现列表新增行、删除行的案例,介绍如何利用中继器实现以下效果: 1、利用中继器实现列表的隔行变色。 2、实现列表

    2024年02月12日
    浏览(39)
  • Axure8.0教程:下拉菜单+复选框全选(中继器)

    在设计过程中会常常用到下拉菜单,本次课程我们学习下拉菜单+复选框全选效果。 预览及下载地址:https://ahbvk2.axshare.com/ 一、制作原型 1.制作下拉菜单的选择框 拖入两个【矩形】元件,【文本标签】制作成下拉菜,菜单部分组合一起 2.制作下拉菜单中的菜单部分 (1)全选

    2024年02月05日
    浏览(54)
  • Axure网页端高交互组件库, 下拉菜单文件上传穿梭框日期城市选择器

    组件数量:共 11 套 兼容软件:Axure RP 9/10,不支持低版本 应用领域:web端原型设计、桌面端原型设计 本作品为「web端组件库」,高保真高交互 (带仿真功能效果);运用了动态面板、中继器、变量值,可以自定义数据;主要包括表单类和选择器,一共11套组件。 表单类有:输

    2024年02月04日
    浏览(59)
  • 【Axure视频教程】布尔运算制作自定义形状

    今天教大家在Axure通过布尔运算制作自定义形状,本教程从布尔运算的基础原理和操作讲起,然后通过制作气泡输入框、环形、可视图标这3个案例更加深入的教大家如何使用布尔运算制作出自己需要的形状或者图标。具体效果可以参考下方视频,该教程从0开始制作,手把手教

    2024年02月04日
    浏览(50)
  • 用Axure RP 9制作弹出框

    1.准备文本框  下拉列表   按钮   动态面板  如图  2.先把下拉列表放好 再放动态面板覆盖  3.点动态面板 进入界面 如图 4.给按钮添加交互 3个按钮一样的 如图 5.提交按钮添加交互 如图

    2024年01月23日
    浏览(46)
  • Axure网页端高交互组件库11套, 下拉菜单文件上传穿梭框日期城市选择器

    组件数量:共 11 套 兼容软件:Axure RP 9/10,不支持低版本 应用领域:web端原型设计、桌面端原型设计 本作品为「web端组件库」,高保真高交互 (带仿真功能效果);运用了动态面板、中继器、变量值,可以自定义数据;主要包括表单类和选择器,一共11套组件。 表单类有:输

    2024年01月17日
    浏览(40)
  • Axure动态显示实时时间

    Axure制作动态的实时时间(视频右上角) 步骤教学 【新建元件】实时时间的显示区域新建一个动态面板(2个状态面板) 【新建元件】两个状态面板的相同位置,分别新建“一级标题”(实时时间1、实时时间2);注意:最后显示的实时时间的字体样式跟“一级标题”一致,

    2024年02月13日
    浏览(34)
  • 90套Axure原型模板源文件Rp高保真ui产品经理app web 网站案例模板(Axure9制作)

    素材信息名称:90+套Axure原型图设计源文件 格式:RP格式(Axure软件) 产品经理全套文档模板Axure8可以打开8、7版本制作 Axure9可以全部打开9、8、7版本制作 点此下载全部资源 后面还有很多 ——网站 阿里云网站.rp车辆违章处理.rp城市介绍网站.rp城市旅游网站.rp城市网站.rp城市

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包