辉灿新闻网 原型设计 Axure 教程:顶部导航栏

Axure 教程:顶部导航栏

当鼠标移入菜单时显示子菜单,当鼠标移出时子菜单自动隐藏,这样的交互在制作原型时相信会经常用到的一种交互。

如下图:

顶部导航栏(鼠标移入显示子栏目,移出隐藏)

线上效果图,查看:顶部导航栏(鼠标移入显示,移出隐藏)

制定方法1. 菜单制作

制作顶部菜单,使用基本元件:文本标签创建标题,设置标题大小并设置行间距。

顶部导航栏(鼠标移入显示子栏目,移出隐藏)

菜单制作

2. 子菜单制作

制作子菜单,使用基本元件:动态面板,并设置动态面板名称,进入动态面板。

顶部导航栏(鼠标移入显示子栏目,移出隐藏)

子菜单制作

进入动态面板添加子菜单名称,可针对每个子菜单添加交互,如跳转链接,鼠标移上去字段交互等。

顶部导航栏(鼠标移入显示子栏目,移出隐藏)

子菜单制作

3. 菜单交互

回到index页面,针对一级菜单添加交互,当鼠标移入时显示菜单一并向下滑动,时间动画300s。

顶部导航栏(鼠标移入显示子栏目,移出隐藏)

一级菜单交互

针对二级菜单添加交互,当鼠标移出时隐藏菜单一并向上滑动,时间动画300s。

顶部导航栏(鼠标移入显示子栏目,移出隐藏)

子菜单交互

4. 热区添加

在菜单边加上热区交互,即可实现上述效果。

顶部导航栏(鼠标移入显示子栏目,移出隐藏)

热区交互

本文由 @五百英里 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/793.html

作者: 五百英里

Axure 教程:内容展示——图片墙

Axure RP 9 教程:矢量地图导入Axure

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部