編輯導讀：下拉菜單是產品的一個基礎功能，能夠給用戶提供多種選項。本文作者介紹了如何設計構建一個下拉菜單的動作，希望對你有幫助。

一、效果預覽

原型預覽地址：http://www.atomstudio.cn/demos/elementui_dropdownmenu/

二、準備工作

已安裝xstar組件庫2021.12.24版（或更高版本）。

三、詳細教程

1. 功能說明

• 鼠標經過按鈕時，顯示下拉菜單
• 下拉選項中包含圖標
• 點擊選項，跳轉頁面

2. 操作說明

放置“下拉菜單”元件

從組件列表中選擇【ElementUI元件庫】，在組件列表中會顯示出組件列表。從中找到下拉菜單組件，并拖拽到編輯區中。

設置菜單名稱

（1） 在編輯區中選中下拉菜單組件。

（2） 在右側屬性設置面板中，設置菜單名稱。

設置菜單樣式

在樣式列表中選擇需要的樣式，可選樣式包括：默認樣式、主要樣式、成功樣式、警告樣式、錯誤樣式、信息樣式、鏈接樣式。

樣式選擇后，效果如下：

設置菜單選項卡-名稱

（1） 點擊“編輯數據項”按鈕，打開選項卡設置窗口。

（2） 選擇對應的選項卡，在右側名稱輸入框中輸入需要的名稱，點擊確認按鈕

設置選項卡圖標

點擊圖標后面的 “選擇”按鈕，打開圖標選擇窗口，在分類中選擇分類，在圖標區選中需要的圖標，點擊“選擇”按鈕。

分割線設置

選擇分隔線選項，則在選項上方會出現一條線將其他選項與此選項分隔開。

禁用設置

勾選禁用選項后，對應的選項變成不可點擊狀態。

交互動作設置

（1） 創建新頁面

（2）編輯新頁面，用于識別是否完成交互動作，這里只在新頁面放置一段文本。

（3） 在頁面1中放置一個頁面容器，用以顯示交互頁面。

（4）打開菜單的數據項編輯窗口，進行交互動作設置。交互動作包括當前頁鏈接、容器內鏈接、父框架鏈接。

（5）設置當前頁鏈接的交互方式。

（6）設置容器內鏈接的交互方式

（7）設置完成 點擊確定按鈕。

3. 預覽效果

按鍵盤上的F5鍵，或者點擊右上角的預覽按鈕進行預覽。

瀏覽效果

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

題圖來自Unsplash，基于 CC0 協議。