如何修改WordPress子菜单样式 实现苹果官网同款子菜单效果

可行性结论 #

仅修改子菜单对应的HTML、CSS代码完全可以实现苹果官网的子菜单效果，不需要调整WordPress核心逻辑、主题功能或引入额外脚本。

实现核心思路 #

苹果官网的子菜单本质是悬浮触发的全屏宽度平铺层，只需要把原有嵌套在一级菜单内部的子菜单结构，调整为不受父级容器宽度限制的独立全屏结构，再通过CSS控制显隐逻辑、排版样式、过渡动效即可。

现有子菜单效果：

目标苹果官网子菜单效果：

具体操作步骤 #

• 步骤1：调整菜单HTML结构 #

  首先开启WordPress菜单CSS类配置权限：进入后台「外观-菜单」，点击右上角「显示选项」，勾选「CSS类」。给所有需要搭载全屏子菜单的一级菜单添加自定义类has-full-submenu。
  找到主题菜单渲染的对应文件（通常为header.php或自定义菜单Walker文件），将子菜单的外层容器从一级菜单的内部嵌套结构，调整为和一级菜单平级的独立结构，避免父级的overflow: hidden、定位限制导致子菜单无法撑满屏幕宽度。

• 步骤2：编写子菜单基础CSS #

  先清空原有子菜单的默认下拉样式，添加全屏子菜单的基础配置，参考代码如下：

  /* 全屏子菜单默认隐藏 */
  .full-submenu {
    position: absolute; /* 如果导航栏是fixed定位，这里也可以用fixed */
    top: 60px; /* 替换为你的导航栏实际高度 */
    left: 0;
    width: 100vw;
    background-color: #fbfbfd; /* 苹果官网子菜单的浅灰背景色 */
    padding: 40px 15%;
    display: none;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-8px);
  }
  /* 父级菜单悬浮时显示子菜单 */
  .has-full-submenu:hover .full-submenu {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
  

• 步骤3：适配苹果风格的内部排版 #

  子菜单内部用网格布局做分栏，调整文字样式匹配苹果的设计语言，参考代码如下：

  /* 子菜单内容分栏布局 */
  .full-submenu__content {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 可根据你的子菜单数量调整列数 */
    gap: 32px;
  }
  /* 子菜单分类标题 */
  .full-submenu__title {
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  /* 子菜单列表项 */
  .full-submenu__item {
    list-style: none;
    margin-bottom: 12px;
  }
  .full-submenu__item a {
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1f;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .full-submenu__item a:hover {
    color: #0071e3; /* 苹果官网的品牌蓝色 */
  }
  

• 步骤4：移动端兼容处理 #

  小屏设备下无需保留全屏子菜单，直接沿用原有移动端折叠菜单逻辑即可，添加媒体查询：

  @media (max-width: 768px) {
    .full-submenu {
      display: none !important;
    }
  }
  

• 步骤5：细节调试 #

  按需调整子菜单的内边距、列数、动画速度等参数，排查z-index层级冲突、子菜单被其他模块遮挡的问题，和现有导航栏风格对齐即可。

内容的提问来源于stack exchange，提问作者demonjoseph