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;