update menu, hover
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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]">
|
||||
|
||||
Reference in New Issue
Block a user