編輯導語：二級菜單是常見的操作樣式，為避免緊急情況下不知如何操作，也許你需要了解一下二級菜單的制作過程。那麼，如何利用Axure來制作二級菜單？本篇文章裡，作者便結合Axure梳理了一份二級菜單Axure制作和使用教程，一起來看一下。

前段時間跟甲方領導一塊去開會，當時主要是因為有個項目比較着急，需要現場修改原型，修改過程中需要用到三級折疊菜單，當時怎麼也整不出來，最後把二級菜單的樣式修改了一下，雖然蒙混過關，但是真的覺得特别尴尬。

會議結束後，我就緊急研究了一下怎樣用更加簡單的方式實現三級折疊菜單的制作與使用，過程中我們先将二級菜單的制作過程展示出來。

話不多說，先上效果圖（看着有些單調，如果想要其他效果，歡迎催更~）。

接下來，我們說一下制作方法。

一、用到的元件

Axure 9.0元件庫中的矩形、阿裡巴巴矢量圖标庫中搜索的一級菜單圖标及向下箭頭。

二、一級菜單制作

使用鼠标将Axure9.0自帶元件庫中的矩形拖拽至頁面固定位置，【“樣式”頁面/工具欄】設置矩形大小、邊框、填充顔色。

【“樣式”頁面/工具欄】設置菜單名稱的字體大小、顔色，【功能區->樣式】設置内容與矩形的邊距。

選中矩形，點擊鼠标右鍵，選擇【交互樣式】，設置菜單名稱鼠标懸停樣式中的字色，點擊【确定】。

将從【阿裡巴巴矢量圖标庫】中搜索的一級菜單圖标調整好顔色和大小，放在菜單名稱前面合适的位置，将向下箭頭圖标放在菜單名稱的後面，表示折疊效果。

選擇矩形、圖标、向下箭頭，點擊【中部】按鈕，調整樣式至中部對齊。

一級菜單制作完成。

三、二級菜單制作

同時選中一級菜單圖标、矩形、向下箭頭，點擊【工具欄】中的【組合】按鈕，同時，選擇【交互->出發内部元件鼠标交互樣式】。

完成組件之間的組合後，單擊鼠标右鍵選擇【轉換為動态面闆】，命名為“一級菜單1”。

雙擊“一級菜單1”動态面闆，此時一級菜單轉化為動态面闆中的state1，點擊後面的複制狀态按鈕新增state2。

打開state2頁面，修改state2頁面一級菜單樣式，選擇向下箭頭，調整向下箭頭【位置與尺寸】，旋轉180°，箭頭向上顯示為菜單展開效果。

鼠标選中一級菜單樣式，同時按住鍵盤中的【Ctrl】鍵，将一級菜單樣式複制一份到該樣式下方，調整至左右對齊，删除圖标及向下箭頭（或根據需求自行調整樣式），修改菜單字樣為“二級菜單1.1”。

點擊鼠标右鍵選擇【交互樣式】（注意：此時如果樣式為組合狀态，請取消組合，否則否見不顯示交互樣式按鈕），設置菜單懸停和選中效果，懸停效果可設置填充顔色、字色，選中效果可包括填充顔色、字色、線段顔色、邊框寬度、邊框類型、邊框可見性等樣式，點擊【确定】，完成二級菜單樣式調整。

選擇二級菜單，在“交互”頁面依次執行以下操作：【新建交互->單擊時->設置選中】，選擇設置當前元件為“真”，點擊确定。

交互編輯器窗口關閉後，按住鍵盤中的【Ctrl】鍵，複制出所需的二級菜單個數，調整位置并修改成所需的菜單名稱，完成二級菜單樣式的制作。

四、設置菜單展開與折疊效果

切換至state1，選中一級菜單樣式，在 “交互”頁面依次執行以下操作：【新建交互->單擊時->設置面闆狀态】，選擇設置“一級菜單1到state2 推動和拉動元件 下方”。

切換至state2，選中一級菜單樣式，在“交互”頁面依次執行上述相同操作：【新建交互->單擊時->設置面闆狀态】，選擇設置“一級菜單1到state1 推動和拉動元件 下方”。

此時，我們查看菜單制作效果，可以發現：點擊不同的二級菜單會出現以下情況。

此時，我們可以選擇三項二級菜單，點擊鼠标右鍵，選擇【選項組】，選擇已有的組名稱或輸入新的組名稱，現在，我們填寫組名稱為“二級菜單-互斥”，點擊【确定】按鈕，完成編輯操作。

此時點擊預覽，我們可以看到點擊不同的二級菜單，不會出現全部選中的效果。

五、設置菜單互斥效果

關閉動态面闆，選擇首頁面“一級菜單1”動态面闆，按住鍵盤中的【Ctrl】鍵，複制出所需的一級菜單個數，并依次修改菜單名稱和對應動态面闆名稱為一級菜單2、一級菜單3。

雙擊“一級菜單1”動态面闆，在state1頁面選擇“一級菜單1”樣式，鼠标移入到設置面闆狀态處，點擊【添加目标】按鈕繼續設置面闆狀态，分别為“一級菜單2到state1 推動和拉動元件 下方”、“一級菜單3到state1 推動和拉動元件 下方”。

以上操作實現的效果為：展開一級菜單1，則一級菜單2、一級菜單3的菜單收縮。

“一級菜單2”動态面闆中state1的操作方式同上，設置面闆狀态分别為“一級菜單1到state1 推動和拉動元件 下方”、“一級菜單3到state1 推動和拉動元件 下方”。

以上操作實現的效果為：展開一級菜單2，則一級菜單1、一級菜單3的菜單收縮。

“一級菜單3”動态面闆中state1的操作方式同上，設置面闆狀态分别為“一級菜單1到state1 推動和拉動元件 下方”、“一級菜單2到state1 推動和拉動元件 下方”。

以上操作實現的效果為：展開一級菜單3，則一級菜單1、一級菜單2的菜單收縮。

二級菜單效果制作完成，查看效果。

二級菜單的效果制作完成了，有什麼問題歡迎大家在評論區留言，下篇給大家更新《三級菜單的制作和使用》。

本文由 @無瀾 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部