Axure教程(中級):側導航收縮及展開
本文為大家演示了,如何用Axure實現側導航欄收縮、展開的效果,enjoy~
在web端的后臺管理平臺,我們經??吹竭@樣的側導航。
我們來簡單模仿一下交互效果,此教程主要是運用動態面板的顯隱和推拉動元件的效果:
一、頁面布局
從左側元件庫拉入一個【矩形】作為【模塊導航1】,一個【動態面板】作為【二級導航】,寬度設置為一樣,如下:
雙擊【動態面板01】,編輯【state1】,添加4個【矩形】作為展開的子導航。如下:
為了美觀,可以讓每個矩形的文字居左,距離左邊20像素,選中矩形后,點擊右側的【樣式】中的【填充】,【左】的值為20。
接下來,復制矩形【模塊導航1】及動態面板【01】,并命名為矩形【模塊導航1】和【模塊導航2】,動態面板【02】和動態面板【03】,(切記:讓【模塊導航2】對齊在動態面板【01】下面,【模塊導航3】對齊在【模塊導航2】下面,然后,全部左對齊),最終排版效果如下:
二、添加交互
同時選中【模塊導航1】、【模塊導航2】、【模塊導航3】,右鍵,點擊【設置選項組】。(目的:是為了讓模塊之間的選中樣式,點擊選中其中一個,其它模塊為不選中)。
同樣,選中其中的【交互樣式】,添加【懸浮】和【選中】的交互樣式,如下:
接下來,需要實現點擊某個【模塊導航】則展開其【二級導航】并收起其他【模塊導航】的【二級導航】。
首先,將動態面板【02】、【03】設置為隱藏,由于頁面初始加載時,【01】時處于默認展開狀態,所以不隱藏。
其次,給【模塊導航1】添加【鼠標單擊時】的交互效果,選擇左側的【元件】-》【設置選中】-》【當前元件】,設置如下:
并選擇左側的【元件】-》【顯示/隱藏】-》勾選【01】動態面板,可見性為“顯示”,動畫為“向下滑動”,500毫秒,更多選項為“推動元件”,方向為“下方”。設置如下:
再勾選【02】動態面板和【03】動態面板,可見性都為“隱藏”,動畫為“向上滑動”,500毫秒,勾選“拉動元件”,方向為“下方”。設置如下:
同理,給【模塊導航2】和【模塊導航3】添加同樣【鼠標單擊時】的交互效事件。
三、交互細節調整
1. 切記:添加【鼠標單擊時】的交互效果時,【模塊導航2】則顯示【02】動態面板,【模塊導航3】則顯示【03】動態面板。
2. 由于初始加載頁面時,【01】動態面板子導航是默認展示,因此,需要將【模塊導航1】設置為【選中】狀態。
四、預覽效果
歡迎大家留言評論,也可以留下你期待看到的交互效果。學習更多教程可以關注本人微信公眾號:艾斯的Axure峽谷。
示例下載:
https://pan.baidu.com/s/1rJwmTc-xSM1JUVeulFZWkA
示例演示:
作者:火星人~艾斯,公眾號:艾斯的Axure峽谷
本文由 @火星人~艾斯 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
空了一塊,空的原因是模塊2還在原位置,沒有移動到模塊1下面。
學到了,謝謝
謝謝
get新技能~筆芯
優秀優秀
我按著操作,點擊模板導航2的時候,模板導航3還是緊挨著模板導航2呢
那你點擊【模塊導航2】時,他下面的子導航有顯示出來嗎
有的呢,就是模塊導航3蓋住了模塊2.1
那有可能是你模塊2.1的Y軸方向的位置不對,他的頂部應該是跟模塊導航3頂部位置一樣,Y軸值是一樣的, 即緊貼在模塊導航2的下面。你仔細檢查一下
確實是空了一塊,空的原因是模塊2還在原位置,沒有移動到模塊1下面。
解決方法:直接把三個動態面板都隱藏掉就好了,然后再設置頁面載入時顯示動態面板1就好了
太麻煩了兄弟,中繼器直接搞定了
哈哈,中繼器,怕很多人還學不來,先來簡單粗暴的
是說,但是中繼器一旦學會,那種信息流立馬就能模擬出來,不用
兄弟,中繼器菜單交互教程就靠你了,哈哈,加油
想要中繼器菜單交互教程
學習了,很好用, 感謝
哈哈,不用客氣,互相學習進步