![图片[1]-子比美化：仿盒子萌风格菜单 UI 实现 - 奇想博客网](https://qix8.com/wp-content/uploads/2026/04/b8059a78d820260413112320.webp)
⚠️ 修改前排雷警告
本教程第一步需要修改主题底层核心 PHP 文件。在进行任何操作前，请务必通过宝塔面板或 FTP 备份 /wp-content/themes/zibll/inc/functions/zib-header.php 文件！ 养成良好的备份习惯是所有站长的基本修养。
🚀 部署步骤
第一步：修改核心 PHP（解除层级限制与注入控制器）
我们需要修改负责输出移动端菜单的底层函数，解除深度的封印，并把我们的特效切换按钮的 HTML 骨架放进去。
1、进入宝塔面板，找到路径：/wp-content/themes/zibll/inc/functions/zib-header.php
2、在该文件中搜索 function zib_nav_mobile，找到整个函数的起始位置。
3、将原有的 zib_nav_mobile 函数完整替换为以下代码：
替换前：
function zib_nav_mobile($location = 'mobilemenu')
{
$menu = '';
$args = array(
'container' => false,
'echo' => false,
'fallback_cb' => false,
'depth' => 2,
'items_wrap' => '<ul class="mobile-menus theme-box">%3$s</ul>',
'theme_location' => $location,
'walker' => new zib_walker_nav_menu(),
);
$m_layout = _pz('mobile_header_layout', 'center');
$menu .= in_array('m_menu', zib_get_theme_mode_button_positions()) ? '<a href="javascript:;" class="toggle-theme toggle-radius"><i class="fa fa-toggle-theme"></i></a>' : '';
if ('center' != $m_layout) {
$menu .= zib_get_search_link('class=toggle-radius');
}
$wp_nav_menu = wp_nav_menu($args);
if (!$wp_nav_menu) {
$args['theme_location'] = 'topmenu';
$wp_nav_menu = wp_nav_menu($args);
}
if (!$wp_nav_menu && is_super_admin()) {
$wp_nav_menu = '<ul class="mobile-menus theme-box"><li><a href="' . admin_url('nav-menus.php') . '" class="loaderbt">添加导航菜单</a></li></ul>';
}
$menu .= $wp_nav_menu;
if (_pz('article_nav', true) && _pz('article_nav_mobile_nav_s', true)) {
$menu .= '<div class="posts-nav-box" data-title="文章目录"></div>';
}
$sub = zib_header_user_box('mobile');
echo $menu . $sub;
}替换后：
function zib_nav_mobile($location = 'mobilemenu')
{
$menu = '';
$args = array(
'container' => false,
'echo' => false,
'fallback_cb' => false,
'depth' => 0, // 核心修改：将默认的2改为0，允许无限层级子菜单输出
'items_wrap' => '<ul class="mobile-menus theme-box">%3$s</ul>',
'theme_location' => $location,
'walker' => new zib_walker_nav_menu(),
);
$m_layout = _pz('mobile_header_layout', 'center');
// 已物理屏蔽原生自带的月亮切换按钮，防止前端 JS 冲突
// $menu .= in_array('m_menu', zib_get_theme_mode_button_positions()) ? '<a href="javascript:;" class="toggle-theme toggle-radius"><i class="fa fa-toggle-theme"></i></a>' : '';
if ('center' != $m_layout) {
$menu .= zib_get_search_link('class=toggle-radius');
}
$wp_nav_menu = wp_nav_menu($args);
if (!$wp_nav_menu) {
$args['theme_location'] = 'topmenu';
$wp_nav_menu = wp_nav_menu($args);
}
if (!$wp_nav_menu && is_super_admin()) {
$wp_nav_menu = '<ul class="mobile-menus theme-box"><li><a href="' . admin_url('nav-menus.php') . '" class="loaderbt">添加导航菜单</a></li></ul>';
}
// ==========================================
// 插入自定义模块：环境特效控制器 HTML
// ==========================================
$theme_switcher_html = '
<div class="boxmoe-theme-switcher">
<div class="switcher-track">
<span class="switch-btn active" data-effect="none">Pure</span>
<span class="switch-btn" data-effect="snow">Snow</span>
<span class="switch-btn" data-effect="sakura">Sakura</span>
</div>
</div>';
// 组合菜单包裹（外加一层独特的 class 以便独立控制 CSS）
$menu .= $theme_switcher_html . '<div class="qxbkw-boxmoe-menu">' . $wp_nav_menu . '</div>';
if (_pz('article_nav', true) && _pz('article_nav_mobile_nav_s', true)) {
$menu .= '<div class="posts-nav-box" data-title="文章目录"></div>';
}
$sub = zib_header_user_box('mobile');
echo $menu . $sub;
}第二步：添加全套 CSS 样式（重塑外观）
进入 WordPress 后台 -> 子比主题设置 -> 全局&功能 -> 自定义代码 -> 自定义 CSS 样式，添加以下代码。
(注：这里包含了雪花自带的冰雪发光效果和樱花花瓣的纯 CSS 绘制逻辑，全程硬件加速，丝滑不卡顿。)
/* =========================================================
移动端菜单仿盒子萌 UI & 动态特效美化
========================================================= */
/* 1. 顶部特效切换器面板 */
.boxmoe-theme-switcher { display: flex; justify-content: center; margin-bottom: 15px; }
.boxmoe-theme-switcher .switcher-track { display: flex; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50px; padding: 2px; width: 80%; }
.boxmoe-theme-switcher .switch-btn { flex: 1; text-align: center; font-size: 13px; color: #666; padding: 6px 0; border-radius: 50px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; }
.boxmoe-theme-switcher .switch-btn.active { background: #5eb2ff !important; color: #ffffff !important; box-shadow: 0 2px 10px rgba(94, 178, 255, 0.3); }
/* 2. 菜单大黑框外壳与顶级胶囊选项 */
.qxbkw-boxmoe-menu { border: 2px solid #000000 !important; border-radius: 12px !important; padding: 10px 0 !important; margin: 0 15px 25px 15px !important; background: #ffffff !important; }
.qxbkw-boxmoe-menu .mobile-menus.theme-box { border: none !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
.qxbkw-boxmoe-menu > ul > li { list-style: none !important; margin: 5px 15px !important; }
.qxbkw-boxmoe-menu > ul > li > a { border: 1px solid transparent !important; border-radius: 50px !important; padding: 10px 20px !important; font-weight: 600 !important; color: #333 !important; display: flex !important; align-items: center; transition: all 0.3s ease; }
.qxbkw-boxmoe-menu > ul > li.active > a, .qxbkw-boxmoe-menu > ul > li.open > a, .qxbkw-boxmoe-menu > ul > li.current-menu-item > a, .qxbkw-boxmoe-menu > ul > li.open-submenu > a { border: 1px solid #333 !important; color: #5eb2ff !important; }
.qxbkw-boxmoe-menu li a i, .qxbkw-boxmoe-menu li a img, .qxbkw-boxmoe-menu li a svg { margin-right: 12px !important; }
/* 3. 多级菜单排版修复 (打散原生并排，恢复垂直树状) */
.qxbkw-boxmoe-menu .sub-menu { display: none; padding-left: 20px !important; margin-top: 5px !important; border: none !important; background: transparent !important; box-shadow: none !important; flex-direction: column !important; }
.qxbkw-boxmoe-menu .sub-menu li { list-style: none !important; margin: 2px 0 !important; width: 100% !important; display: block !important; float: none !important; padding: 0 !important; }
.qxbkw-boxmoe-menu .sub-menu li a { width: 100% !important; box-sizing: border-box !important; padding: 10px 15px !important; font-weight: 400 !important; color: #555 !important; font-size: 14px !important; border: none !important; border-radius: 8px !important; display: block !important; background: transparent !important; white-space: normal !important; text-align: left !important; }
.qxbkw-boxmoe-menu .sub-menu li.active > a, .qxbkw-boxmoe-menu .sub-menu li.current-menu-item > a { color: #5eb2ff !important; background: rgba(94, 178, 255, 0.1) !important; }
/* 4. 手风琴折叠交互：右侧动态翻转箭头 */
.qxbkw-boxmoe-menu .menu-item-has-children > a i.fa-angle-right, .qxbkw-boxmoe-menu .menu-item-has-children > a .icon-angle-right { display: none !important; }
.qxbkw-boxmoe-menu .menu-item-has-children > a { position: relative; }
.qxbkw-boxmoe-menu .menu-item-has-children > a::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #888; border-bottom: 2px solid #888; transform: translateY(-60%) rotate(45deg); transition: all 0.3s ease; }
.qxbkw-boxmoe-menu .menu-item-has-children.open-submenu > a::after { transform: translateY(-30%) rotate(225deg); border-color: #5eb2ff; }
.qxbkw-boxmoe-menu .sub-menu .sub-menu { padding-left: 15px !important; margin-left: 15px !important; border-left: 1px dashed rgba(0, 0, 0, 0.1) !important; margin-top: 2px !important; margin-bottom: 5px !important; }
.qxbkw-boxmoe-menu .sub-menu .sub-menu li a { font-size: 13px !important; color: #888 !important; padding: 8px 10px !important; }
/* 5. 环境特效展示层 (防遮挡设计) */
.qxbkw-effect-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99999; overflow: hidden; }
/* ❄️ 雪花物理下落动画 (带横向风力偏移) */
@keyframes fall-snow {
0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
10% { opacity: 0.8; }
80% { opacity: 0.8; }
100% { transform: translate3d(20vw, 110vh, 0) rotate(360deg); opacity: 0; }
}
.snow-item { position: absolute; top: -10vh; background-color: #e2f0ff; border-radius: 50%; box-shadow: 0 0 4px rgba(226, 240, 255, 0.8); animation: fall-snow linear infinite; opacity: 0.8; }
/* 🌸 樱花物理下落动画 (带横向风力偏移) */
@keyframes fall-sakura {
0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
10% { opacity: 0.6; }
80% { opacity: 0.6; }
100% { transform: translate3d(40vw, 110vh, 0) rotate(1080deg); opacity: 0; }
}
.sakura-item { position: absolute; top: -10vh; background-color: #ffb7c5; border-radius: 15px 2px 15px 2px; box-shadow: 0 0 4px rgba(255, 183, 197, 0.4); animation: fall-sakura linear infinite; opacity: 0.6; }第三步：添加 JS 交互逻辑（注入灵魂）
最后，同样在子比后台的 自定义 javascript 代码处，添加负责生成环境特效和接管菜单点击交互的 JS 代码。
(注：本代码已针对风向物理引擎做了偏移补偿修正，解决了常规特效代码导致的“屏幕左侧空缺”问题，确保全屏均衡下落。)
// =========================================================
// 环境特效生成与菜单高级折叠逻辑控制
// =========================================================
$(document).ready(function() {
/* ----------------------------------------------------
模块一：Pure / Snow / Sakura 环境特效控制器
---------------------------------------------------- */
const $switchBtns = $('.boxmoe-theme-switcher .switch-btn');
let currentEffect = localStorage.getItem('qxbkw_effect') || 'none'; // 记忆用户偏好
function updateUI(effect) {
$switchBtns.removeClass('active');
$('.boxmoe-theme-switcher .switch-btn[data-effect="' + effect + '"]').addClass('active');
}
// 核心算法：生成高密度动态粒子
function applyEffect(effect) {
$('.qxbkw-effect-layer').remove(); // 切换前强制清理旧图层释放内存
if (effect === 'none') return;
const $layer = $('<div class="qxbkw-effect-layer"></div>').appendTo('body');
if (effect === 'snow') {
for (let i = 0; i < 60; i++) {
const duration = Math.random() * 6 + 6;
const delay = Math.random() * 10;
// 核心修复：起始点向左扩张至 -20vw，抵消风力造成的左边界空白
const left = Math.random() * 120 - 20;
const size = Math.random() * 4 + 4;
$layer.append(`<div class="snow-item" style="left:${left}vw; width:${size}px; height:${size}px; animation-duration:${duration}s; animation-delay:-${delay}s;"></div>`);
}
}
else if (effect === 'sakura') {
for (let i = 0; i < 70; i++) {
const duration = Math.random() * 5 + 6;
const delay = Math.random() * 10;
// 核心修复：樱花风速大，起始点进一步扩张至 -40vw
const left = Math.random() * 140 - 40;
const size = Math.random() * 5 + 7;
$layer.append(`<div class="sakura-item" style="left:${left}vw; width:${size}px; height:${size * 1.2}px; animation-duration:${duration}s; animation-delay:-${delay}s;"></div>`);
}
}
}
$switchBtns.on('click', function(e) {
e.preventDefault();
const effect = $(this).attr('data-effect');
updateUI(effect);
applyEffect(effect);
localStorage.setItem('qxbkw_effect', effect);
});
updateUI(currentEffect);
applyEffect(currentEffect);
/* ----------------------------------------------------
模块二：多级菜单防冲突与手风琴折叠算法
---------------------------------------------------- */
$('.qxbkw-boxmoe-menu .menu-item-has-children > a').on('click', function(e) {
e.preventDefault();
const $parentLi = $(this).parent('li');
const $subMenu = $(this).siblings('.sub-menu');
// 状态一：折叠动作
if ($parentLi.hasClass('open-submenu')) {
$subMenu.slideUp(300);
$parentLi.removeClass('open-submenu');
// 高级逻辑：折叠父级时，顺带重置深层嵌套子菜单的状态
$parentLi.find('.open-submenu').removeClass('open-submenu').find('.sub-menu').slideUp(300);
}
// 状态二：展开动作
else {
// 高级逻辑：展开当前项时，静默收起同级的其他已展开菜单
$parentLi.siblings('.open-submenu').removeClass('open-submenu').find('.sub-menu').slideUp(300);
$subMenu.slideDown(300);
$parentLi.addClass('open-submenu');
}
});
});💡 最终效果与总结
盒子萌的Light/Dark/Auto是主题颜色切换，分别是白间、夜间、跟随系统。
但我发现在当子比白间和夜间的logo不一样时，用Light/Dark/Auto切换主题logo不会跟着切换，所以我就把那三个按钮改成了全局环境特效控制器。
如果你在部署过程中遇到任何问题，欢迎在下方评论区交流讨论！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容