首页
我的博客
写文章
登录
注册
网站导航
互站首页
源码集市
服务市场
域名交易
网站交易
任务大厅
商家专区
互站社区
Axure8.0:移入菜单(带子菜单)
原创
纤纤露
2022-09-20 11:00:35
评论(0)
阅读(340)
建立一个菜单时往往会附带多个子菜单,这样的效果如何达成呢?本文示范了如何用Axure制作移入菜单效果,希望对你有帮助。 ![](https://img.huzhan.com/blog/20220920/20221663642435275.png) 预览及下载地址:[https://pwd3jh.axshare.com](https://pwd3jh.axshare.com "https://pwd3jh.axshare.com") 一、制作原型 1、拖入一个矩形元件,设置宽度:100x,高度:45px,输入内容:“移入菜单”,字体设置为:微软雅黑,颜色设置为:#199ED8,在其上拖入一个动态面板,命名为:三角旋转。 设置“上”和“下”两个状态,“上”拖入一个矩形其形状为箭头朝上的三角形,颜色设置为:#FFFFFF,“下”拖入一个矩形其形状为箭头朝下的三角形,颜色设置为:#FFFFFF。 矩形元件和动态面板组合命名为:导航栏1,如图: ![](https://img.huzhan.com/blog/20220920/20221663642489473.png) 2、拖入一个矩形元件,设置宽度:100x,高度:179px,其边框设置颜色为:#199ED8,在其上拖入四个矩形元件,设置宽度:100x,高度:45px,分别输入:菜单一、菜单二、菜单三、菜单四,在菜单四的矩形中加入一个动态面板,命名为:三角旋转。 设置“上”和“右”两个状态,“上”拖入一个矩形其形状为箭头朝上的三角形,颜色设置为:#199ED8,“右”拖入一个矩形其形状为箭头朝右的三角形,颜色设置为:#199ED8。 矩形元件和动态面板组合命名为:导航栏2,如图: ![](https://img.huzhan.com/blog/20220920/20221663642500216.png) 3、在”导航栏2“右边拖入一个矩形元件,设置宽度:100x,高度:133px,其边框设置颜色为:#199ED8,在其上拖入三个矩形元件,设置宽度:100x,高度:45px,分别输入:菜单一、菜单二、菜单三,在菜单三的矩形中加入一个动态面板,命名为:三角旋转。 设置“上”和“右”两个状态,“上”拖入一个矩形其形状为箭头朝上的三角形,颜色设置为:#199ED8,“右”拖入一个矩形其形状为箭头朝右的三角形,颜色设置为:#199ED8。 矩形元件和动态面板组合命名为:导航栏3,如图: ![](https://img.huzhan.com/blog/20220920/20221663642514872.png) 4、在“导航栏3”右边拖入一个矩形元件,设置宽度:100x,高度:133px,其边框设置颜色为:#199ED8,在其上拖入三个矩形元件,设置宽度:100x,高度:45px,分别输入:菜单一、菜单二、菜单三,其组合命名为:子菜单并设为隐藏状态,如图: ![](https://img.huzhan.com/blog/20220920/20221663642527724.png) 5、“导航栏3”与其右边的子菜单组合命名为:1 设置其隐藏状态,“导航栏2”右边的所有菜单组合一起命名为:子菜单,设置为隐藏状态,“导航栏2”与右边的子菜单组合命名为:2 “导航栏1”下所有的菜单组合一起,命名为:子菜单,设置其隐藏状态,所有元件组合一起命名为:3 ![](https://img.huzhan.com/blog/20220920/20221663642553784.png) 最终设计如图: ![](https://img.huzhan.com/blog/20220920/20221663642617982.png) 二、交互设置 1、组合3进行”鼠标移入时“和”鼠标移出时“设置,如图: ![](https://img.huzhan.com/blog/20220920/20221663642745100.png) 2、组合2进行“鼠标移入时”和“鼠标移出时”设置,如图: ![](https://img.huzhan.com/blog/20220920/20221663642765228.png) 3、组合1进行“鼠标移入时”和“鼠标移出时”设置,如图: ![](https://img.huzhan.com/blog/20220920/20221663642776220.png) 4、对每个菜单的“鼠标点击时”进行设置,如图: ![](https://img.huzhan.com/blog/20220920/20221663642794197.png) 所有设置完毕。
关注下面的标签,发现更多相似文章
本文TAG标签:
分享
QQ分享
微博分享
微信扫一扫
收藏
axure8.0教程axure菜单axu
上一篇:教育机构小程序源码有哪些优势?教育机构小程序源码有哪些优势?
下一篇:网校平台搭建结束后如何运营教育机构小程序源码有哪些优势?
您好,
请先
登录
!请文明评论,不得违反国家法律法规!
已有
0
条评论
纤纤露
关注
TA的店铺
21
文章
7859
人气
0
评论
0
粉丝
专注Axure设计的产品经理
Ta的最新文章
Axure案例分享—进度条(附下载地址)
Axure教程—滚动加载(中继器 )
Axure教程—表格(中继器)
Axure教程—菜单(中继器)
Axure教程—堆积面积图
标签大全
axure8.0教程动态面板多级联动
(2)
axure8.0教程
(2)
axure中继器axure教程axure
(1)
axure8.0教程动态面板
(1)
axure8.0教程动态面板axure中
(1)
axure8.0教程动态面板多级联动下拉
(1)
axure
(1)
axure8.0教程中继器动态柱状图
(1)
axure8.0教程动态面板图片交互效果
(1)
axure8.0教程动态面板多级联动 中
(1)
axure8.0教程axure中继器
(1)
axure8.0教程axure菜单axu
(1)
axure8.0教程滑块步进器
(1)
axure8.0教程动态仪表盘
(1)
axure教程 axure直方图
(1)
axure教程axure动态面板图片效果
(1)
axure8.0教程 axure单色面积
(1)
axure教程axure堆积面积图axu
(1)
axure axure中继器axure教
(1)
阅读目录
已有 0 条评论