UIUX수정
This commit is contained in:
@@ -124,11 +124,20 @@ $(document).ready(function () {
|
||||
let isEntered = false;
|
||||
menu_init();
|
||||
|
||||
$(document).on("mouseenter", ".desktop .menu, .desktop .logoWrap", function () {
|
||||
const $headerInner = $(".hederWarp_n .headerInner");
|
||||
let $menuBg = $(".menuBg");
|
||||
// menuBg가 없으면 생성 후 삽입
|
||||
console.log($menuBg.length);
|
||||
if ($menuBg.length <= 0) {
|
||||
$menuBg = $('<div class="menuBg" style="height:0;"></div>');
|
||||
$headerInner.append($menuBg);
|
||||
}
|
||||
|
||||
$(document).on("mouseenter", ".desktop .gnb", function () {
|
||||
if (isEntered) return;
|
||||
isEntered = true;
|
||||
|
||||
$(".menuDepth2Wrap").hide().stop(true).fadeIn(200);
|
||||
$(".menuDepth2Wrap").hide().stop(true).fadeIn(240);
|
||||
$(".desktop .menu").addClass("open");
|
||||
$(".desktop .hederWarp_n").addClass("menu-open");
|
||||
|
||||
@@ -136,21 +145,25 @@ $(document).ready(function () {
|
||||
.toArray()
|
||||
.map((el) => Math.floor($(el).outerHeight()));
|
||||
const menuDepth2WrapHeight = Math.max(...menuDepth2WrapHeights);
|
||||
$(".desktop .menuBg").css("height", menuDepth2WrapHeight);
|
||||
|
||||
// 강제로 리플로우 발생시켜야 transition 작동
|
||||
requestAnimationFrame(() => {
|
||||
$menuBg.css("height", `${menuDepth2WrapHeight + 80}px`);
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("mouseleave", ".desktop .gnb, .desktop .menuWarp", function (e) {
|
||||
$(document).on("mouseleave", ".desktop .gnb, .desktop .menuBg", function (e) {
|
||||
const toElement = e.relatedTarget;
|
||||
|
||||
// gnb, menuWarp, logoWrap, menu 내부로 이동한 경우는 무시
|
||||
if ($(toElement).closest(".desktop .gnb, .desktop .menuWarp, .desktop .logoWrap, .desktop .menu").length > 0) {
|
||||
if ($(toElement).closest(".desktop .gnb, .desktop .menuWarp, .desktop .logoWrap, .desktop .menuBg").length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(".desktop .menuBg").css("height", "0");
|
||||
$(".menuDepth2Wrap").hide().stop(true);
|
||||
$(".desktop .menu").removeClass("open");
|
||||
$(".desktop .hederWarp_n").removeClass("menu-open");
|
||||
$(".desktop .menuBg").css("height", "0");
|
||||
isEntered = false;
|
||||
});
|
||||
}
|
||||
@@ -195,12 +208,12 @@ $(document).ready(function () {
|
||||
});
|
||||
|
||||
//자동차 번호/메뉴/로그인 선택 슬라이드
|
||||
$(".carlist, .carItem, .menu > a, .user > a")
|
||||
$(".menu > a, .user > a")
|
||||
.on("mouseover focusin", function () {
|
||||
$(this).addClass("on");
|
||||
$(this).next(".carlistItem, .gnbMenu, .userMenu").addClass("on");
|
||||
$(this).next(".gnbMenu, .userMenu").addClass("on");
|
||||
$(this)
|
||||
.next(".carlistItem, .gnbMenu, .userMenu")
|
||||
.next(".gnbMenu, .userMenu")
|
||||
.on("mouseover focusin", function () {
|
||||
$(this).addClass("on");
|
||||
})
|
||||
@@ -210,10 +223,27 @@ $(document).ready(function () {
|
||||
})
|
||||
.on("mouseleave", function () {
|
||||
$(this).removeClass("on");
|
||||
$(this).next(".carlistItem, .gnbMenu, .userMenu").removeClass("on");
|
||||
$(this).parents(".carlist").removeClass("on");
|
||||
$(this).next(".gnbMenu, .userMenu").removeClass("on");
|
||||
});
|
||||
|
||||
let isOverCarItem = false;
|
||||
let isOverCarlistItem = false;
|
||||
|
||||
$(".carlist").on("mouseenter", function () {
|
||||
isOverCarItem = true;
|
||||
$(".carItem, .carlistItem").addClass("on");
|
||||
});
|
||||
$(".carlist").on("mouseleave", function () {
|
||||
isOverCarItem = false;
|
||||
setTimeout(removeOnClassIfNeeded, 10);
|
||||
});
|
||||
|
||||
function removeOnClassIfNeeded() {
|
||||
if (!isOverCarItem && !isOverCarlistItem) {
|
||||
$(".carItem, .carlistItem").removeClass("on");
|
||||
}
|
||||
}
|
||||
|
||||
$("#slide-open").click(function () {
|
||||
if ($("#burgur").hasClass("on")) {
|
||||
$("#burgur").removeClass("on");
|
||||
|
||||
Reference in New Issue
Block a user