加快网站收录,制作网站首页分为哪几部分,东营造价信息网官网,打米传奇手游Axure实现导航栏的展开与收缩 一、概要介绍二、设计思路三、Axure制作导航栏四、技术细节五、小结 一、概要介绍
使用场景一般是B端后台系统需要以导航栏的展开与收缩实现原型的动态交互#xff0c;主要使用区域是左边或者顶部的导航栏展开与收缩#xff0c;同一级导航下的小… Axure实现导航栏的展开与收缩 一、概要介绍二、设计思路三、Axure制作导航栏四、技术细节五、小结 一、概要介绍
使用场景一般是B端后台系统需要以导航栏的展开与收缩实现原型的动态交互主要使用区域是左边或者顶部的导航栏展开与收缩同一级导航下的小标题放在一起既美观又节省时间。
二、设计思路
怎么才能做到导航栏的展开与收缩呢是使用简单的隐藏再显示使用简单的隐藏与显示就能做到那要是很多小导航栏怎么做到呢 实现方案就是使用元件-动态面板来实现隐藏与显示在Axure中动态面板的使用场景很多实用率也很高下面就由我使用Axure来给大家演示一下。
三、Axure制作导航栏
第一步先创造一个矩形大小和正常导航栏一样大就行填充颜色与编辑字体如下图 第二步点击右键将这个矩形转换为动态面板转换并复制多一个分别改名为导航栏-合并导航栏-展开 第三步在导航栏-展开的动态面板下再复制三个小导航栏并改里面的文字为1、2、3 第四步设置交互先在外面设置-单击时-设置面板状态-到导航栏-合并勾选上推动和拉动元件 第五步设置里面的动态面板双击进入选择导航栏-展开设置第一个为单击时-设置面板状态-到导航栏-合并勾选上推动和拉动元件 第六步设置小导航栏为-单击时-设置选中-目标当前以下两个也是一样 第七步所有动态面板都添加鼠标悬停是交互样式填充颜色与字体自己搭配 第八步选择已经创建好的第一个动态面板复制多几个放在下面预览完成了。
四、技术细节
1、要注意区分大导航栏与小导航栏动态面板的区别比如大导航栏是设置到对应的动态面板并勾选推动和拉动元件小导航栏则是跳转到当前页面。 2、要记得添加一个鼠标悬停的效果后期可以设置成点击之后高亮固定
五、小结
关注我不迷路一天给你们更新一个小妙招~
