dedecms做地方网站,怎么入驻电商平台,1个人做多网站负责人,详情页模板怎么做摘要#xff1a;在PC端的产品中我们会常常见到滑动式菜单#xff0c;当鼠标移入菜单上方#xff0c;向下或向右自动滑动弹出子菜单#xff0c;当页面信息层级较多或功能较多时#xff0c;在产品设计时经常会用到这种滑动式菜单。今天就和大家分享如下制作滑动式菜单的交互…摘要在PC端的产品中我们会常常见到滑动式菜单当鼠标移入菜单上方向下或向右自动滑动弹出子菜单当页面信息层级较多或功能较多时在产品设计时经常会用到这种滑动式菜单。今天就和大家分享如下制作滑动式菜单的交互原型。如下图1为滑动式菜单的示意图。图1-滑动菜单示意图元件准备首先我们利用Axure系统元件完成线框图的绘制。从元件库拖动四个矩形至设计区域编辑矩形文本这四个矩形作为导航栏的一级菜单分别命名为菜单一、菜单二、菜单三、菜单四。水平等距离分布四个矩形的距离。如图2所示。图2-一级菜单拖动四个垂直菜单至一级菜单下方调整每个菜单项目的宽度与高度使其与一级菜单的宽高一致。编辑每个子菜单项的文本四个子菜单分别命名为子菜单1、子菜单2、子菜单3、子菜单4如图3所示。将每个子菜单项填充为灰色#D4D4D4隐藏子菜单。图3-子菜单制作交互为了视觉上更美观我们默认将所有菜单项边框线进行隐藏。将四个一次菜单设置为为一个选项组选项组命名为一级菜单。为四个一级菜单设置选中样式选中时填充颜色为#0099FF文字颜色为白色。为子菜单的每个菜单项设置鼠标悬停样式悬停时菜单项填充色为#0079FE文字颜色为白色。将一级菜单及其对应的子菜单分别设置为组合四个组合分别命名为导航1、导航2、导航3和导航4。下面我们开始进行交互设置选中菜单一添加鼠标移入事件将当前元件设置为选中状态向下滑动显示当前菜单的子菜单即子菜单1隐藏另外三个子菜单交互设置如图4所示。选中组合导航1添加鼠标移出事件将一级菜单即菜单一设置为未选中状态隐藏该组导航下的二级子菜单即隐藏子菜单1。交互设置如图5所示。图4-显示子菜单图5-隐藏子菜单按照同样的方法为另外三个一级菜单和导航组合设置交互效果。交互设置如图6所示。图6-其他菜单交互到这里滑动式菜单交互原型已经制作完毕点击预览在浏览器中查看原型。根据本案例的设计思路其实我们还可以制作向右滑动弹出的交互效果原型制作原理是一样的如果大家有兴趣不妨尝试制作。关注头条号免费学习更多Axure教程私信可获取源文件及Axure RP9安装包。
