Axure中想要設計一款三級菜單,該怎么設計呢?下面我們就來看看詳細的教程。
1、我們先放入菜單的相關元件,這里我使用的是矩形。
2、我們把三級菜單的三個元件全選,在上面點擊鼠標右鍵,選擇【轉換為動態面板】的選項。
3、把這個新出現的動態面板命名為“3”;并且,再次點擊鼠標右鍵或者在快捷功能區中,把這個動態面板【設為隱藏】。
4、二級菜單元件的【鼠標單擊時】添加用例,設置動作為【切換可見性】,勾選目標元件“3”,并且勾選設置中的【推動/拉動元件】。
5、我們把二級菜單和三級菜單全選,同樣點擊鼠標右鍵,選擇【轉換為動態面板】的選項。
6、然后,把這個新出現的動態面板命名為“4”。ps:如果是拖入的動態面板尺寸是固定的,需要在屬性中勾選【自動調整為內容尺寸】的選項。
7、雙擊動態面板“4”,再雙擊第一個狀態“State1”,繼續為二級菜單元件的【鼠標單擊時】添加動作。我們先添加【隱藏】外層動態面板“4”的動作,并且勾選【拉動元件】的選項。
8、繼續為二級菜單元件的【鼠標單擊時】添加第3個動作,也就是上面提到的【顯示】外層動態面板“4”,同時,在【更多選項】中選擇【推動元件】的選項。
9、把做好的二級菜單和三級菜單一起選中,根據需求復制幾份擺放好。
ps:復制時,不要單獨復制二級菜單和三級菜單,必須二級菜單和三級菜單一起復制,這樣交互的對應關系才會繼續有效。
10、為一級菜單添加【鼠標單擊時】的用例,設置動作【切換可見性】,勾選動態面板“4”,同時在設置中勾選【推動/拉動元件】。添加了這個交互之后,點擊一級菜單時,就能點一下顯示二級菜單,再點一下隱藏二級菜單。
11、點擊一級菜單的時候,三級菜單默認是收起的狀態。繼續為一級菜單元件添加【鼠標單擊時】的交互,設置動作【隱藏】所有的三級菜單所在的動態面板“3”,并且在隱藏的設置中都要勾選【拉動元件】的選項。
以上就是Axure設計三級菜單的方法,,希望大家喜歡,請繼續關注武林網。
相關推薦:
新聞熱點
疑難解答
圖片精選