九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

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

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

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

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

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

一、用到的元件

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

二、一級菜單制作

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

【“樣式”頁面/工具欄】設置菜單名稱的字體大小、顏色，【功能區(qū)->樣式】設置內(nèi)容與矩形的邊距。

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

將從【阿里巴巴矢量圖標庫】中搜索的一級菜單圖標調(diào)整好顏色和大小，放在菜單名稱前面合適的位置，將向下箭頭圖標放在菜單名稱的后面，表示折疊效果。

選擇矩形、圖標、向下箭頭，點擊【中部】按鈕，調(diào)整樣式至中部對齊。

一級菜單制作完成。

三、二級菜單制作

同時選中一級菜單圖標、矩形、向下箭頭，點擊【工具欄】中的【組合】按鈕，同時，選擇【交互->出發(fā)內(nèi)部元件鼠標交互樣式】。

完成組件之間的組合后，單擊鼠標右鍵選擇【轉(zhuǎn)換為動態(tài)面板】，命名為“一級菜單1”。

雙擊“一級菜單1”動態(tài)面板，此時一級菜單轉(zhuǎn)化為動態(tài)面板中的state1，點擊后面的復制狀態(tài)按鈕新增state2。

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

鼠標選中一級菜單樣式，同時按住鍵盤中的【Ctrl】鍵，將一級菜單樣式復制一份到該樣式下方，調(diào)整至左右對齊，刪除圖標及向下箭頭（或根據(jù)需求自行調(diào)整樣式），修改菜單字樣為“二級菜單1.1”。

點擊鼠標右鍵選擇【交互樣式】（注意：此時如果樣式為組合狀態(tài)，請取消組合，否則否見不顯示交互樣式按鈕），設置菜單懸停和選中效果，懸停效果可設置填充顏色、字色，選中效果可包括填充顏色、字色、線段顏色、邊框?qū)挾?、邊框類型、邊框可見性等樣式，點擊【確定】，完成二級菜單樣式調(diào)整。

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

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

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

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

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

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

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

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

五、設置菜單互斥效果

關閉動態(tài)面板，選擇首頁面“一級菜單1”動態(tài)面板，按住鍵盤中的【Ctrl】鍵，復制出所需的一級菜單個數(shù)，并依次修改菜單名稱和對應動態(tài)面板名稱為一級菜單2、一級菜單3。

雙擊“一級菜單1”動態(tài)面板，在state1頁面選擇“一級菜單1”樣式，鼠標移入到設置面板狀態(tài)處，點擊【添加目標】按鈕繼續(xù)設置面板狀態(tài)，分別為“一級菜單2到state1 推動和拉動元件 下方”、“一級菜單3到state1 推動和拉動元件 下方”。

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

“一級菜單2”動態(tài)面板中state1的操作方式同上，設置面板狀態(tài)分別為“一級菜單1到state1 推動和拉動元件 下方”、“一級菜單3到state1 推動和拉動元件 下方”。

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

“一級菜單3”動態(tài)面板中state1的操作方式同上，設置面板狀態(tài)分別為“一級菜單1到state1 推動和拉動元件 下方”、“一級菜單2到state1 推動和拉動元件 下方”。

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

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

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

本文由 @無瀾 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。