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

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

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>