gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 메뉴 호버 이벤트 개선 및 모바일 대응

Browse Source 
- 데스크톱 메뉴 호버 시 배경 영역 추가
- 모바일/태블릿 메뉴 클릭 이벤트 선택자 수정 (.lower 클래스 추가)
- 메뉴 호버 시 높이 자동 계산 로직 추가
- 메뉴 배경 영역(menuBg) 추가 및 제거 로직 구현
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-04-28 23:56:18 +09:00
parent 0a4ba52a8e
commit 9822260997
5 changed files with 186 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
assets/css/common.css
View File

@@ -669,6 +669,13 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .logoWrap {
z-index: 0;
}
@media (min-width: 1024px) {
.hederWarp_n .headerInner .gnb .logoWrap {
display: flex;
align-items: center;
height: 8rem;
}
}
.hederWarp_n .headerInner .gnb .logoWrap a {
display: flex;
justify-content: flex-start;
@@ -885,10 +892,52 @@ video::-webkit-media-controls {
margin-top: 1rem;
}
}
@media (min-width: 1024px) {
.hederWarp_n .headerInner .gnb .menuWarp .menuBg {
display: block;
position: absolute;
top: 8rem;
left: 0;
right: 0;
z-index: 1;
background-color: #fff;
border-top: 1px solid #DEDEDE;
}
}
.hederWarp_n .headerInner .gnb .menuWarp .menu {
display: flex;
margin-left: 4.5rem;
}
@media (min-width: 1024px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap.info {
display: block !important;
width: 27rem;
}
}
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap h3 {
margin-bottom: 3.6rem;
}
@media (min-width: 1024px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(1) .menuDepth2Wrap {
left: -15.6rem;
}
}
@media (min-width: 1024px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(2) .menuDepth2Wrap {
left: 3.4rem;
}
}
@media (min-width: 1024px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(3) .menuDepth2Wrap {
left: 19.6rem;
}
}
@media (min-width: 1024px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(4) .menuDepth2Wrap {
display: block;
left: 28.4rem;
}
}
@media (max-width: 1024px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu {
display: block;
@@ -898,6 +947,7 @@ video::-webkit-media-controls {
}
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap {
position: relative;
z-index: 2;
}
@media (max-width: 1024px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap {
@@ -928,7 +978,9 @@ video::-webkit-media-controls {
right: 0;
width: 1.5rem;
height: 1.5rem;
background: url("/kr/assets/images/common/icon-menu-plus.svg") center center no-repeat;
transform: rotate(90deg);
background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
transition: transform 0.2s ease;
}
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1.lower.on::after {
content: "";
@@ -936,7 +988,8 @@ video::-webkit-media-controls {
right: 0;
width: 1.5rem;
height: 1.5rem;
background: url("/kr/assets/images/common/icon-menu-minus.svg") center center no-repeat;
transform: rotate(270deg);
background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
}
}
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap {
@@ -947,9 +1000,7 @@ video::-webkit-media-controls {
top: 7.9rem;
left: 50%;
transform: translate(-50%, 0);
padding: 1.3rem 2rem;
background-color: #fff;
border: 1px solid #dedede;
padding: 4rem 2rem 6rem;
}
@media (max-width: 1024px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap {
@@ -962,6 +1013,9 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap .boxBullet {
display: none !important;
}
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap h3 {
display: none;
}
}
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.info {
width: 14rem;
@@ -982,7 +1036,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap .boxBullet {
width: 1.4rem;
height: 1rem;
display: block;
display: none;
position: absolute;
top: -0.9rem;
left: 50%;
@@ -996,7 +1050,7 @@ video::-webkit-media-controls {
font-size: 1.4rem;
font-weight: 400;
color: #9ea1a2;
padding: 0.7rem 0;
padding: 0.9rem 0;
}
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a.active {
color: #05141f;

2
assets/css/common.css.map
View File

File diff suppressed because one or more lines are too long

83
assets/css/common.scss
View File

@@ -751,6 +751,11 @@ video::-webkit-media-controls {
.logoWrap {
z-index: 0;
@media (min-width: 1024px) {
display: flex;
align-items: center;
height: 8rem;
}
a {
display: flex;
@@ -998,9 +1003,68 @@ video::-webkit-media-controls {
}
}
.menuBg {
@media (min-width: 1024px) {
display: block;
position: absolute;
top:8rem;
left: 0;
right: 0;
z-index: 1;
background-color: #fff;
border-top: 1px solid #DEDEDE;
}
}
.menu {
display: flex;
margin-left: 4.5rem;
&.open {
li {
.menuDepth2Wrap {
&.info {
@media (min-width: 1024px) {
display: block !important;
width: 27rem;
}
}
h3 {
margin-bottom: 3.6rem;
}
}
}
li:nth-child(1) {
.menuDepth2Wrap {
@media (min-width: 1024px) {
left: -15.6rem;
}
}
}
li:nth-child(2) {
.menuDepth2Wrap {
@media (min-width: 1024px) {
left: 3.4rem;
}
}
}
li:nth-child(3) {
.menuDepth2Wrap {
@media (min-width: 1024px) {
left: 19.6rem;
}
}
}
li:nth-child(4) {
.menuDepth2Wrap {
@media (min-width: 1024px) {
display: block;
left: 28.4rem;
}
}
}
}
@media (max-width: 1024px) {
display: block;
@@ -1010,6 +1074,7 @@ video::-webkit-media-controls {
.menuDepth1Wrap {
position: relative;
z-index: 2;
@media (max-width: 1024px) {
padding: 0 2rem;
@@ -1039,7 +1104,9 @@ video::-webkit-media-controls {
right: 0;
width: 1.5rem;
height: 1.5rem;
background: url("/kr/assets/images/common/icon-menu-plus.svg") center center no-repeat;
transform: rotate(90deg);
background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
transition: transform .2s ease;
}
&.on {
@@ -1049,7 +1116,8 @@ video::-webkit-media-controls {
right: 0;
width: 1.5rem;
height: 1.5rem;
background: url("/kr/assets/images/common/icon-menu-minus.svg") center center no-repeat;
transform: rotate(270deg);
background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
}
}
}
@@ -1064,9 +1132,9 @@ video::-webkit-media-controls {
top: 7.9rem;
left: 50%;
transform: translate(-50%, 0);
padding: 1.3rem 2rem;
background-color: #fff;
border: 1px solid #dedede;
padding: 4rem 2rem 6rem;
// background-color: #fff;
// border: 1px solid #dedede;
@media (max-width: 1024px) {
position: initial;
@@ -1078,6 +1146,7 @@ video::-webkit-media-controls {
.boxBullet {
display: none !important;
}
h3 {display: none;}
}
&.info {
@@ -1099,7 +1168,7 @@ video::-webkit-media-controls {
.boxBullet {
width: 1.4rem;
height: 1rem;
display: block;
display: none;
position: absolute;
top: -0.9rem;
left: 50%;
@@ -1116,7 +1185,7 @@ video::-webkit-media-controls {
font-size: 1.4rem;
font-weight: 400;
color: #9ea1a2;
padding: 0.7rem 0;
padding: .9rem 0;
&.active {
color: #05141f;

33
assets/js/common.js
View File

@@ -43,7 +43,7 @@ $(document).ready(function () {
}
});
$(document).on("click", ".moblie .menuDepth1Wrap > a", function (e) {
$(document).on("click", ".moblie .menuDepth1Wrap > a.lower", function (e) {
e.preventDefault();
});
@@ -96,7 +96,7 @@ $(document).ready(function () {
$(this).toggleClass("on");
}
});
$(document).on("click", ".tablet .menuDepth1Wrap > a", function (e) {
$(document).on("click", ".tablet .menuDepth1Wrap > a.lower", function (e) {
e.preventDefault();
});
@@ -122,11 +122,32 @@ $(document).ready(function () {
if (targetSize != "desktop") {
menu_init();
$(document).on("mouseenter", ".menuDepth1Wrap", function () {
$(this).find(".menuDepth2Wrap").css("display", "block");
$(document).on("mouseenter", ".desktop .menu, .desktop .logoWrap", function () {
if (!$(".menuBg").length) {
$(".desktop .menu").addClass("open");
$(".menuDepth2Wrap").css("display", "block");
const menuDepth2WrapHeights = $(".desktop .menuDepth2Wrap")
.toArray()
.map((el) => Math.floor($(el).outerHeight()));
const menuDepth2WrapHeight = Math.max(...menuDepth2WrapHeights);
$(".desktop .menu").after(`<div class="menuBg" style="height:${menuDepth2WrapHeight}px"></div>`);
}
});
$(document).on("mouseleave", ".menuDepth1Wrap", function () {
$(this).find(".menuDepth2Wrap").css("display", "none");
$(document).on("mouseleave", ".desktop .menuWarp", function (e) {
if (!$(e.relatedTarget).hasClass("menuBg")) {
$(".desktop .menu").removeClass("open");
$(".menuDepth2Wrap").css("display", "none");
$(".menuBg").remove();
}
});
$(document).on("mouseleave", ".menuBg", function () {
$(".desktop .menu").removeClass("open");
$(".menuDepth2Wrap").css("display", "none");
$(".menuBg").remove();
});
$(document).on("click", ".menuDepth1Wrap > a", function () {
location.href = $(this).data("url");

38
product/pdp_display_theme_0429.html
View File

@@ -119,28 +119,35 @@
<!-- PC 모바일 공통 메뉴 영역입니다. -->
<ul class="menu">
<li class="menuDepth1Wrap">
<a href="../kia.html#mainProductList" class="menuDepth1">디지털 사양</a>
<a href="../kia.html#mainProductList" class="menuDepth1 lower">디지털 사양</a>
<div class="menuDepth2Wrap info">
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
</svg>
<h3>디지털 사양</h3>
<ul>
<li class="menuDepth2"><a href="../kia.html#mainProductList">디지털 사양</a></li>
<li class="menuDepth2"><a href="../info/product-usage-guide.html" class="active">사양별 이용안내</a></li>
<li class="menuDepth2"><a href="#">KBO 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="#">NBA 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="#">아케이드 게임</a></li>
<li class="menuDepth2"><a href="#">원격 스마트 주차 보조(RSPA 2)</a></li>
<li class="menuDepth2"><a href="#">부스트(The 2025 EV9)</a></li>
<li class="menuDepth2"><a href="#">라이팅 패턴</a></li>
<li class="menuDepth2"><a href="#">스마트 회생 시스템 플러스</a></li>
<li class="menuDepth2"><a href="#">스트리밍 프리미엄</a></li>
<li class="menuDepth2"><a href="#">스트리밍 플러스</a></li>
</ul>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="../info/product-usage-guide.html" class="menuDepth1" data-url="../info/product-usage-guide.html">사양별 이용 안내</a>
<div class="menuDepth2Wrap info">
<h3>사양별 이용 안내</h3>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="../info/service-info.html" class="menuDepth1 lower" data-url="../info/service-info.html">스토어 소개</a>
<div class="menuDepth2Wrap info">
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
</svg>
<h3>스토어 소개</h3>
<ul>
<li class="menuDepth2"><a href="../info/service-info.html">스토어 소개</a></li>
<li class="menuDepth2"><a href="../info/registration-guide.html" class="active">스토어 가입안내</a></li>
<li class="menuDepth2"><a href="../info/registration-guide.html">스토어 가입안내</a></li>
<li class="menuDepth2"><a href="../info/buying-Installation-guide.html">스토어 이용안내</a></li>
<li class="menuDepth2"><a href="../service/event-list.html">이벤트</a></li>
</ul>
@@ -149,14 +156,11 @@
<li class="menuDepth1Wrap">
<a href="../info/as-guide.html" class="menuDepth1 lower" data-url="../info/as-guide.html">고객지원</a>
<div class="menuDepth2Wrap support">
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
</svg>
<h3>고객지원</h3>
<ul>
<li class="menuDepth2"><a href="../service/faq.html">자주하는 질문</a></li>
<li class="menuDepth2"><a href="../service/inquiry-list.html">문의하기</a></li>
<li class="menuDepth2"><a href="../info/as-guide.html" class="active">고객센터 및 AS안내</a></li>
<li class="menuDepth2"><a href="../info/as-guide.html">고객센터 및 AS안내</a></li>
<li class="menuDepth2"><a href="../service/notice-list.html">공지사항</a></li>
</ul>
</div>