Axure教程：PC端电商首页商品分类

　　本次来讲解PC端电商首页的商品分类，如何在Axure里面实现。
　　以下依旧使用动态面板来实现效果（理由：方便、快捷、不需要函数）
　　先来看一下某东的PC首页的商品分类效果，下文将按照此效果实现出来：
　　（因gif图比较大压缩出现失真，各位看官将就一下）
　　一、准备元件
　　1。拖出四个矩形，输入文字“一级分类”，w为：200px，h为：50
　　2。在拖出一个矩形，w为400px，h为200px。里面放入文本“二级分类”、“三级分类”，然后如图排放：
　　3。前面有四个“一级分类”，二、三级分类的展示也需要有四个，因为四个一模一样的话到时不好分辨，所以小伙伴们各自给做出一些区别取来。然后把四个一起放在一个动态面板里面，命名：“二、三级展示”，然后把该动态面点击隐藏。那如图：
　　这样所有的元件就都准备好了，现在我们来开始下一步操作
　　二、设置交互样式
　　1。全选四个“一级分类”，右键点击交互样式设置鼠标悬停填充颜色色值F2F2F2，如图：
　　2。点击第一个“一级分类”，设置“鼠标移入时”设置面板状态选择“二、三级分类”选择状态1，进入退出动画为：逐渐，250毫秒，选中“如果隐藏则显示面板”，点击确定（其他三个“一级分类”类似1选择2、3、4）。如图：
　　设置完以上的所有设置，我们已经大致完成整个效果了，现在我们先来看一下效果：
　　设置完移入的效果，现在我们来设置鼠标移出的效果，继续
　　3。全选所有元件、动态面板，右键点击“转换为动态面板”，然后点击该动态面板，设置属性“鼠标移出时”隐藏“二、三级展示”，动画为：渐变，250毫秒。
　　这样，我们基本的效果就都做完了，看效果：
　　这样我们基本的使用就都实现了，已完成的小伙伴给自己点个赞
　　然后我们再来看看某东在首页以外的页面，商品分类是如何显示影藏的：
　　只要完成了以上效果的，看完之后是不是觉得很简单，开始做吧
　　四、进阶
　　1。拖如一个矩形，w为：200px，h为：40px，色值：333333，输入“全部商品分类”放在如图位置：
　　2。把“一、二、三级展示”鼠标移出时的设置删除，然后隐藏“一、二、三级展示”，点击“全部商品分类”设置属性：“鼠标移入时”显示“一、二、三级展示”，动画为：逐渐，250毫秒，置于顶层，点击确定；
　　3。继续全选所有元件、动态面板，右键点击“转换为动态面板”，命名为：“全部商品分类”，点击“全部商品分类”设置鼠标移入移出的效果，如下图：
　　完成以上所有设置就完成了，来看看以下效果：
　　该文件百度云链接：链接：https：pan。baidu。coms19d3wk15sfUKY3VDH8Eo7AQ密码：gim8
　　以上就是所有的效果解析，各位小伙伴是否学会了？
　　今天的文章就到这里结束了，如有相关问题请在下方留言，我将一一解答。
　　谢谢大家！！