update menu, hover

template/javascript/global.html

@@ -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;