refactor: 导航下拉菜单重构为方案 C 混合型
All checks were successful
continuous-integration/drone/push Build is passing

- public/header.html: 去掉左右分栏,改为二级分组标题 + 三级国旗链接网格
- css/nav-mega-menu.css: 居中收窄面板(720px),分组标题+网格布局
- js/nav-third-level.js: 清空旧的面板切换脚本(不再需要)
- 下拉面板不再全宽铺开,视觉更精致紧凑
This commit is contained in:
yiqiu
2026-03-18 18:03:27 +08:00
parent cc141973a5
commit f3d3a2954f
3 changed files with 138 additions and 306 deletions

View File

@@ -1,50 +1,3 @@
// 三级导航菜单交互脚本
(function () {
'use strict';
// 初始化三级导航
function initThirdLevelNav() {
const navContMenus = document.querySelectorAll('.nav-cont-menu.mega-menu');
navContMenus.forEach(menu => {
const categoryItems = menu.querySelectorAll('.nav-category-item');
const thirdPanels = menu.querySelectorAll('.nav-third-panel');
if (categoryItems.length === 0 || thirdPanels.length === 0) {
return; // 没有三级菜单
}
// 默认激活第一个
if (categoryItems[0]) {
categoryItems[0].classList.add('active');
}
if (thirdPanels[0]) {
thirdPanels[0].classList.add('active');
}
// 绑定hover事件
categoryItems.forEach((item, index) => {
item.addEventListener('mouseenter', function () {
// 移除所有active状态
categoryItems.forEach(cat => cat.classList.remove('active'));
thirdPanels.forEach(panel => panel.classList.remove('active'));
// 激活当前
this.classList.add('active');
const categoryIndex = this.getAttribute('data-category-index');
const targetPanel = menu.querySelector(`.nav-third-panel[data-panel-index="${categoryIndex}"]`);
if (targetPanel) {
targetPanel.classList.add('active');
}
});
});
});
}
// DOM加载完成后初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initThirdLevelNav);
} else {
initThirdLevelNav();
}
})();
// nav-third-level.js
// 方案 C 混合型:三级菜单直接平铺展示,不需要面板切换逻辑
// 保留此文件以避免 header.html 中的 <script src> 引用报 404