兩種簡單方法:用Axure實現左側動態導航欄
最近在學習Axure的基礎教程,在網上看到了很多例子,整理了一下分享給大家~
第一種方法
(1)首先在面板上畫幾個矩形,大小一樣排列好。
(2)把A1、A2、A3設為動態面板,取名p1;同樣B1、B2、B3;C1、C2、C3分別取名為p2、p3。
(3)給導航欄A設置動作,導航欄對應正確的動態面板。導航欄B導航欄C同理設置好。
(4)這樣就大功告成了,很簡單的一種方法。
第二種方法
(1)第二種方法不同的地方是導航欄會發生變化,同樣先畫幾個矩形。
(2)把導航欄A、A1、A2、A3設為動態面板。注意:不單單是下面的子菜單,是整個一塊設為動態面板。導航欄B、C一樣轉換成動態面板,分別取名p1、p2、p3。
(3)雙擊p1,面板狀態管理。把state1改名為展開狀態。在點擊+號按鈕,新添一項,取名為收起狀態。p2,p3同理。
(4)雙擊打開收起狀態,在面板中畫一個導航欄A一樣的矩形。
(5)給動態面板p1設置動作,選擇狀態那里選擇“Next”。
(6)來看下效果,可以看到導航欄A收起的時候變成收起狀態了。
2種方法不同的地方是第一種不改變主菜單的樣式,第二種改變樣式。產品小白第一次發帖,如有不足的地方還請各位多多指教。
本文由 @七彩螺旋蒲公英 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
想問下,哪一種方法好,或者能介紹下適用場景嗎?
為什么去按照第一種方法去做,會有導航的消失,中間斷了
應該是你的導航欄放重疊了
有源文件么?可以參考一下謝謝
?? 頭像很優秀,文章也很優秀
多謝夸獎! ??