當前位置:菜譜大全網 - 素菜食譜大全 - Axure9.0如何制作二級菜單?怎麽用?

Axure9.0如何制作二級菜單?怎麽用?

二級菜單是壹種常見的界面風格,很多新手小夥伴在學習Axure原型設計的過程中,需要學習和掌握二級菜單的設計和制作!如果不能,那麽可以按照下面的具體操作!對於準備自學或者正在自學Axure的小夥伴,那麽我建議妳學習Axure自學視頻課,從0基礎到案例實踐,全面學習~

如何制作和使用Axure9.0二級菜單;

首先使用Axure9.0組件庫中的矩形、壹級菜單圖標和在阿裏巴巴矢量圖標庫中搜索到的向下箭頭。

二、壹級菜單制作用鼠標從Axure9.0組件庫中拖動矩形到頁面的固定位置,“樣式”頁面/工具欄設置矩形大小、邊框和填充顏色。

樣式頁/工具欄設置菜單名稱的字體大小和顏色,功能區->;樣式設置內容和矩形之間的邊距。

選擇矩形,單擊鼠標右鍵,選擇交互樣式,在菜單名稱的鼠標懸停樣式中設置單詞顏色,單擊確定。

調整從阿裏巴巴矢量圖標庫中搜索到的壹級菜單圖標的顏色和大小,放在菜單名稱前面適當的位置,菜單名稱後面放向下箭頭圖標,以顯示折疊效果。

選擇矩形、圖標和向下箭頭,單擊中間按鈕,並將樣式調整為中間對齊。

壹級菜單制作完成。

三、制作二級菜單時,同時選擇壹級菜單的圖標、矩形和向下箭頭,點擊工具欄中的組合按鈕,同時選擇交互-->;啟動內部組件鼠標交互樣式。

完成組件組合後,點擊鼠標右鍵選擇轉換為動態面板,命名為“壹級菜單1”。

雙擊“壹級菜單1”動態面板。此時壹級菜單會在動態面板中轉化為state1,點擊後面的復制狀態按鈕,添加state2。

打開state2頁面,修改state2頁面的壹級菜單樣式,選擇向下箭頭,調整向下箭頭的位置和大小,旋轉180,箭頭會作為菜單展開效果向上顯示。

用鼠標選中壹級菜單樣式,同時按住鍵盤上的Ctrl鍵,將壹級菜單樣式復制壹份到樣式底部,左右調整,刪除圖標和向下箭頭(或根據需要調整樣式),將菜單修改為“二級菜單1.1”。

點擊鼠標右鍵選擇壹個交互樣式(註意:如果此時樣式處於組合狀態,請取消組合,否則交互樣式按鈕不會顯示),設置菜單的懸停和選擇效果。懸停效果可以設置填充顏色和字體顏色,選擇效果可以包括填充顏色、字體顏色、線段顏色、邊框寬度、邊框類型、邊框可見性等樣式。點擊確定,完成二級菜單樣式調整。

選擇二級菜單,在交互頁面依次執行以下操作:新建交互-& gt;單擊時-& gt;設置被選中,選擇將當前組件設置為"真",點擊確定。

交互式編輯器窗口關閉後,按住鍵盤中的Ctrl鍵,復制所需數量的二級菜單,調整位置並修改為所需菜單名稱,完成二級菜單樣式的制作。

四、設置菜單展開折疊效果切換到state1,選擇壹級菜單樣式,在“交互”頁面依次執行以下操作:新建交互-& gt;單擊時-& gt;設置面板狀態,選擇“狀態2推拉元件下壹級菜單1”。

切換到狀態2,選擇壹級菜單樣式,依次在“交互”頁面執行相同操作:新建交互-->;單擊時-& gt;設置面板狀態,選擇“壹級菜單1到狀態1推拉下面的組件”。

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

此時,我們可以選擇三個二級菜單,單擊鼠標右鍵,選擇壹個選項組,選擇壹個現有的組名或輸入壹個新的組名。現在,我們可以將組名填寫為“二級菜單-互斥”,點擊確定,完成編輯操作。

此時點擊預覽,我們可以看到,點擊不同的二級菜單,不會有全選的效果。

5.設置菜單互斥效果關閉動態面板,在首頁選擇“壹級菜單1”動態面板,按住鍵盤中的Ctrl鍵復制所需數量的壹級菜單,將菜單名稱和對應的動態面板名稱依次修改為壹級菜單2和壹級菜單3。

雙擊“壹級菜單1”動態面板,在state1頁面選擇“壹級菜單1”樣式,將鼠標移動到設置面板狀態,點擊添加目標按鈕繼續設置面板狀態,即“推拉元素下壹級菜單2到state1”和“壹級菜單3到state65438+”

上述操作的效果是壹級菜單1被展開,壹級菜單2和壹級菜單3的菜單被收縮。

“壹級菜單2”動態面板中state1的操作方式同上,面板狀態分別設置為“壹級菜單1到state1推拉元素下面”和“壹級菜單3到state1推拉元素下面”。

通過上述操作達到的效果如下:當壹級菜單2展開時,壹級菜單1和壹級菜單3收縮。

“壹級菜單3”動態面板中state1的操作方式同上,面板狀態分別設置為“壹級菜單1到state1推拉元素下面”和“壹級菜單2到state1推拉元素下面”。

通過上述操作實現的效果如下:當壹級菜單3被展開時,壹級菜單1和壹級菜單2被收縮。

二級菜單效果做完了,檢查壹下效果。

二級菜單的效果完成了,最後的效果是:

以上是關於“Axure9.0如何做二級菜單?怎麽用?”我已經分享了所有精彩的內容,希望妳能從中有所收獲!如果妳覺得壹篇文章不夠過癮,那麽不要錯過Axure相關文章!總之,學習道路和單壹的知識很難實現全面的自我發展!如果妳想完全精通壹門技能,那麽妳必須全面學習!加油,全面學習Axure,全面獲取知識點,快速有效推進自主原型設計~