起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：實(shí)現(xiàn)菜單下拉效果
筆者在本文中介紹了如何用Axure實(shí)現(xiàn)菜單下拉效果的操作步驟，以及實(shí)現(xiàn)過(guò)程中的一些心得體會(huì)，與大家分享。
盡管Axure的基礎(chǔ)元件庫(kù)里面已經(jīng)有菜單項(xiàng)了，但是樣式和交互我們不一定喜歡，所以這里自己制作菜單項(xiàng)以滿足不同的需求。
預(yù)覽圖
初始狀態(tài)：
點(diǎn)擊“菜單1”、“菜單2”后：
預(yù)覽地址：https://rrwsy5.axshare.com
所需元件
兩個(gè)菜單矩形、兩個(gè)菜單子項(xiàng)動(dòng)態(tài)面板、一個(gè)向上箭頭、一個(gè)向下箭頭。
操作步驟
（1）按照上圖給元件命好名，擺放好位置
（2）設(shè)置“菜單1”矩形交互Case1鼠標(biāo)單擊時(shí)
1）編輯條件：當(dāng)“菜單1子項(xiàng)”的可見性為true
2）因?yàn)椴藛?子項(xiàng)此時(shí)是顯示的，所以單擊后應(yīng)該隱藏起來(lái)：
3）將向上的箭頭設(shè)置成向下的箭頭：
這里我使用的是FontAwesome字體，所以顯示出來(lái)就是個(gè)看不出形狀的框框，這一步不一定要按照我這樣做，可以放兩個(gè)圖標(biāo)去更換就好，不過(guò)還是建議大家多去使用FontAwesome字體，原因在我另一篇文章《Axure教程：使用動(dòng)態(tài)面板實(shí)現(xiàn)收藏→已收藏》的小記里有解釋。
（3）設(shè)置“菜單1”矩形交互Case2鼠標(biāo)單擊時(shí)
1）編輯條件：當(dāng)“菜單1子項(xiàng)”的可見性為false，設(shè)置步驟與上面一樣，就把true改為false即可；
2）因?yàn)椴藛?子項(xiàng)此時(shí)是隱藏的，所以單擊后應(yīng)該顯示出來(lái)：
3）將向下的箭頭設(shè)置成向上的箭頭
（4）按照上述步驟相似地設(shè)置“菜單2”矩形
（5）將“菜單2子項(xiàng)”動(dòng)態(tài)面板隱藏起來(lái)
（6）按F5預(yù)覽原型看看效果
小記
- 后面我還會(huì)再制作其他類型的菜單，這是其中一個(gè)非常簡(jiǎn)單的案例。
- 這個(gè)案例里，兩個(gè)菜單項(xiàng)可以同時(shí)展開，可以想想怎么做到有且只有一個(gè)菜單項(xiàng)展開。
#相關(guān)閱讀#
Axure教程：使用動(dòng)態(tài)面板實(shí)現(xiàn)收藏→已收藏
本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議
鼠標(biāo)單機(jī)時(shí)哪有編輯條件
什么？我的是Axure8版本哦