Axure 教程:顶部导航栏

访客4年前关于黑客接单1130

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

Axure 教程:顶部导航栏

如下图:

Axure 教程:顶部导航栏

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

线上效果图,查看:

制定 *** 1. 菜单 ***

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

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

菜单 ***

2. 子菜单 ***

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

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

子菜单 ***

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

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

子菜单 ***

3. 菜单交互

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

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

一级菜单交互

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

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

子菜单交互

4. 热区添加

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

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

相关文章

如何用Axure画出Web产品的单选组件?

如何用Axure画出Web产品的单选组件?

编辑导读:Web产物的单选组件在画原型的时候较量常见,所以产物司理有须要深入相识它的各类交互和对应的原型画法。本文作者从自身实践履历出发,分享了三种画单选组件的要领,供各人一同参考和进修。 原型地点...

Axure 教程:用中继器实现日历效果

Axure 教程:用中继器实现日历效果

本文系用中继器实现的日历结果(最终的结果在文章最后),虽然你可以直接办绘,甚至截图一个现成的日历,本文仅仅提供别的的一种实现要领。 凭据此要领实现的日历支持以下成果: 可以在中继器中设置当前日期,...

Axure 建站教程:手机移动端自适应视图

Axure 建站教程:手机移动端自适应视图

自适应视图的意思是,欣赏器宽度、高度差异时,就显示条件匹配的视图页面内容,本文给各人讲讲手机移动端自适应视图。 Axure 8 自带自适应成果,可以自适应电脑、平板、手机等差异巨细的屏幕。 要完成手...

Axure教程:如何实现淘宝模糊搜索框?

Axure教程:如何实现淘宝模糊搜索框?

提到淘宝的搜索,各人都能想到在这个搜索框输入要害词后呈现的一系列遐想词。那么这种结果如何通过Axure做出来呢?又有哪些要点呢? 我们天天都在利用淘宝的搜索成果来筛选定位本身想要的商品,只需要输入一...

Axure 教程:兴趣选择

Axure 教程:兴趣选择

在新浪微博注册的时候,通常会让注册用户选择兴趣爱好,这样就方便爱好给用户推荐朋友和资讯,今天我们来看看如何通过axure实现兴趣选择功能。通过本练习,主要让大家掌握全局变量和选中\取消选中的事件。...

Axure 教程:条件查询

Axure 教程:条件查询

条件查询是经常会使用的功能,今天小猿带大家看看如何实现条件查询。通过这个练习,大家可以掌握局部变量和中继器。 效果如下显示: 需求分析 1、默认展示所有用户的列表,共7条记录; 2、输入年龄区间(...