必威体育Betway必威体育官网
当前位置:首页 > 运营推广

制作动态效果的后台导航栏——左侧导航

时间:2019-07-31 11:43:11来源:运营推广作者:seo实验室小编阅读:59次「手机版」
 

导航条制作

怎么制作动态效果的后台导航栏呢,一起来文中看看~

先上完成效果:

整体的制作过程

1. 制作菜单元件

分别制作导航菜单中的每个元件,制作好一个以后,就可以复用了,制作步骤如下:

使用矩形,制作单个导航菜单的底层

使用图片,制作导航菜单的图标

使用矩形,设置成三角形,制作导航菜单的二级菜单的显示隐藏标识

制作三角形的步骤:选择矩形,右键选择弹出来的菜单中的——变换形状,选择三角形。

2. 制作菜单

将制作好的菜单元件组合成一个整体的导航菜单元件

(1)改变三角形的大小为16*16

(2)分别制作:一级无下级菜单,一级有下级的菜单,二级菜单

(3)组合菜单,以制作一级有下级的菜单为例:选中图片、三角形、矩形、右键、弹出菜单、选择组合。(一级无下级菜单同样操作组合)

(4)制作二级菜单动态效果,选中二级菜单,在交互中,添加选中效果,设置选中后的背景颜色变更为#19a2dd。添加交互:单击时——设置选中——当前文件。重点,重点,给二级菜单设置选项组team2(选项组名字自定义)。

(5)制作一级菜单动态效果。给一级菜单组中的三角形添加一个名字:sanjiao(这个名字可以自定义)。选中一级菜单组,在交互中,添加交互:单击时——旋转——sanjiao——顺时针——过——180°。

重点,重点,给一级菜单设置选项组team1(选项组名称自定义)

3. 制作导航栏底层元件(这个没什么好说的,直接看图)

4. 制作导航菜单

自由组合一级,二级菜单,如图。组合时,一定要确保每个菜单中的距离大于等于0,千万不能小于0,注意,注意,注意。

(1)将财务管理下的四个二级菜单选中,右键弹出菜单,选择转换为动态面板,并设置动态面板名称(财务管理,这里可以自定义设置)。人员管理,系统设置如法炮制。

(2)给一级菜单的单击时的交互添加动作。以财务管理为例:添加显示/隐藏(交互),目标选择动态面板财务管理,选择切换;显示动画选择向下滑动——300毫秒,隐藏动画选择向上滑动——300毫秒;重点,重点,重点,更多选项中,选择推动和拉动元件——下方——线性——300毫秒。人员管理,系统设置如法炮制。

最后,把菜单捏在一起,OK了。大功告成,可以自己玩玩了。

题图来自Unsplash,基于CC0协议

相关阅读

淘宝今日热卖后台怎么去掉?有什么要求?

淘宝今日热卖是一个促销版块,与爱淘宝,爱逛街手淘想必,它是以新闻推荐资讯的方式,快速将店铺、宝贝展现在买家面前,让买家快速完成购买

淘宝导航条背景色怎么改?步骤分享

在电商这么火爆的时候,相信很多实体店的老板也会来掺一脚,可是却遇到很多都不懂的,觉得请人做又浪费了钱,那么seo实验室小编手把手免

用深度学习破解12306图片验证码,识别率超96%- web效果

12306最新版图片验证码已被破解已是公开的秘密。比如市面上那么专业多抢票软件,早就破解了这个图片验证码。那他们到底是怎么实现

淘宝店铺后台操作,淘宝搭配套餐设置方法

前面我们在讲店铺后台“出售中的宝贝”操作方法时,有介绍到淘宝心选推荐搭配,本节内容就以图文形式为大家讲解淘宝搭配套餐如何设置

高德地图离线导航怎么使用?

高德地图怎么离线导航?只要你在下载的时候把本地城市的离线包和导航包一起下载,即使没有网络,仅开启GPS就能进行导航。快来看看这篇

分享到:

栏目导航

推荐阅读

热门阅读