前面兩篇文章我分別介紹了《Axure教程：實(shí)現(xiàn)菜單下拉效果》和《Axure教程：鼠標(biāo)移入時(shí)切換菜單》，這兩篇文章里的菜單都是下拉風(fēng)格，這篇文章講抽屜風(fēng)格的菜單實(shí)現(xiàn)。

預(yù)覽圖

初始：

點(diǎn)擊“抽屜2”后：

點(diǎn)擊“抽屜1”后：

預(yù)覽地址：https://yj6jds.axshare.com

所需元件

兩個(gè)矩形、兩張圖片

操作步驟

（1）將圖片2隱藏。

（2）參照《實(shí)現(xiàn)菜單下拉效果》的操作步驟（2）和（3）設(shè)置好“抽屜1”矩形的交互，這里要注意，因?yàn)槲覀兊膱D片是向右顯示，向左隱藏，所以推動(dòng)元件的方向要選為右側(cè)。

（3）對(duì)應(yīng)地設(shè)置好“抽屜2”矩形的交互。

（4）按F5預(yù)覽原型看看效果。

小記

1. 這個(gè)原型案例只是簡(jiǎn)單地將下拉菜單風(fēng)格換成抽屜風(fēng)格，并沒有太大的難度。需要注意的就是步驟（2）里的小細(xì)節(jié)。
2. 大家可以再試試做下：鼠標(biāo)移入時(shí)切換抽屜風(fēng)格菜單。

#相關(guān)閱讀#

Axure教程：鼠標(biāo)移入時(shí)切換菜單

Axure教程：實(shí)現(xiàn)菜單下拉效果

本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議