AXure(3):点击导航切换页面

时间:2022-05-03 23:49:06

这里学习的是,点击导航栏的菜单时,页面根据所点击的菜单进行切换。

1. 将母板应用于Index页面

AXure(3):点击导航切换页面

Index页面内容如下:

AXure(3):点击导航切换页面

2. 选中左侧导航中的“红色页面”菜单,点击右侧“属性”中的“创建连接”

AXure(3):点击导航切换页面

连接中选中“红色页面”

AXure(3):点击导航切换页面

3. 同理,选中母板中的“绿色页面”导航菜单,在属性的“创建连接”中选择“绿色页面”

AXure(3):点击导航切换页面

4. 蓝色页面同理

AXure(3):点击导航切换页面

5. 查看点击效果

进入index页面

AXure(3):点击导航切换页面

点击导航栏的“红色页面”菜单:

AXure(3):点击导航切换页面

点击导航栏的“绿色页面”菜单:

AXure(3):点击导航切换页面

点击导航栏的“红色页面”菜单:

AXure(3):点击导航切换页面

6. 对导航栏的菜单在点击时改变样式

增加事件:鼠标悬停时,字体变色:右侧,[2]Shapes中,点击“鼠标悬停”,设置鼠标悬停时的字体颜色:

AXure(3):点击导航切换页面

7. 最终效果

无点击:

AXure(3):点击导航切换页面

点击导航栏“红色页面”:

AXure(3):点击导航切换页面

点击导航栏“绿色页面”:

AXure(3):点击导航切换页面

点击导航栏“蓝色页面”:

AXure(3):点击导航切换页面

8. Gif动图

 AXure(3):点击导航切换页面