gnb메뉴에 호버 시 서브메뉴(dropdown) 구현하는 방법에 대해 정리해보았다.
⭐ 중요 포인트
서브메뉴 리스트( = ul.sub_menu )는 gnb메뉴( = li.gnb_menu ) 안에 배치 하며 기존에 서브메뉴는 opacity: 0; visibility: hidden; 상태이다가 gnb_menu:hover 시 opacity: 1; visibility: visible; 상태로 변경되면 된다.
Html
<header>
<nav>
<ul class="gnb">
<li>
<a href="/menuone.html"><span>MenuOne</span></a>
</li>
<li class="gnb_menu">
<a href="/menuthree.html"><span>MenuTwo</span></a>
<ul class="sub_menu">
<li>
<a href="/submenu1.html">submenu1</a>
</li>
<li><a href="/submenu2.html">submenu2</a></li>
<li><a href="/submenu3.html">submenu3</a></li>
</ul>
</li>
<li class="gnb_menu">
<a href="/menuthree.html"><span>MenuThree</span></a>
<ul class="sub_menu">
<li>
<a href="/submenu1.html">submenu1</a>
</li>
<li><a href="/submenu2.html">submenu2</a></li>
<li><a href="/submenu3.html">submenu3</a></li>
<li><a href="/submenu4.html">submenu4</a></li>
</ul>
</li>
</ul>
</nav>
</header>
Css
<style>
header {
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
z-index: 20;
background-color: #a09c9c;
}
header > nav {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1600px;
padding: 25px 40px;
margin: 0 auto;
}
.gnb {
display: flex;
gap: 4px;
}
.gnb > li {
position: relative;
}
.gnb > li > a {
padding: 0 20px;
display: inline-block;
position: relative;
height: 40px;
line-height: 40px;
}
.gnb > li > a span {
display: inline-block;
position: relative;
height: 40px;
line-height: 40px;
font-weight: 600;
font-size: 1.6rem;
color: var(--white-color);
}
.gnb > li > a span::before {
content: "";
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
background: var(--white-color);
transition: 0.5s transform ease;
transform: scale3d(0, 1, 1);
transform-origin: 0 50%;
}
.gnb > li > a:hover span::before {
transform: scale3d(1, 1, 1);
}
.gnb > li > a span::before {
transform-origin: 50% 50%;
background: var(--brand-color);
}
/* sub_menu */
.sub_menu {
position: absolute;
top: 100%;
width: 100%;
background-color: var(--black-color);
opacity: 0;
visibility: hidden;
transition: 0.3s all ease;
}
.sub_menu li a {
display: block;
padding: 10px 16px;
font-size: 1.6rem;
font-weight: 600;
color: var(--white-color);
}
.sub_menu li a:hover {
background-color: #696868;
}
.gnb_menu:hover .sub_menu {
opacity: 1;
visibility: visible;
}
</style>
메뉴 호버 시 효과 모음
아래 링크를 통해 다양한 효과를 적용 할 수 있다.
결과
'Css' 카테고리의 다른 글
웹 디바이스 별 해상도 반응형 분기점 (0) | 2024.08.26 |
---|---|
input checkbox custom (0) | 2024.08.26 |
스크롤 바 숨기기 & 커스텀 (4) | 2024.08.24 |
display : flex 정리 (0) | 2024.08.24 |
em 단위와 rem 단위의 차이 (0) | 2024.08.24 |