🪗 아코디언 메뉴 만들기

 

 

 

 

요약 

- .gnb-sub-wrap에 css를 준다. 

  max-height : 0;  overflow : hidden;  속성으로 컨텐츠가 안보이도록

  transition : 보여질 때 애니메이션 효과 

 

- gnb > li 를 클릭하면

  max-height 값 true  ? max-height : 0 : max-height : 컨텐츠의 높이

  

 

 

1. semantic html tag 작성 

<nav> 
    <ul id="gnb">
        <li>메뉴소개
            <ul class="gnb-sub-wrap">
                <li><a href="#">샌드위치</a></li>
                <li><a href="#">재료</a></li>
            </ul>
        </li>
        <li><a href="#">주문연습</a></li>
        <li>랭킹/게시판
            <ul class="gnb-sub-wrap">
                <li><a href="#">랭킹</a></li>
                <li><a href="#">게시판</a></li>
   			</ul>
    	</li>
    	<li><a href="#">이벤트/뉴스</a></li>
    </ul>
</nav>

 

 

2. CSS 작성 

#gnb > li:hover{
  cursor : pointer;
  background-color : skyblue;
}

#gnb .gnb-sub-wrap{
  max-height : 0;
  overflow : hidden;
  transition : max-height .3s ease-in-out;
}

 

1. max-height + overflow

-  max-height 속성은 element의 최대 높이를 지정하는 속성이다.

-  .gnb-sub-wrap 이 보여질 때, 애니메이션을 주고 싶다면 display 보다 max-height 속성을 사용해야 한다. 

-   overflow : hidden 속성을 사용하여 height을 넘는 내용은 보이지 않도록 한다. 

 

2. transition : .gnb-sub-wrap이 보여질 때 max-height의 변화에 애니메이션을 준다. 

 

 

 

3. JS 작성 

const $nav = document.querySelectorAll("#gnb > li");

$nav.forEach((list) => {
  list.addEventListener("click", function(){
    this.classList.toggle("open");
    const panel = this.children[0];
    if(panel.classList.contains("gnb-sub-wrap")){
      panel.style.maxHeight ? panel.style.maxHeight = null : panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
});

 

1. $nav 변수에 #gnb > li 엘리먼트들을 가져와 담아준다. 

 

2. li 들에 이벤트를 걸어준다. 

   - 클릭 시 classList.toggle("open")

   - #gnb > li 의 첫 번째 자식을 panel에 담기(a 태그 or .gnb-sub-wrap)

   - panel이 gnb-sub-wrap 이면 maxHeight을 변경해주기(scrollHeight은 요소 컨텐츠의 높이 = 현재 보이지 않는 컨텐츠의 실제 높이)