Elementorでフルスクリーンオーバーレイメニューを作成する方法

全屏覆盖菜单非常适合页面内容较少的小型网站，或者可以用来隐藏和显示更多链接，从而扩展导航功能。使用 PowerPack 高级菜单小部件，你可以在 エレメンタ 中轻松创建画布外和全屏覆盖菜单，无需编写任何代码。

第一步：添加 Elementor 高级菜单小部件

在添加小部件之前，首先决定你希望它出现在什么位置。如果你只想在单个页面（如登录页面）上显示叠加菜单，可以直接将小部件添加到该页面，这样菜单只会在这个页面上显示。

如果你希望覆盖菜单出现在整个网站或每个页面上，可以将小部件添加到使用 Elementor 构建的自定义页眉中，这样菜单就会出现在页眉所在的所有位置，通常是整个网站。

在 Elementor 编辑器中打开页面或页眉，然后将 PowerPack 的高级菜单小部件拖放到适当的位置即可。

第二步：设置全屏覆盖菜单

接下来，从 WordPress 菜单列表中选择你想要显示的菜单。

然后，向下滚动选项，直到找到“响应”部分。选择“始终”作为断点，并将菜单类型更改为“全屏”。

还可以从给定的设置更改按钮的对齐方式、按钮样式等。在内容选项卡中进行更改后，你的全屏菜单将如下所示：

第三步：自定义全屏覆盖菜单的样式

メインメニュー：在这一部分，你可以设置主菜单项的样式，比如文本颜色、排版、内边距等。

ドロップダウンメニュー：这里你可以调整下拉菜单项的样式，包括排版、文本颜色、背景颜色、边框、边框半径、内边距和分隔线等。

切换按钮：全屏覆盖菜单通过切换图标或按钮来触发，你可以在这一部分自定义它。你可以更改颜色、背景、大小、厚度、边框和标签（如果在内容选项卡中启用了标签）。这些设置仅适用于切换按钮。

レスポンシブ：这里可以调整菜单在不同设备上的显示效果。开始调整之前，点击切换按钮以触发菜单，这样你可以实时预览所做的更改。

1. アライメント：将菜单对齐方式更改为居中（Center）。
2. 背景和链接颜色：更改菜单背景颜色和链接（菜单元素）颜色。
3. ホバー効果：设置链接悬停时的颜色和背景颜色。对于子菜单，你也可以自定义颜色、内边距等。
4. 边框：轻松更改边框颜色、宽度等。
5. 关闭图标：调整关闭图标的颜色和大小。

概要

全屏覆盖菜单是适合小型网站的一种导航解决方案，可以隐藏和显示更多链接，扩展导航功能。使用 PowerPack 高级菜单小部件和 Elementor，你可以创建画布外和全屏覆盖菜单，无需编写任何代码。通过简单的步骤，你可以决定菜单的位置，选择要显示的菜单，并设置菜单的响应方式和样式。自定义选项包括主菜单项、下拉菜单、切换按钮以及响应式设置，确保菜单在不同设备上的良好显示效果。这种灵活而强大的工具让你可以为网站提供专业且美观的导航体验。