f3d3a2954f
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: 清空旧的面板切换脚本（不再需要） - 下拉面板不再全宽铺开，视觉更精致紧凑
196 lines
3.8 KiB
CSS
196 lines
3.8 KiB
CSS
/* ============================================================
|
|
导航下拉菜单 — 方案 C 混合型
|
|
二级分组标题 + 三级国旗链接网格，居中收窄面板
|
|
============================================================ */
|
|
|
|
/* ── 下拉外层容器 ── */
|
|
.nav-cont {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
overflow: hidden;
|
|
transition: height 0.25s ease-out;
|
|
height: 0;
|
|
/* 不设背景，由 inner 负责 */
|
|
}
|
|
|
|
/* ── 下拉内层 —— 居中收窄面板 ── */
|
|
.nav-dropdown-inner {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ── 每个一级导航对应的菜单面板 ── */
|
|
.nav-cont-menu {
|
|
display: none;
|
|
width: 100%;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
background: rgba(14, 16, 26, 0.98);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-top: none;
|
|
border-radius: 0 0 14px 14px;
|
|
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55),
|
|
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
|
|
padding: 20px 0 12px;
|
|
}
|
|
|
|
.nav-cont-menu.nav-cont-empty {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ── 分组容器 (方案 C 核心) ── */
|
|
.nav-groups {
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.nav-group {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.nav-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ── 二级分组标题行 ── */
|
|
.nav-group-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 8px 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: rgba(148, 163, 184, 0.7);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
margin-bottom: 6px;
|
|
user-select: none;
|
|
}
|
|
|
|
.nav-group-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
object-fit: contain;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.nav-group-desc {
|
|
font-weight: 400;
|
|
font-size: 11px;
|
|
color: rgba(148, 163, 184, 0.45);
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
}
|
|
|
|
/* ── 三级链接网格 ── */
|
|
.nav-group-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
/* ── 三级链接项 ── */
|
|
.nav-grid-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
color: rgba(226, 232, 240, 0.85);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.nav-grid-link:hover {
|
|
background: rgba(255, 255, 255, 0.07);
|
|
color: #fff;
|
|
}
|
|
|
|
/* ── 国旗图标 ── */
|
|
.country-flag {
|
|
width: 22px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
object-fit: cover;
|
|
border-radius: 3px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ── 纯二级：简单网格 ── */
|
|
.nav-simple-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 2px;
|
|
padding: 4px 24px 8px;
|
|
}
|
|
|
|
.nav-simple-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
color: rgba(226, 232, 240, 0.85);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.nav-simple-item:hover {
|
|
background: rgba(255, 255, 255, 0.07);
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-simple-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-simple-icon img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.nav-simple-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: inherit;
|
|
}
|
|
|
|
.nav-simple-desc {
|
|
font-size: 12px;
|
|
color: rgba(148, 163, 184, 0.6);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ── 空菜单 ── */
|
|
.nav-cont-menu.nav-cont-empty {
|
|
display: none;
|
|
}
|
|
|
|
/* ── 响应式 ── */
|
|
@media (max-width: 768px) {
|
|
.nav-cont {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-group-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
} |