update menu, hover

This commit is contained in:
2025-02-24 10:09:33 +07:00
parent dd8de9838f
commit d20a20684d
7 changed files with 177 additions and 104 deletions

View File

@@ -7,6 +7,9 @@
$('#overlay').addClass('active');
});
// hover show danh muc con
HoverShowMenu();
AdminFunctions.searchSuggestions('#js-input-search')
})
@@ -17,6 +20,43 @@
}
function HoverShowMenu() {
$("#js-menu-big .box-item .item").on("mousemove", function () {
let $checkMenu = $('#js-menu-big').hasClass('active');
if ($checkMenu) {
let $hoverMenu = $('#js-hover-menu');
let $this = $(this).parents('.box-item');
let $hoverContent = $this.find('.hover-menu');
if ($hoverContent.length) {
let offset = $this.offset();
let x = offset.left + $("#js-menu-big").width();
let y = offset.top;
// Kiểm tra nếu hoverContent bị tràn màn hình ở dưới
let hoverHeight = $hoverContent.outerHeight();
let windowHeight = $(window).height();
let maxY = $(window).scrollTop() + windowHeight; // Vị trí Y tối đa có thể hiển thị
let newY = y;
if (y + hoverHeight > maxY) {
newY = maxY - hoverHeight - 10;
}
$hoverMenu.addClass('active')
.html($hoverContent.html())
.css({ left: x, top: newY });
}
}
});
$("#js-hover-menu").on("mouseleave", function () {
$("#js-hover-menu").removeClass("active");
});
}
function formatCurrency(a) {
var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
var len = b.length;

View File

@@ -11,18 +11,13 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" media="screen" href="{{ 'full.min.css' | asset_url }}?v12.11" />
<link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v2025.02" />
<link rel="stylesheet" media="screen" href="{{ 'daisyui.css' | asset_url }}?v12.11" />
<link rel="stylesheet" media="screen" href="{{ 'extension_daisyui.css' | asset_url }}?v2025.02" />
<script src="{{ 'tailwindcss.js' | asset_url }}"></script>
</head>
<body>
<div id="overlay" onclick="clickBackground()"></div>
<div class="admin-global-container">
@@ -104,6 +99,9 @@
<span class="title text-[14px]"> Cài đặt </span>
</a>
</div>
<div class="box-hover" id="js-hover-menu">
</div>
</div>
<div class="admin-content-container h-screen" id="js-admin-content-container">
@@ -111,10 +109,6 @@
<div
class="admin-header-container flex items-center justify-between bg-white px-4 py-3 sticky top-0 z-[99] border-b-[1px] border-[#eef0f2]">
<div class="flex items-center">
<a href="javascript:void(0)" title="Mở menu"
class="icon-close lg:hidden md:block mr-[10px] 2xl:hidden sm:block" id="js-show-menu">
<i class="fa fa-bars text-[25px]"></i>
</a>
<form class="w-[420px] relative w-[100%] menu-hide" id="js-form-search">
<div
class="content w-[100%] flex items-center border-[#ECECEC] border-[1px] rounded-[5px] focus-within:border-[#0041E8]">