[jQuery] 드롭다운 메뉴

📌 KEY POINT

💚 메인메뉴 hover 시, bg영역은 고정 + 각각의 하위메뉴 노출(fade-in/out 효과 추가)
💚 하위메뉴와 bg영역의 노출 시, 충돌을 막기 위해 설정하는 transition의 위치는 어디에!?

---

👉🏻 마크업은 이렇게! (HTML5)

🩵 메인메뉴(1depth)와 하위메뉴(2depth) 마크업은 이렇게!
🔹 하위메뉴의 bg영역을 고려하여 메인메뉴 영역과 하위메뉴 영역을 따로 마크업하는 경우도 있는데, 이번 예제에서는 하위메뉴가 각각 노출되기 때문에 따로 마크업하지 않고 코드의 가독성을 높였다.

<script>
<header>
	<ul class="list">
		<li class="item">
			<a href="" class="title">대메뉴</a>
			<ul class="sub">
				<li><a href="">sub1</a></li>
                <li><a href="">sub1</a></li>
                <li><a href="">sub1</a></li>
                <li><a href="">sub1</a></li>
            </ul>
		</li>
		<li class="item">
			<a href="" class="title">대메뉴</a>
            <ul class="sub">
				<li><a href="">sub2</a></li>
                <li><a href="">sub2</a></li>
                <li><a href="">sub2</a></li>
                <li><a href="">sub2</a></li>
            </ul>
        </li>
	</ul>
</header>
</script>

---

👉🏻 스타일은 이렇게! (CSS3)

🩵 bg영역은 div로 빈태그를 마크업하기보다 header의 before요소를 통해 꾸며주었다.
🔹 bg영역은 height가 0 -> 100%로 변하는 애니메이션이 설정되어야 하는데, before/after 가상요소는 jquery로 통제가 되지 않아 높이 값을 변수로 받아오는 방식을 사용했다.

🩵 하위메뉴의 기본상태는 보이지 않는 상태 (visibility: hidden; opacity: 0;)이고, show 클래스가 추가되면 노출 (visibility: visible; opacity: 1;)
🔹 display:block/none은 transition 적용이 되지 않아 visibility와 opaicty 속성으로 컨트롤 해야한다.

🩵 하위메뉴의 transition을 노출/숨김 시에 모두 적용하면 bg영역과 애니메이션이 충돌하게 되어 보기 싫어진다. 따라서 노출될 때에만 transition을 적용하고, bg영역보다 .1s 늦게 나타나도록 딜레이까지 추가한다면 부드러운 애니메이션 완성!
🔹 즉, 하위메뉴에 show 클래스가 붙었을 때에 transition:.3s .1s;를 설정해야한다.

<style>
header{
	position: relative;
    height: 80px;
    background-color: #ccc;
    --h:0;
}
header::before{
	position: absolute;
    content: '';
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(var(--h)*1px);
    background-color: #f00;
    transition: .3s;
}
.list{
	display: flex;
    position: relative;
    justify-content: center;
    height: 100%;
}
.list .item{
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}
.sub{
	position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
	visibility: hidden;
    opacity: 0;
}
.sub.show{
	visibility: visible;
	opacity: 1;
    transition: .3s .1s;
}
</style>

---

👉🏻 스크립트는 이렇게! (jQuery)

🩵 bg영역의 높이값을 css에서 변수로 받도록 설정했다. hover 상태에 따른 높이값을 컨트롤 하기 위해 jQuery의 css 메서드로 변수 값을 제어했다.
🔹 $(선택자).css('속성', '값');

🩵 .find() 메서드를 통해 하위메뉴를 찾고, show 클래스 추가/제거 컨트롤

<script>
$('.item').hover(function () {
	// mouseenter
    $('header').css('--h',50);
    $(this).find('.sub').addClass('show')
}, function () {
	// mouseleave
	$('header').css('--h',0);
	$(this).find('.sub').removeClass('show')
});
</script>