在上一篇文章里《Axure教程：抽屜風(fēng)格的菜單實(shí)現(xiàn)》，我介紹了抽屜風(fēng)格的菜單，并讓大家試下實(shí)現(xiàn)鼠標(biāo)移入時切換抽屜風(fēng)格菜單，這里也將實(shí)現(xiàn)方法介紹給大家。其實(shí)現(xiàn)方法與《Axure教程：鼠標(biāo)移入時切換菜單》一樣。

預(yù)覽圖

初始狀態(tài)：

鼠標(biāo)移入“抽屜2”后：

鼠標(biāo)移入“抽屜1”后：

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

所需元件：兩個矩形、兩張圖片

操作步驟

• 隱藏圖片2
• 參照《Axure教程：鼠標(biāo)移入時切換菜單》里的操作步驟（1）——（4），記得要對應(yīng)的修改方向，顯示時的向下滑動變成向右滑動；隱藏時的向上滑動變成向左滑動；推動元件的向下變成向右。
• 按F5預(yù)覽原型看看效果

小結(jié)

學(xué)會了參照文章里的案例后做這個就非常簡單，當(dāng)需要做多個“抽屜”時，對應(yīng)地添加多幾個“抽屜”就好了。

#相關(guān)閱讀#

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

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

Axure教程：抽屜風(fēng)格的菜單實(shí)現(xiàn)

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

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