本次來(lái)講解 PC 端電商首頁(yè)的商品分類未巫，如何在Axure里面實(shí)現(xiàn)。
以下依舊使用動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)效果（ 理由：方便启昧、快捷叙凡、不需要函數(shù) ）
先來(lái)看一下某東的 PC 首頁(yè)的商品分類效果，下文將按照此效果實(shí)現(xiàn)出來(lái)：
（因gif圖比較大壓縮出現(xiàn)失真密末，各位看官將就一下）
一握爷、準(zhǔn)備元件
1.拖出四個(gè)矩形，輸入文字 “ 一級(jí)分類 ” 严里，w 為：200 px 新啼，h 為：50 px ；
2.在拖出一個(gè)矩形刹碾，w 為 400 px 燥撞，h 為200 px 。里面放入文本 “ 二級(jí)分類 ” 迷帜、“ 三級(jí)分類 ” 物舒，然后如圖排放：
3.前面有四個(gè) “ 一級(jí)分類 ” ，二戏锹、三級(jí)分類的展示也需要有四個(gè)冠胯，因?yàn)樗膫€(gè)一模一樣的話到時(shí)不好分辨，所以小伙伴們各自給做出一些區(qū)別取來(lái)锦针。然后把四個(gè)一起放在一個(gè)動(dòng)態(tài)面板里面荠察，命名：“ 二、三級(jí)展示 ” 奈搜，然后把該動(dòng)態(tài)面點(diǎn)擊隱藏悉盆。那如圖：
這樣所有的元件就都準(zhǔn)備好了，現(xiàn)在我們來(lái)開始下一步操作 ~
二媚污、設(shè)置交互樣式
1.全選四個(gè) “ 一級(jí)分類 ” 舀瓢，右鍵點(diǎn)擊交互樣式設(shè)置 – 鼠標(biāo)懸停 – 填充顏色 – 色值 #F2F2F2 ，如圖：
2.點(diǎn)擊第一個(gè) “ 一級(jí)分類 ” 耗美，設(shè)置 “ 鼠標(biāo)移入時(shí) ” – 設(shè)置面板狀態(tài) – 選擇 “ 二、三級(jí)分類 ” – 選擇狀態(tài) 1 航缀，進(jìn)入 / 退出動(dòng)畫為：逐漸 商架，250 毫秒 ，選中 “ 如果隱藏則顯示面板 ” 芥玉，點(diǎn)擊確定（ 其他三個(gè) “ 一級(jí)分類 ” 類似 1 選擇 2 蛇摸、3 、4 ）灿巧。如圖：
設(shè)置完以上的所有設(shè)置赶袄，我們已經(jīng)大致完成整個(gè)效果了揽涮，現(xiàn)在我們先來(lái)看一下效果：
設(shè)置完移入的效果，現(xiàn)在我們來(lái)設(shè)置鼠標(biāo)移出的效果饿肺，繼續(xù) ~
3.全選所有元件 蒋困、動(dòng)態(tài)面板 ，右鍵點(diǎn)擊 “ 轉(zhuǎn)換為動(dòng)態(tài)面板 ” 敬辣，然后點(diǎn)擊該動(dòng)態(tài)面板雪标，設(shè)置屬性 “ 鼠標(biāo)移出時(shí) ” – 隱藏 “ 二、三級(jí)展示 ” 溉跃，動(dòng)畫為：漸變村刨，250毫秒 。
這樣撰茎，我們基本的效果就都做完了嵌牺，看效果：
這樣我們基本的使用就都實(shí)現(xiàn)了，已完成的小伙伴給自己點(diǎn)個(gè)贊 ~
然后我們?cè)賮?lái)看看某東在首頁(yè)以外的頁(yè)面龄糊，商品分類是如何顯示 / 影藏的：
只要完成了以上效果的逆粹，看完之后是不是覺(jué)得很簡(jiǎn)單，開始做吧 ~
四绎签、進(jìn)階
1.拖如一個(gè)矩形枯饿，w 為：200 px ，h 為：40 px 诡必，色值：#333333 奢方，輸入 “ 全部商品分類 ” 放在如圖位置：
2.把 “ 一、二爸舒、三級(jí)展示 ” 鼠標(biāo)移出時(shí)的設(shè)置刪除蟋字，然后隱藏 “ 一、二扭勉、三級(jí)展示 ” 鹊奖，點(diǎn)擊 “ 全部商品分類 ” 設(shè)置屬性：“ 鼠標(biāo)移入時(shí) ” 顯示 “ 一、二涂炎、三級(jí)展示 ” 忠聚，動(dòng)畫為：逐漸，250毫秒唱捣，置于頂層两蟀，點(diǎn)擊確定；
3.繼續(xù)全選所有元件震缭、動(dòng)態(tài)面板赂毯，右鍵點(diǎn)擊 “ 轉(zhuǎn)換為動(dòng)態(tài)面板 ” ，命名為：“ 全部商品分類 ” ，點(diǎn)擊 “ 全部商品分類 ” 設(shè)置鼠標(biāo)移入 / 移出的效果 党涕，如下圖：
完成以上所有設(shè)置就完成了烦感，來(lái)看看以下效果：
該文件百度云鏈接：鏈接:https://pan.baidu.com/s/19d3wk15sfUKY3VDH8Eo7AQ 密碼:gim8
以上就是所有的效果解析，各位小伙伴是否學(xué)會(huì)了膛堤？
本文轉(zhuǎn)自http://www.woshipm.com/rp/1082314.html
