EP488. “设置自定义导航菜单”

• 做菜单前网站上要先有页面可以链接——这个顺序反了，菜单里就会没内容可选
• 把某个菜单项拖到另一项下方缩进，松手就变成下拉子菜单，逻辑跟做 Mega Menu 完全一样
• 中小型网站没必要硬做 Starbucks 那种大型菜单，产品分类不多的话，普通下拉子菜单就够用

重点内容

第一步：先建好需要的页面

路径：Dashboard → Pages

在做菜单之前，网站上要先有页面可以链接。创建新页面有三种入口，效果一样：

1. 左侧菜单 Pages → Add New
2. 页面列表页顶部的 Add New
3. 后台顶部工具栏的 New → Page

本课示范建了三个新页面：Contact、About、Courses（每建好一个都要点 Publish 发布）。Courses 是这个示范网站卖课程用的页面，实际操作时按自己的业务换成对应的页面（例如 Coaching、Pricing、Products 等）。

建完后回到 All Pages 确认页面数量正确（示范里有 Home、Blog 等原有页面加上新建的 3 个，一共 5 个）。

第二步：创建菜单

路径：Appearance → Menus

1. 给菜单起一个方便自己识别的名字（例：Top Main Menu），这个名字只是后台内部辨识用，前台访客看不到。点 Create Menu。
2. 左侧「Pages」区块勾选要加入菜单的页面（可以多选），点击 Add to Menu，页面就会出现在右侧菜单结构里。
3. 决定 Display Location（显示位置），常见的几种：

1. 勾选想要的位置（示范用 Main），点击 Save Menu。
2. 回到网站前台刷新页面，就能看到刚才设置的菜单已经显示出来。

第三步：菜单可以加的内容类型

除了 Pages，左侧还有其他可以加入菜单的类型：

• Posts（文章）：跟加页面一样，勾选文章、Add to Menu。
• Custom Links（自定义链接）：可以链接到网站以外的地方，例如 YouTube 频道。填入完整网址（例：youtube.com/RobinAndJasper）和显示文字（Link Text，例：Tutorials），点 Add to Menu。这种用来把外部社交媒体、渠道链接放进导航栏很方便。
• Categories（分类）：如果文章分类已经建好，也可以把某个分类直接做成菜单项，点进去会显示该分类下的所有文章。

第四步：调整菜单结构

在 Appearance → Menus 的菜单结构区域可以做这些操作：

• 删除菜单项：点击菜单项右上角展开，点 Remove。
• 调整顺序：直接拖拽（drag and drop）菜单项上下移动，松手后顺序就变了，记得点 Save Menu 保存。
• 做成子菜单（Submenu / 下拉菜单）：把某个菜单项拖到目标菜单项的正下方并稍微往右移，松手后就会缩进一级，变成该菜单的子项。保存后前台会在父级菜单旁边出现下拉箭头，鼠标悬停/点击会展开子菜单。适合用来把多个课程/多个产品分类放到同一个入口下面，减少主菜单项数量。

第五步：单个菜单项的详细设置

点击展开任意一个菜单项，可以看到：

• Navigation Label：显示在菜单上的文字，可以跟原本的页面名不同（例如页面叫 Home，菜单上想显示别的名字也可以改这里）。
• Disable Link：勾选后这个菜单项点击不会跳转，通常用在下拉菜单的「父级标题」上——父级本身只是分类标题，不需要可点击，点了才展开子菜单。
• Menu Icon Settings：可以给菜单项加图标（内建的 elusive icons、simple line icons 两套图标库），可以选择「图标 + 文字」或「只显示图标不显示文字」。例如登录入口用锁的图标、下载区用下载图标，是否用图标看网站风格和实际需求决定。

第六步：Mega Menu（大型菜单）

Mega Menu 是把下拉菜单做成占满整个屏幕宽度、分多栏显示的超大菜单，常见于电商大站（课程举例 Starbucks 的菜单），适合产品分类很多的网站，一次展示多个分类/多栏内容。

