Axure教程:實(shí)現(xiàn)菜單下拉效果
筆者在本文中介紹了如何用Axure實(shí)現(xiàn)菜單下拉效果的操作步驟,以及實(shí)現(xiàn)過程中的一些心得體會,與大家分享。
盡管Axure的基礎(chǔ)元件庫里面已經(jīng)有菜單項(xiàng)了,但是樣式和交互我們不一定喜歡,所以這里自己制作菜單項(xiàng)以滿足不同的需求。
預(yù)覽圖
初始狀態(tài):
點(diǎn)擊“菜單1”、“菜單2”后:
預(yù)覽地址:https://rrwsy5.axshare.com
所需元件
兩個(gè)菜單矩形、兩個(gè)菜單子項(xià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)該隱藏起來:
3)將向上的箭頭設(shè)置成向下的箭頭:
這里我使用的是FontAwesome字體,所以顯示出來就是個(gè)看不出形狀的框框,這一步不一定要按照我這樣做,可以放兩個(gè)圖標(biāo)去更換就好,不過還是建議大家多去使用FontAwesome字體,原因在我另一篇文章《Axure教程:使用動態(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)該顯示出來:
3)將向下的箭頭設(shè)置成向上的箭頭
(4)按照上述步驟相似地設(shè)置“菜單2”矩形
(5)將“菜單2子項(xiàng)”動態(tài)面板隱藏起來
(6)按F5預(yù)覽原型看看效果
小記
- 后面我還會再制作其他類型的菜單,這是其中一個(gè)非常簡單的案例。
- 這個(gè)案例里,兩個(gè)菜單項(xiàng)可以同時(shí)展開,可以想想怎么做到有且只有一個(gè)菜單項(xiàng)展開。
#相關(guān)閱讀#
Axure教程:使用動態(tài)面板實(shí)現(xiàn)收藏→已收藏
本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash ,基于 CC0 協(xié)議
鼠標(biāo)單機(jī)時(shí)哪有編輯條件
什么?我的是Axure8版本哦