From b14f4517f8b8e622d785ea2a633acc268454b9db Mon Sep 17 00:00:00 2001 From: yiqiu Date: Sat, 10 Jan 2026 17:19:53 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=89=E7=BA=A7=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/nav-mega-menu.css | 246 ++---------------------------------------- 1 file changed, 10 insertions(+), 236 deletions(-) diff --git a/css/nav-mega-menu.css b/css/nav-mega-menu.css index edad99c..7af8ef6 100644 --- a/css/nav-mega-menu.css +++ b/css/nav-mega-menu.css @@ -120,12 +120,12 @@ /* 三级菜单项 */ .nav-third-item { margin: 0; - width: 100%; + padding: 0; + min-width: 0; } .nav-third-link { - display: flex; - align-items: center; + display: block; width: 100%; padding: 10px 12px; border-radius: 4px; @@ -135,29 +135,26 @@ transition: all 0.2s ease; border: 1px solid transparent; box-sizing: border-box; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .nav-third-link:hover { background: #e6f7ff; border-color: #91d5ff; color: #1890ff; - transform: translateX(4px); + padding-left: 20px; } .nav-third-link::before { - content: '›'; - font-size: 16px; + content: '› '; color: #1890ff; - margin-right: 6px; - transition: transform 0.2s ease; -} - -.nav-third-link:hover::before { - transform: translateX(2px); + font-size: 14px; + font-weight: bold; } .nav-third-name { - flex: 1; font-weight: 500; } @@ -255,227 +252,4 @@ .nav-third-grid { grid-template-columns: 1fr; } -} - - -/* 导航容器 */ -.nav-cont { - position: absolute; - top: 100%; - left: 0; - width: 100%; - background: #fff; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); - z-index: 1000; - overflow: hidden; - transition: height 0.3s ease-out; -} - -/* Mega Menu 内容区 */ -.nav-cont-menu.mega-menu { - display: none; - padding: 24px 0; -} - -.nav-cont-menu.mega-menu .nav-content { - display: flex; - flex-wrap: wrap; - gap: 32px; - max-width: 1400px; - margin: 0 auto; - padding: 0 20px; -} - -/* 二级菜单项(带三级菜单的分类) */ -.nav-category { - flex: 0 0 auto; - min-width: 200px; - max-width: 280px; -} - -.nav-category-header { - display: flex; - align-items: center; - gap: 12px; - padding: 8px 12px; - margin-bottom: 12px; - border-radius: 6px; - background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%); - transition: all 0.2s ease; -} - -.nav-category-header:hover { - background: linear-gradient(135deg, #e6f3ff 0%, #d9edff 100%); - transform: translateX(2px); -} - -.nav-category-icon { - flex-shrink: 0; - width: 32px; - height: 32px; - border-radius: 6px; - overflow: hidden; -} - -.nav-category-icon img { - width: 100%; - height: 100%; - object-fit: contain; -} - -.nav-category-info { - flex: 1; - min-width: 0; -} - -.nav-category-title { - font-size: 14px; - font-weight: 600; - color: #1890ff; - margin-bottom: 2px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.nav-category-desc { - font-size: 12px; - color: #8c8c8c; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* 三级菜单列表 */ -.nav-third-level { - padding-left: 12px; -} - -.nav-third-item { - margin-bottom: 8px; -} - -.nav-third-link { - display: flex; - align-items: center; - gap: 8px; - padding: 6px 12px; - border-radius: 4px; - color: #333; - font-size: 13px; - text-decoration: none; - transition: all 0.2s ease; - position: relative; -} - -.nav-third-link::before { - content: ''; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 3px; - height: 0; - background: #1890ff; - border-radius: 2px; - transition: height 0.2s ease; -} - -.nav-third-link:hover { - background: #f5f5f5; - color: #1890ff; - padding-left: 16px; -} - -.nav-third-link:hover::before { - height: 16px; -} - -.nav-third-name { - flex: 1; - font-weight: 500; -} - -.nav-third-desc { - font-size: 11px; - color: #999; - margin-left: auto; -} - -/* 没有三级菜单的二级菜单项(旧版兼容) */ -.nav-item-box { - display: flex; - align-items: flex-start; - gap: 12px; - padding: 12px 16px; - border-radius: 6px; - transition: all 0.2s ease; - text-decoration: none; - color: #333; -} - -.nav-item-box:hover { - background: #f5f5f5; - transform: translateY(-2px); -} - -.nav-item-box img { - width: 40px; - height: 40px; - flex-shrink: 0; - border-radius: 4px; -} - -.item-box-title .title { - font-size: 14px; - font-weight: 600; - color: #333; - margin-bottom: 4px; -} - -.item-box-title .desc { - font-size: 12px; - color: #8c8c8c; -} - -/* 空菜单占位 */ -.nav-cont-menu.nav-cont-empty { - display: none; -} - -/* 响应式调整 */ -@media (max-width: 768px) { - .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%; - } -} - -/* 加载动画 */ -@keyframes fadeInDown { - from { - opacity: 0; - transform: translateY(-10px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -.nav-cont-menu.animated { - animation: fadeInDown 0.3s ease-out; } \ No newline at end of file