设置步骤：

1. 点开某个菜单项，勾选 Enable Mega Menu。
2. 把要放进这个大菜单里的其他菜单项拖到它下面（跟做普通子菜单一样的拖拽逻辑），拖进来的项目会分布成不同的列。
3. Mega Menu Auto Width：默认 Mega Menu 会撑满整个页面宽度，勾选这个选项后会根据内容自动收窄，不一定要占满全屏。
4. 可以设置 列数（columns），例如做出像 Starbucks 一样的 3-4 栏 + 一栏放 widget 的布局。
5. 可以选择 Hide Mega Menu Heading，隐藏每一栏最上方的标题文字，只留内容本身。

Mega Menu 主要用在产品/课程分类特别多、需要一次性展示的情况；一般中小型网站用普通下拉子菜单（submenu）就够用。

第七步：用 Customizer 给菜单做样式微调

路径：网站前台 → 点击顶部工具栏的 Customize 图标 → Header → Menu

这里的调整是 实时预览（live preview） 的，改一项马上能在旁边看到效果：

1. Select any template：如果主题自带菜单模板可以在这里选。
2. Top level / second level / dropdown 边框样式：给不同层级的菜单项加边框效果。
3. 菜单位置：可以设置置中（Center）、靠左（Left）、靠右（Right）。
4. Link 悬停效果（hover effect）：例如默认是变色，也可以加动画效果（例如底部出现三个点的动效）。
5. 样式细节：
   • 图标之间/菜单项之间的间距
   • Link Color：菜单文字默认颜色
   • Link Color on Hover：鼠标悬停时的文字颜色
   • Current Menu Item：当前所在页面对应的菜单项要用什么颜色标示（提示访客「你现在在这一页」）
   • Link Background：菜单项文字背后的背景色
   • Link Background on Hover：鼠标悬停时的背景色
   • Current Menu Item 的背景色：当前页面对应菜单项的整块背景色（跟上面单纯改文字颜色是两种不同效果，一个改文字颜色一个改整个方块颜色）
   • 以上这些如果菜单里有下拉子菜单，子菜单项也可以单独做同样的样式设置
6. 全部调整满意后点击 Publish 保存。

[截图：Appearance → Menus 后台菜单结构编辑界面]

[截图：Customizer → Header → Menu 实时样式调整面板]

[截图：完成后的前台导航栏效果，含下拉菜单]

核心概念速查

行动步骤

1. 先在 Pages 里建好需要出现在菜单上的页面（例如 Contact、About、Courses 等），逐个 Publish。
2. 进入 Appearance → Menus，新建菜单并命名，勾选页面加入菜单，设置 Display Location 为 Main，Save Menu。
3. 视需求加入 Posts、Custom Links（外部链接如 YouTube）、Categories。
4. 用拖拽调整菜单项顺序；需要下拉效果的项目拖到目标项下方做成 Submenu。
5. 点开菜单项设置 Navigation Label、需要的话勾选 Disable Link、选配 Menu Icon。
6. 产品/分类多的网站可以设置 Mega Menu，决定列数和 Auto Width。
7. 到前台 Customize → Header → Menu，调整菜单位置、颜色、hover 效果、当前页面高亮样式，满意后 Publish。

常见误区

• 忘记先建好对应的页面就想做菜单，导致菜单里没内容可选。
• 加完菜单项忘记选 Display Location 或忘记点 Save Menu，导致前台看不到任何变化。
• 下拉子菜单的父级菜单项忘记考虑要不要 Disable Link，导致访客点了父级标题却被跳到一个不相关/空白的页面。
• Mega Menu 内容塞太多、列数设置不合理，反而让菜单看起来杂乱，中小型网站没必要为了「炫」硬做 Mega Menu。

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 488 (Set Your Custom Menu)