使用Axure RP 8制作两种导航菜单-悬浮菜单

2024-06-03 11:24:51

上一篇文章介绍了下拉导航的设置方法，详见
使用Axure RP 8制作两种导航菜单-下拉导航
本文介绍第二种导航方式悬浮菜单，如图

同样我们先分析一下该种方式中包含的交互：

鼠标移入一级菜单图标，出现二级菜单悬浮框；
鼠标移入二级菜单图标（非点击），文字颜色变化
点击二级菜单，显示选中效果；
未选中二级菜单时，鼠标移出一级或者二级菜单，悬浮框隐藏；
下面是详细的制作步骤

1、一级菜单交互

一级菜单只需要设置一种交互效果即可，即鼠标移入时/显示二级菜单

2、二级菜单动态面板

二级菜单主要涉及到菜单选中状态的切换，以及菜单隐藏效果

2.1 隐藏效果

当鼠标移出二级菜单框时，需设置二级菜单隐藏，此处不赘述

2.2 状态

首先，二级菜单有两种状态，一个都不选中，和选中菜单这两种；而选中菜单时，因为二级菜单的数量是大于1个的，还需要在各个菜单中进行切换，所以选中菜单里面还需要添加一个动态面板
1、未选中
未选中状态下，我们仅展示二级菜单文字即可

2、选中
选中状态下的动态面板中，有几个二级菜单，就有几种切换，也就有几种状态，如图，并且需要绘制你需要的选中状态

2.3 交互

1、鼠标悬停的交互效果
二级菜单未选中状态时，鼠标悬停时展示文字选中的效果，比如文字颜色变化等其他效果，所以我们在对应文本框-属性-交互样式设置里面设置想要的效果，这里我设置字体颜色，如图：
每一个二级菜单的文本都需要设置

2、鼠标点击的交互效果
当鼠标点击时，需选中二级菜单，所以我们需要设置：
鼠标单击时/切换面板状态/对应的二级菜单选中的状态

至此制作完成

使用Axure RP 8制作两种导航菜单-悬浮菜单相关推荐

使用Axure RP 8制作两种导航菜单-下拉导航
日常在绘制web端原型时,往往会涉及到导航栏的制作,文章主要记录两种常见导航栏的绘制方法. 首先我们看一下两种导航方式,一种是点击一级菜单,出现下拉的二级菜单:另一种是鼠标移入时显示二级菜单的悬浮框, ...
北东地坐标系转换c语言,北东地/东北天两种导航坐标系与姿态转换
一. 坐标系 1. 导航坐标系常用的导航坐标系有北东地和东北天两种. 两种坐标系的指向分别定义如下: 1.1 北东地坐标系 X轴:指北; Y轴:指东; Z轴:指地. 1. 2 东北天坐标系 X轴:指 ...
北东地/东北天两种导航坐标系与姿态转换
一. 坐标系 1. 导航坐标系常用的导航坐标系有北东地和东北天两种. 两种坐标系的指向分别定义如下: 1.1 北东地坐标系 X轴:指北; Y轴:指东; Z轴:指地. 1. 2 东北天坐标系 ...
用Axure RP 9制作简易网易云首页
用矩形以及文本标签.文本域制作出以下导航栏,交互效果有放在上面会实现变色效果,以及点击登录会弹出登录框同步上面操作可实现以下用动态面板中做出轮播图,交互效果有轮播图以及点击小圆点回跳到相应图片,左 ...
Axure RP 8制作不透明度
步骤一: 找一张手机图片,宽高自定,自己觉得适合就行,如下图所示: 步骤二: 把图片导入调整好大小,放置手机图片内,拖两个矩形,一个灰色垫底命名为hui,粉色在上命名为粉,拖一个30*30的圆作为按钮 ...
Axure RP 8制作小僵尸
步骤一: 绘制一个300*300的矩形,右键转换为动态面板,添加面板.如下图所示: 步骤二: 双击动态面板1,绘制两个矩形左右靠在一起,设置宽度300,高度50,在绘制一个矩形宽300,高250,点击 ...
Axure RP 8制作QQ登录
今天给大家分享一个简单的案例步骤一: 我们先把布局弄好一个矩形作为背景,文字用文本标签去写,两个文本框,一个登录按钮,按着下面的图片布局.如下图所示: 步骤二: 给密码设置一个组.如下图所示: 步骤 ...
vue导航栏悬浮菜单
html部分 <template><div><div class="container demoHome d-flex a-center j-sb"& ...
在几何画板中如何制作圆柱的侧面展开动画_几何画板画圆柱体的的两种动画制作方法...
和圆锥不一样,圆柱体的形成有两种方法,一种是由一个矩形面绕一条边旋转一周而成的,另一种是由圆面垂直向上或向下移动而成的.因此,制作圆柱形成演示动画要制作两种类型. 软件名称:最出色的教学软件几何画板 ...

最新文章

热门文章