本期給大家?guī)?lái)的教程是“仿做京東商城式的左側(cè)菜單欄”。

一、照例先上gif

二、制作方法

1. 分解元素

“元素1”為菜單說(shuō)明，沒(méi)有特別功能。

“元素2”為菜單icon，點(diǎn)擊后展開(kāi)“菜單”或者折疊“菜單”。

點(diǎn)擊“元素3”～“元素6”后，右側(cè)對(duì)應(yīng)的切換“元素7”～“元素10”。

2. 制作動(dòng)效

元素2

點(diǎn)擊“元素2”的時(shí)候，要展開(kāi)“菜單”或者折疊“菜單”。

所以“元素3”～“元素6”設(shè)置為一個(gè)組“左側(cè)菜單內(nèi)容”比較容易做交互。

交互如下：

元素3～元素6

點(diǎn)擊“元素3”的時(shí)候，右側(cè)對(duì)應(yīng)顯示“元素7”，離開(kāi)“元素7”的時(shí)候，自動(dòng)隱藏菜單。

點(diǎn)擊“元素3”的交互如下：

離開(kāi)“元素7”的交互如下：

“元素4”到“元素7”的交互參照“元素3”就可以了。

本篇內(nèi)容到此結(jié)束，離開(kāi)“元素7”的交互設(shè)置頗為繁瑣，不知道有沒(méi)有更好的方式，小伙伴們?cè)谠u(píng)論里留言交流吧！

本文原型鏈接：https://4urldc.axshare.com/

歡迎朋友們拍磚，多多指出其中的不足。

擴(kuò)展閱讀

Axure教程 | 如何使用中繼器當(dāng)數(shù)據(jù)庫(kù)，制作web端幻燈片？

Axure教程 | web端的驗(yàn)證碼（普通驗(yàn)證碼和滑塊驗(yàn)證碼）如何制作？

Axure教程 | 小白入門(mén)，制作web端注冊(cè)/登錄

其他原型鏈接

• 幻燈片原型鏈接：https://1bqith.axshare.com
• 注冊(cè)和登錄鏈接：https://tk5yg4.axshare.com
• 普通驗(yàn)證碼鏈接：https://k4x9cz.axshare.com
• 滑塊驗(yàn)證碼鏈接：https://61uzxz.axshare.com

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。