yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航菜单主题色
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2026-01-10 17:56:38 +08:00
parent 9e3ae74b12
commit 6a70e41f88
2 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
common/common.js
View File

@@ -133,7 +133,7 @@ $(function () {
$(".nav-menu .nav-item").hover( $(".nav-menu .nav-item").hover(
function () { function () {
const index = $(".nav-menu .nav-item").index($(this)); const index = $(".nav-menu .nav-item").index($(this));
// 清除离开定时器 // 清除离开定时器
if (leaveTimer) { if (leaveTimer) {
clearTimeout(leaveTimer); clearTimeout(leaveTimer);
@@ -142,15 +142,20 @@ $(function () {
// 添加150ms延迟，防止误触 // 添加150ms延迟，防止误触
hoverTimer = setTimeout(() => { hoverTimer = setTimeout(() => {
$(".nav-cont .nav-cont-menu") const $menu = $(".nav-cont .nav-cont-menu").eq(index);
.eq(index)
.css("display", "block");
if ( if (!$menu.hasClass("nav-cont-empty")) {
!$(".nav-cont .nav-cont-menu").eq(index).hasClass("nav-cont-empty") // 1. 先让容器从0开始（防止闪烁）
) { $(".nav-cont").css("height", "0px");
const height = $(".nav-cont .nav-cont-menu").eq(index).outerHeight(true);
$(".nav-cont").css("height", height + "px"); // 2. 显示菜单（但容器高度为0，所以看不见）
$menu.css("display", "block");
// 3. 立即获取高度并展开（使用requestAnimationFrame确保渲染）
requestAnimationFrame(() => {
const height = $menu.outerHeight(true);
$(".nav-cont").css("height", height + "px");
});
} }
showIndex = index; showIndex = index;
}, 150); }, 150);
@@ -164,8 +169,12 @@ $(function () {
leaveTimer = setTimeout(() => { leaveTimer = setTimeout(() => {
const index = $(".nav-menu .nav-item").index($(this)); const index = $(".nav-menu .nav-item").index($(this));
$(".nav-cont .nav-cont-menu").eq(index).css("display", "none"); // 先收起容器
$(".nav-cont").css("height", "0"); $(".nav-cont").css("height", "0");
// 等动画完成后隐藏内容
setTimeout(() => {
$(".nav-cont .nav-cont-menu").eq(index).css("display", "none");
}, 300); // 等待transition完成
}, 100); }, 100);
} }
); );
@@ -178,25 +187,28 @@ $(function () {
leaveTimer = null; leaveTimer = null;
} }
$(".nav-cont .nav-cont-menu") const $menu = $(".nav-cont .nav-cont-menu").eq(showIndex);
.eq(showIndex) $menu.css("display", "block");
.css("display", "block");
if (!$menu.hasClass("nav-cont-empty")) {
if (!$(".nav-cont .nav-cont-menu").eq(showIndex).hasClass("nav-cont-empty")) { requestAnimationFrame(() => {
const height = $(".nav-cont .nav-cont-menu").eq(showIndex).outerHeight(true); const height = $menu.outerHeight(true);
$(".nav-cont").css("height", height + "px"); $(".nav-cont").css("height", height + "px");
});
} }
}, },
function () { function () {
leaveTimer = setTimeout(() => { leaveTimer = setTimeout(() => {
$(".nav-cont .nav-cont-menu") // 先收起容器
.eq(showIndex)
.css("display", "none");
$(".nav-cont").css("height", "0"); $(".nav-cont").css("height", "0");
// 等动画完成后隐藏内容
setTimeout(() => {
$(".nav-cont .nav-cont-menu").eq(showIndex).css("display", "none");
}, 300);
}, 100); }, 100);
} }
); );
if (localStorage.jwt) { if (localStorage.jwt) {
if (sessionStorage.accountInfo) { if (sessionStorage.accountInfo) {
const obj = JSON.parse(sessionStorage.accountInfo); const obj = JSON.parse(sessionStorage.accountInfo);

6
css/nav-mega-menu.css
View File

@@ -11,8 +11,9 @@
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(56, 189, 248, 0.15); border-top: 1px solid rgba(56, 189, 248, 0.15);
z-index: 1000; z-index: 1000;
overflow: visible; overflow: hidden;
transition: height 0.3s ease-out; transition: height 0.3s ease-out;
height: 0;
} }
/* Mega Menu 两栏布局 */ /* Mega Menu 两栏布局 */
@@ -27,6 +28,7 @@
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
min-height: 400px; min-height: 400px;
padding: 0;
} }
/* 左侧二级菜单栏 - 深色背景 */ /* 左侧二级菜单栏 - 深色背景 */
@@ -86,7 +88,7 @@
/* 右侧三级菜单区域 - 深色背景 */ /* 右侧三级菜单区域 - 深色背景 */
.nav-right-content { .nav-right-content {
flex: 1; flex: 1;
padding: 24px 32px; padding: 16px 24px;
background: rgba(15, 23, 42, 0.6); background: rgba(15, 23, 42, 0.6);
overflow-y: auto; overflow-y: auto;
max-height: none; max-height: none;