axure中想要制作下拉菜單,該怎么制作呢?下面我們就來看看詳細的教程。
先看效果
1、先把自定義的下拉菜單樣式設計好,注意組件結構
2、批量編輯子選項按鈕的懸停,點擊和選中的樣式
1)批量選中所有按鈕
2)點擊右側面板的交互樣式中的鼠標懸停
3)編輯自定義按鈕樣式
用同樣的方法,設置下拉框的交互樣式
3、把選項和背景一起設為動態面板,并命名“下拉選項-01”,命名最好在后面帶幾個數字,因為這樣在后面使用到該組件的時候方便搜索使用
4、設置點擊下拉框時的選中狀態,并根據選中的狀態來決定下來菜單是否顯示和箭頭的上下狀態。
1)單擊下拉框,切換其選中狀態。
2)設置選中時的樣式和狀態:顯示下拉選項面板+箭頭向下(這里建議用絕對值),同樣的方法,設置下拉菜單的取消選中時的狀態樣式。
5、設置點擊選項時的效果
1)下拉選項面板收起,其實就是讓下拉框處于取消選擇狀態
2)把選中的下來選項回顯在下拉框上。這里使用axure函數變量[[This.text]]來設置
6、設置好后,就可以復用了。右鍵交互事件Case 1復制(Ctrl+c),然后反擊下面兩個選項,一個一個粘貼(Ctrl+v).
7、到這里基本就差不多了,最后,把下拉選項動態面板隱藏。
8、再把這個組件設為動態面板,然后勾選“自動調整為內容尺寸”,這樣的好處時隱藏掉的部分,不再占用空間,更有利于原型的排版。但是有一點,這樣做的話,顯示隱藏時的推拉組件功能會對動態面板外的組件失效。
新聞熱點
疑難解答
圖片精選