目录:
1.动态菜单怎么做的
2.动态菜单实现
3.动态生成菜单
4.什么是动态菜单和弹出菜单?
5.动态界面怎么做
6.动态下拉菜单怎么做
7.动态栏是什么
8.动态展示怎么做
9.什么是动态菜单
10.动态创建菜单
1.动态菜单怎么做的
编辑导语:制作动态菜单时,如果菜单元件较多,依靠axure自带的“推动元件”可能会出现错位的情况。本文作者分享了采用动态面板和位移的方式完成动态菜单制作的方法,感兴趣的小伙伴们一起来看一下吧。
2.动态菜单实现
想必有很多同伴和我刚开始一样用“显示-推动下方元件”来制作动态菜单,但是遇到菜单元件较多时靠着axure自带的“推动元件”总是会出现错位的情况,所以,我便改了方案采用动态面板和位移的方式来完成菜单是整个网站都需要用到的,只用麻烦一次,其余时候直接从母版调用即可……废话不多说,跟着我上车!。
3.动态生成菜单
步骤1–绘制基本元件
4.什么是动态菜单和弹出菜单?
如图所示,先把菜单的元件准备好,默认但不限于:颜色、线条粗细、圆角、投影……绘制元件规则:尽量采用较少的元件,如上图,我是直接在矩形内写的文字,并且可以将线段可见性全部隐藏让他更加美观注意:我们要采用动态面板来制作,所以要准备两种状态下的元件。
5.动态界面怎么做
步骤2–设置交互样式
6.动态下拉菜单怎么做
而样式的设置包括初始样式和交互样式,一般PC端的元件可点击状态都是鼠标悬停出现颜色变化,所以我们一次性准备好。注意:交互样式可以直接复制。
7.动态栏是什么
在这时候用矩形元件的好处就可以凸显出来了,我们可以直接在“鼠标经过”样式中改变一些参数,这里我改变的是填充色和文字颜色用相同的方法改变箭头的交互样式,并且将矩形与箭头进行打组鼠标右击,选中:触发内部元件鼠标交互样式。
8.动态展示怎么做
这样一来,只要鼠标移入此组,则箭头与矩形都可以出现鼠标悬停样式。
9.什么是动态菜单
步骤3–设置动态面板如下图所示,可以将我们准备好的两组元件(收起/展开)放入一个动态面板里面,分成两个状态,将动态面板命名:菜单a。
10.动态创建菜单
步骤4–设置交互效果我们对收起的一级菜单进行命令设置:鼠标点击时-切换面板状态-此面板(菜单a)到state 2 (展开)状态我们对展开的一级菜单进行命令设置:鼠标点击时-切换面板状态-此面板(菜单a)到state 1 (收起)状态。
步骤5–补充其他菜单可以使用复制的方法补充其余的一级菜单,但是要注意:菜单内包含两种状态,需要将菜单名称都做更换,切莫遗漏。
步骤6–设置移动区域点击菜单会导致面板变化(当前菜单展开,其余菜单下移)那么我们将需要展开下的菜单进行打组,且命名比如,“一级标题 a” 有二级菜单,其他菜单需要下移,则将剩下的 b/c/d 进行大组
步骤7–设置移动距离接下来,我们进入“一级标题a” 的面板,在收起状态下添加命令:点击时–移动–点击a 下移–经过(0.90)疑问:为什么是0.90?答:一级标题 a 下有3个二级菜单,且每个元件高度30 而菜单需要垂直移动,所以是0.90。
然后,在展开状态下的菜单处添加命令:点击时–移动–点击a 下移–经过(0.-90)。
自此,菜单设置结束,而一级标题b,c,d都是这种制作方法。本文由 @败家女 原创发布于人人都是产品经理,未经许可,禁止转载题图来自 Unsplash,基于 CC0 协议
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
丞旭猿论坛
暂无评论内容