# 自定义Mega菜单

**Mega 菜单**是一种高级的导航菜单，用于展示网站中的多层级内容。与传统的下拉菜单不同，Mega 菜单通常以更大的面板形式展开，能够同时显示多个选项和分类，方便用户快速浏览和访问更多内容。自定义 Mega 菜单可创建如下图所示的效果，支持添加图片。

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-71d23ee614d39729e7c50ffb38db723f361dd5c1%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### 实现上图效果的步骤：

**第一步 添加自定义Mega菜单**

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-a6993fb3b48ec4343447692a674f3a25fd09af16%2F%E5%BD%95%E5%B1%8F2025-01-03%20%E4%B8%8B%E5%8D%888.08.10.gif?alt=media" alt=""><figcaption></figcaption></figure>

**第二步 绑定主菜单**

选择主菜单序号，下面的示例是绑定第二个主菜单

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-eea33fbe182b46e3d4af901d6e402c686490be71%2F%E5%BD%95%E5%B1%8F2025-01-03%20%E4%B8%8B%E5%8D%888.08.10%20(1).gif?alt=media" alt=""><figcaption></figcaption></figure>

**第三步 选择菜单**

选择菜单并设置菜单的对齐方式，我们以居中对齐为例

{% hint style="warning" %}
需要提前添加菜单内容，并且这里仅显示一级菜单列表
{% endhint %}

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-5a2b4a2b8f216800ada4998132e76a23aee56c60%2F%E5%BD%95%E5%B1%8F2025-01-03%20%E4%B8%8B%E5%8D%888.08.10%20(2).gif?alt=media" alt=""><figcaption></figcaption></figure>

**第四步 添加图片**

添加图片，可设置图片比例，预览最终效果

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-37215b6a0105c7aa1cd210c96ed6ccdbfded70fe%2F%E5%BD%95%E5%B1%8F2025-01-03%20%E4%B8%8B%E5%8D%888.08.10%20(3).gif?alt=media" alt=""><figcaption></figcaption></figure>

**重复上述步骤添加自定义菜单便可实现案例的效果**