axure商城

Axure原型教程:使用動態面板簡單實現三級菜單

很多同學都在問如何實現三級菜單,動手能力強的同學可能已經嘗試過了,結果非常令人失望,大都失敗了。強大的Axure難道搞不定區區一個三級菜單嗎?來看看小樓老師的親身示范吧,文章末尾有源文件。本文轉載自小樓老師博客:http://www.iaxure.com/5811.html

其實,我挺喜歡三級的。

特別是會動的。

但是,這個東西我一直沒怎么深入研究。

不過,今天我又在群里看到有人問這個問題,通過我稍一思索,就有了下面的這篇教程(有裝逼嫌疑)。

首先,菜單分為三級。

在之前,我曾經做過抽屜菜單的案例,不過那個是二級的。

既然二級的能做,三級的也不應該很復雜。脫唄!

呃…不是,是往里面再拖元件唄!

這個思路,很簡單。

二級菜單,是把二級菜單項都放在一個動態面板中,然后,點擊一級菜單時顯示這個動態面板,并帶有向下推動元件的效果。

三級菜單呢?

在二級菜單所在的動態面板中再放入動態面板?

大家可以自己嘗試,這個思路實現不了。

因為,這樣的三級菜單展開時沒有辦法推動下方其它一級菜單和二級菜單的內容。

這特么就尷尬了!

是什么原因造成的呢?

動態面板會把它里面的內容和外部的內容隔開。

打個比方,就好比拍電影里的錯位。

看起來是真的,實際上毛都挨不到!

注意,我說的是吻戲!

那么,如何在一個動態面板里面的三級菜單展開時,能夠推動動態面板外部的其他元件呢?

我的思路是這樣。

在三級菜單展開之前,先把外層動態面板隱藏并拉動元件。

這樣,所有二級菜單會變成收起狀態。

然后,讓三級菜單展開。

這時,外層動態面板自動適應展開后的尺寸(注意外層動態面板要設置自動適應內容尺寸),高度變長。

最后,再把外層動態面板顯示出來,這樣就會按照展開之后的高度推動下方元件。

不管你有沒有看懂這個思路,都不妨礙下面的實現。

你可以看下面的實現步驟時,對照一下上面的思路,將會更容易理解。

第一步,我們先放入菜單的相關元件,這里我使用了一些占位符,大家也可以使用矩形,設置成其他樣式。

第二步,我們把三級菜單的三個元件全選,在上面點擊鼠標右鍵,選擇【轉換為動態面板】的選項;然后,把這個新出現的動態面板命名為“ThreePanel”;并且,再次點擊鼠標右鍵或者在快捷功能區中,把這個動態面板【設為隱藏】。

第三步,我們先來完成三級菜單展開和收起的交互效果。

為二級菜單元件的【鼠標單擊時】添加用例,設置動作為【切換可見性】,勾選目標元件“ThreePanel”,并且勾選設置中的【推動/拉動元件】。

完成上面的設置之后,大家可以預覽一下效果。

點擊二級菜單的時候,就能夠點一下顯示三級菜單,再點一下隱藏三級菜單。

進進出出的感覺是不是很爽?

第四步,我們把二級菜單和三級菜單全選,同樣點擊鼠標右鍵,選擇【轉換為動態面板】的選項;然后,把這個新出現的動態面板命名為“Submenu”。

注意,如果是拖入的動態面板尺寸是固定的,需要在屬性中勾選【自動調整為內容尺寸】的選項。

第五步,雙擊動態面板“Submenu”,再雙擊第一個狀態“State1”,繼續為二級菜單元件的【鼠標單擊時】添加動作。

我們先添加【隱藏】外層動態面板“Submenu”的動作,并且勾選【拉動元件】的選項。

注意:在組織動作區域中,新添加的動作會在下方出現,要把它拖動到上方,這樣的順序才不會出現問題。

也就是前面說的,在三級菜單展開之前,我們先收起外層動態面板,并拉動元件。

等三級菜單展開之后,這個時候外層動態面板自動高度變長了,再把它顯示出來,并且推動下方元件。

這樣,就有了正確的展開效果。

當然,這樣處理對收起三級菜單同樣有效。

第六步,繼續為二級菜單元件的【鼠標單擊時】添加第3個動作,也就是上面提到的【顯示】外層動態面板“Submenu”,同時,在【更多選項】中選擇【推動元件】的選項。

完成上述動作的添加之后,二級菜單元件的交互如下圖所示。

第七步,把做好的二級菜單和三級菜單一起選中,根據需求復制幾份擺放好。

注意,如下圖所示,復制時,不要單獨復制二級菜單和三級菜單,必須二級菜單和三級菜單一起復制,這樣交互的對應關系才會繼續有效。

第八步,為一級菜單添加【鼠標單擊時】的用例,設置動作【切換可見性】,勾選動態面板“Submenu”,同時在設置中勾選【推動/拉動元件】。

添加了這個交互之后,點擊一級菜單時,就能點一下顯示二級菜單,再點一下隱藏二級菜單。

第九步,點擊一級菜單的時候,三級菜單默認是收起的狀態。

繼續為一級菜單元件添加【鼠標單擊時】的交互,設置動作【隱藏】所有的三級菜單所在的動態面板“ThreePanel”,并且在隱藏的設置中都要勾選【拉動元件】的選項。

第十步,把以上完成的所有內容全選,根據需求復制幾份,并擺放整齊。

同樣要注意,復制時,不要單獨某個元件,必須所有元件一起復制,這樣交互的對應關系才會繼續有效。

通過以上步驟,就完成了三級片的制作。

額。。。三級菜單的制作!

源文件下載:http://downloads.iaxure.com/three_level_menu.rp

給TA買糖
共{{data.count}}人
人已贊賞
高級教程

Axure中SVG矢量圖標的使用方法及資源推薦

2017-6-12 21:33:16

高級教程

Axure實現漢字拼音首字母查詢(非JS版)

2018-8-7 8:15:41

axure商城
2 條回復 A文章作者 M管理員
  1. 筱默

    贊贊贊 謝謝小樓

  2. 157****2499
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo