實現步驟:
1.先在頁面擺放一個灰色矩形,名爲“一級菜單”,三個白色矩形,名爲“灰色矩形”;
2.選中三個“二級菜單”白色矩形,然後點擊右鍵,選擇【轉換爲動態面板】
3.設置【動態面板】的名字爲“二級菜單組合”,並【隱藏】起來
4. 爲一級菜單設置選項組名稱“menu”;這個設置能夠在之後的選中操作時,保證只有一個一級菜單被選中,其它的被取消選中;這是軟件的規則,同組名的元件只能有一個爲被選中狀態;
5.爲一級菜單的【鼠標單擊時】事件添加交互,選擇【切換選中狀態】->【當前元件】->選中狀態爲【toggle】;
6.爲一級菜單【選中時】事件添加交互,設置動作爲顯示二級菜單的動態面板“二級菜單組合”,注意,更多選項中選擇【推動元件】;
7.爲一級菜單【取消選中時】事件添加交互,設置動作爲隱藏二級菜單的動態面板“二級菜單組合”,注意,設置中勾選【拉動元件】;
8.將完成的一、二級菜單複製多份,然後按順序堆疊,注意,擺放時一級菜單一定要在上一組二級菜單水平或下方
9.完成,點擊預覽:
原型查看效果地址:https://gw3wxr.axshare.com
原型RP文件下載地址:https://download.csdn.net/download/qq_27884377/10878374
想了解更多Axure資訊,趕快下方掃碼加入【Axure修煉手冊】微信公衆號吧!!!