Axure RP8 教程 – 如何用動態面板制作下拉菜單
本文主要目的是教會小白使用動態面板實現菜單的下拉與收回操作,用動態面板的多狀態切換來實現菜單的下拉與收起。
動態面板是Axure RP 8中的一款高級組件,在隱藏與顯示、滑動效果 、拖動效果、多狀態效果切換等操作的場景中,動態面板是你的不二選擇。
完成后效果如下圖,該例子主要依靠動態面板的狀態切換來實現菜單狀態的下拉與收起,在后臺管理系統中普遍運用到。
菜單的下拉與收起效果:
希望大家邊學邊做,以下是用Axure RP8 實現菜單實例。
1.實例
1.從部件庫拉四個動態面板到操作區組合在一起
2. 雙擊選中動態面板,命名面板名稱并且添加兩個狀態,分別命名為“狀態1”與“狀態2”.
3. 雙擊“狀態1”,添加矩形并且命名為目錄一
4. 雙擊“狀態2”編輯其狀態
5. 復制狀態1的矩形并且添加三個矩形作為子目錄,并且分別命名為“子目錄1,2 , 3”。
6. 回到Home頁,目錄已經被編輯好。
7. 按照編輯動態面板1的步驟把下面三個面板依次命名,接下來為目錄一添加用例。
8. 按照圖中操作依次實現的效果為:單擊目錄一時會由狀態1變展開成狀態2。
9. 回到Home,則目錄一的用例1已近建立完畢,選擇更多事件,選擇更多事件,注意選擇動態面板調整大小以適應內容。
10. 選擇鼠標移出時,為實現收起效果。
11. 按照圖中操作依次實現的效果為:鼠標移開目錄一時,會由狀態2變展開成狀態1。
12. 目錄一的下拉與收起用例都已近創建完畢。
13. 按照目錄一的方法創建目錄二的下拉和收起用例,并且添加目錄二的狀態2.
14.目錄三和目錄四的狀態2也需要有相應的內容(頁面填充,如果沒有,那么在自適應內容的時候,會變為消失狀態),相關操作流程和目錄一一樣。
15. 點擊右上角預覽,單機目錄一,子目錄展現,移開鼠標子目錄收回。
本文由 @Arthur 原創發布于人人都是產品經理。未經許可,禁止轉載。
已解決,粗心問題
設置完之后目錄一和目錄二是正常的,但目錄三和目錄四就單擊沒反應,請問有出現同款問題的嘛,設置和內容自適應都是一模一樣的。求解答!
哥哥,你的附件呢?求分享啊
導航欄使用動態面板設置下拉菜單后,會影響下面的內容,怎么解決,我想顯示在最上層,不影響下面內容?
先點擊目錄一,然后點擊除目錄一以外的其他目錄,目錄一的下拉菜單能自動收回,點擊的那個目錄展開下級子菜單,這個怎么設置啊?始終保持只有一個主目錄的下拉菜單顯示著;
我想點擊二級目錄能跳轉頁面 怎么設置呢~ 現在導航欄是都做出來了
我做完了所有的設置,點擊目錄1.目錄二不移動,目錄3和4下滑到了相對應的位置。點開目錄2,目錄3位置不懂,目錄4滑到了相應的位置。請問這是什么問題啊,求大神指教。
設置完了還是點不出來
很棒,一直想學這個效果,每次學習完成一個小效果就很棒了,感謝樓主
設置好目錄一的下拉表單會被目錄二目錄三后面的目錄擋住是哪里操作不對呢
你把目錄一 的所有菜單變成動態面板了吧,我前幾天也遇到過,方便的話我幫你看一下你做的原型,1811194608 Q
我也是遇到了這個問題,請問你現在解決了嗎?
回到第一頁 點擊任意一個動態面板,右側菜單欄有一個“自動調整為內容尺寸”選上
謝謝,學習了很多。因為覺得平時有再次點擊希望子目錄收攏,所以自己摸索了一下,做出來了。
有個問題:勾選了動態面板自動調整以適應內容,但是實現的時候目錄一和目錄四展開完整,目錄二展開時,下方目錄三消失不見,出現空白狀態,同樣,目錄三展開時,目錄四被遮蓋也消失不見,是什么原因?
您好,你可能沒有設置目錄2和3的狀態2的內容,所以目錄2的狀態2是空白,導致目錄2和3切換到狀態2適應內容的時候,內容為空,所以看起來像是消失掉了,所以目錄1,2,3都需要設置兩個狀態并且都需要有對應內容才可以實現流暢切換,請您按照目錄1的做法把目錄2和3再做一遍。
我把四個目錄都按照1的方法設置了兩個狀態,每個目錄的狀態2都是有內容的,狀態2下面內容都為子目錄1、2、3,但是還是無法顯示出來。
每一個都勾選動態面板自適應內容了嗎,而且用例在單擊的時候變為狀態2哦,移出時變為狀態1,每一個目錄都要設置,請您再試試看
確實都是這么設置的,都檢查過了,還是找不到原因,我也很郁悶。
QQ郵箱:782137075@qq.com 把你的rp文件發我 記得署名哦
好的 已發送
謝謝,學到了很多
各位小伙伴注意啦,第9步請注意右下角的動態面板調整動態面板以適應內容是要勾選的,本人沒有標紅是我的疏忽,如果還有其他問起請歡迎指正。
兩個問題:
1.要注意動態面板的大小,如果高度小于所有子目錄展開的高度,子目錄無法顯示完整
2.只按照文中提到的兩個交互動作來做的話,無法實現目錄一展開時,其余目錄自動下移的效果
所以文章是描述的不夠清楚,還是隨便上傳誤人子弟?
謝謝您的提醒,做教程的時候比較匆忙,前面的兩張截圖沒有特地標明右下角的動態面板里的調整面板以適應內容,但是后面的截圖里是勾選了調整面板大小以適應內容,抱歉沒有標紅,是我的疏忽,請您試試看。
感謝說明~勾選自動適應內容后可以了,希望以后還有更多這樣詳細的教程~
不錯不錯
學習了