axure商城

Axure绘制动态菜单

分享一下小编绘制动态导航菜单的方法~

步骤一:放入一个动态面板,重命名为【动态导航菜单】

Axure绘制动态菜单

步骤二:双击动态导航菜单,进入编辑状态,再添加一个动态面板,调节大小,并重命名为【模块一】

Axure绘制动态菜单

步骤三:双击模块一,进入编辑状态,添加一个矩形,调节大小和【模块一】一样大,并重命名为【一级菜单】

Axure绘制动态菜单

步骤四:把【模块一】下的state1重命名为【收起】,然后复制一个状态,重命名为【展开】

Axure绘制动态菜单

步骤五:在【展开】面板中把一级菜单重命名为【一级菜单-展开】,然后添加几个二级菜单,编号为123

Axure绘制动态菜单

步骤六:单击【收起】面板下的【一级菜单】,添加事件鼠标单击时–设置面板状态–选择模块一–展开–推动/拉动元件–选择线性

Axure绘制动态菜单
推动拉动元件的作用是当有多个模块时,某一个模块在收起展开时,其他模块元件能随之上下移动,不会被遮盖

步骤七:同理,给【展开】面板下的【一级菜单-展开】设置收起的动作

Axure绘制动态菜单

步骤八:此时预览你会发现,面板展开状态只显示出【一级菜单-展开】,并没有【二级菜单】;你只需要单击【模块一】,右键–选择自动调整为内容尺寸即可

Axure绘制动态菜单

步骤九:如果你想增加用户体验,那么可以这样做:选中二级菜单,右键添加样式

Axure绘制动态菜单

在这里小编添加的是鼠标悬停和选中的样式

Axure绘制动态菜单

在这里把样式设置完成后,还需要右键设置选项组,作用是防止三个【二级菜单】同时出现选中的样式

Axure绘制动态菜单

步骤十:此时,我们还需要给【二级菜单】添加选中动作,单击【二级菜单1】,添加鼠标单击时–设置选中–选择【二级菜单1】;其他二级菜单操作同上

Axure绘制动态菜单

步骤十一:此时,我们的模块一就已经制作完成啦,当然一个导航菜单肯定不止一个模块的,所以我们可以单击【模块一】复制几个并编号模块二、模块三……

Axure绘制动态菜单

步骤十二:然后就大功告成啦!快去试一下吧

给TA打赏
共{{data.count}}人
人已打赏
基础教程

Axure8.0教程:滑动翻转效果

2022-5-26 8:22:41

基础教程

Axure8.0教程:列表左右滑动交互

2022-7-13 9:01:15

axure商城
7 条回复 A文章作者 M管理员
  1. Shanez9

    能不能拉一下进群~扫码显示人员满了

  2. loki

    自动调整为内容尺寸的作用是什么?

    • 不懂🍉

      面板尺寸的大小决定了我们能看见内容的多少,本身设置模块一的面板只有一个矩形大小,当转换到展开时,二级菜单就被遮住了,选择自动调整为内容尺寸后就可以根据展示的内容多少来显示了

  3. va海心

    新增多个模块后,除了最后的模块,其他模块菜单展开时都有问题。😭步骤一样,楼主知道是啥原因不?

    • 不懂🍉

      你是不是用键盘上下键调节模块间距了鸭,只能用鼠标拖动模板哦

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索