From a5323e15a5b57c6f850b598b35bb8362708c51c9 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Sat, 10 Jan 2026 16:59:58 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1=E4=B8=BA?= =?UTF-8?q?=E9=98=BF=E9=87=8C=E4=BA=91=E9=A3=8E=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/nav-mega-menu.css | 266 +++++++++++++++++++++++++++++++++++++++++- header.html | 1 + js/nav-third-level.js | 50 ++++++++ public/header.html | 91 +++++++++------ 4 files changed, 370 insertions(+), 38 deletions(-) create mode 100644 js/nav-third-level.js diff --git a/css/nav-mega-menu.css b/css/nav-mega-menu.css index b2c333d..67b1e5e 100644 --- a/css/nav-mega-menu.css +++ b/css/nav-mega-menu.css @@ -1,4 +1,259 @@ -/* 三级导航菜单样式 - Mega Menu风格 */ +/* 三级导航菜单样式 - 阿里云风格两栏布局 */ + +/* 导航容器 */ +.nav-cont { + position: absolute; + top: 100%; + left: 0; + width: 100%; + background: #fff; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + z-index: 1000; + overflow: hidden; + transition: height 0.3s ease-out; +} + +/* Mega Menu 两栏布局 */ +.nav-cont-menu.mega-menu { + display: none; + min-height: 400px; +} + +.nav-content { + display: flex; + max-width: 1400px; + margin: 0 auto; + min-height: 400px; +} + +/* 左侧二级菜单栏 */ +.nav-left-sidebar { + width: 200px; + background: #f7f8fa; + border-right: 1px solid #e8e8e8; + flex-shrink: 0; +} + +/* 二级菜单项 */ +.nav-category-item { + position: relative; + display: block; + padding: 16px 20px; + color: #333; + font-size: 14px; + text-decoration: none; + border-left: 3px solid transparent; + transition: all 0.2s ease; + cursor: pointer; +} + +.nav-category-item:hover, +.nav-category-item.active { + background: #fff; + border-left-color: #1890ff; + color: #1890ff; +} + +.nav-category-item .category-icon { + display: inline-block; + width: 20px; + height: 20px; + margin-right: 8px; + vertical-align: middle; +} + +.nav-category-item .category-icon img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.nav-category-name { + font-weight: 500; +} + +.nav-category-desc { + font-size: 12px; + color: #999; + margin-top: 2px; + display: block; +} + +/* 右侧三级菜单区域 */ +.nav-right-content { + flex: 1; + padding: 24px 32px; + background: #fff; + overflow-y: auto; + max-height: 500px; +} + +/* 三级菜单容器 */ +.nav-third-panel { + display: none; +} + +.nav-third-panel.active { + display: block; + animation: fadeInRight 0.3s ease; +} + +/* 三级菜单标题 */ +.nav-third-title { + font-size: 16px; + font-weight: 600; + color: #333; + margin-bottom: 16px; + padding-bottom: 12px; + border-bottom: 2px solid #1890ff; + display: inline-block; +} + +/* 三级菜单网格布局 */ +.nav-third-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 12px 20px; + margin-top: 20px; +} + +/* 三级菜单项 */ +.nav-third-item { + margin: 0; +} + +.nav-third-link { + display: flex; + align-items: center; + padding: 10px 12px; + border-radius: 4px; + color: #333; + font-size: 13px; + text-decoration: none; + transition: all 0.2s ease; + border: 1px solid transparent; +} + +.nav-third-link:hover { + background: #f0f7ff; + border-color: #91d5ff; + color: #1890ff; + transform: translateX(4px); +} + +.nav-third-link::before { + content: '›'; + font-size: 16px; + color: #1890ff; + margin-right: 6px; + transition: transform 0.2s ease; +} + +.nav-third-link:hover::before { + transform: translateX(2px); +} + +.nav-third-name { + flex: 1; + font-weight: 500; +} + +.nav-third-desc { + font-size: 11px; + color: #999; + margin-left: 8px; +} + +/* 空状态 */ +.nav-right-empty { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + color: #999; + font-size: 14px; +} + +/* 旧版二级菜单样式（无三级菜单时使用） */ +.nav-item-box { + display: flex; + align-items: center; + gap: 12px; + padding: 16px 20px; + transition: all 0.2s ease; + text-decoration: none; + color: #333; + border-left: 3px solid transparent; +} + +.nav-item-box:hover { + background: #fff; + border-left-color: #1890ff; + color: #1890ff; +} + +.nav-item-box img { + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.item-box-title .title { + font-size: 14px; + font-weight: 500; + margin-bottom: 2px; +} + +.item-box-title .desc { + font-size: 12px; + color: #999; +} + +/* 空菜单占位 */ +.nav-cont-menu.nav-cont-empty { + display: none; +} + +/* 动画效果 */ +@keyframes fadeInRight { + from { + opacity: 0; + transform: translateX(10px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +/* 响应式调整 */ +@media (max-width: 768px) { + .nav-cont { + display: none !important; + } + + .nav-content { + flex-direction: column; + min-height: auto; + } + + .nav-left-sidebar { + width: 100%; + border-right: none; + border-bottom: 1px solid #e8e8e8; + } + + .nav-right-content { + padding: 16px; + max-height: none; + } + + .nav-third-grid { + grid-template-columns: 1fr; + } +} + /* 导航容器 */ .nav-cont { @@ -190,16 +445,16 @@ .nav-cont { display: none !important; } - + .nav-cont-menu.mega-menu { padding: 16px 0; } - + .nav-cont-menu.mega-menu .nav-content { flex-direction: column; gap: 16px; } - + .nav-category { max-width: 100%; } @@ -211,6 +466,7 @@ opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); @@ -219,4 +475,4 @@ .nav-cont-menu.animated { animation: fadeInDown 0.3s ease-out; -} +} \ No newline at end of file diff --git a/header.html b/header.html index 24d8dfe..fc3bece 100644 --- a/header.html +++ b/header.html @@ -104,6 +104,7 @@ + diff --git a/js/nav-third-level.js b/js/nav-third-level.js new file mode 100644 index 0000000..a6a8ce5 --- /dev/null +++ b/js/nav-third-level.js @@ -0,0 +1,50 @@ +// 三级导航菜单交互脚本 +(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(); + } +})(); diff --git a/public/header.html b/public/header.html index 6e67a6b..4a91874 100644 --- a/public/header.html +++ b/public/header.html @@ -66,41 +66,66 @@ {if isset($item.children) && !empty($item.children)}
- {foreach $item.children as $child} - {if isset($child.children) && !empty($child.children)} -
- + {php} + // 检查是否有包含三级菜单的二级项 + $hasThirdLevel = false; + foreach ($item['children'] as $child) { + if (isset($child['children']) && !empty($child['children'])) { + $hasThirdLevel = true; + break; + } + } + {/php} + + {if $hasThirdLevel} + +
+ {foreach $item.children as $childIndex=>$child} + {if isset($child.children) && !empty($child.children)} +
{if !empty($child.icon)} -
+ {$child.name} -
+ + {/if} + {$child.name} + {if !empty($child.description)} + {$child.description} {/if} -
-
{$child.name}
- {if !empty($child.description)} -
{$child.description}
- {/if} -
- -
- {foreach $child.children as $grandchild} -
- - {$grandchild.name} - {if !empty($grandchild.description)} - {$grandchild.description} - {/if} - -
- {/foreach}
+ {/if} + {/foreach}
- {else /} - -
+ + +
+ {foreach $item.children as $childIndex=>$child} + {if isset($child.children) && !empty($child.children)} +
+
{$child.name}
+
+ {foreach $child.children as $grandchild} +
+ + {$grandchild.name} + {if !empty($grandchild.description)} + {$grandchild.description} + {/if} + +
+ {/foreach} +
+
+ {/if} + {/foreach} +
+ {else} + +
+ {foreach $item.children as $child} + {if !empty($child.icon)} {$child.name} {/if} @@ -110,10 +135,10 @@
{$child.description}
{/if}
-
- + + {/foreach} +
{/if} - {/foreach}
{else /}