Axure 教程:顶部导航栏

如下图:

产品经理,产品经理网站

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

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

制定方法

1. 菜单制作

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

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

菜单制作

2. 子菜单制作

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

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

子菜单制作

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

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

子菜单制作

3. 菜单交互

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

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

一级菜单交互

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

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

子菜单交互

4. 热区添加

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

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

热区交互

 

本文作者 @五百英里


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部