📃 DropDown Menu

Vanilla JS를 이용한 DropDown Menu 만들기

    - 선택창이나 메뉴를 숨길시 필요한 DropDown 형식의 메뉴

    - dropdown__toggle 을 클릭시 dropdown__items 에 show라는 클래스가 추가된다.

.dropdown__items {
  max-height: 0;
  overflow: hidden;
  border: 1px solid rgba(224, 226, 231, 0.75);
  border-radius: 3px;
  transition: max-height 300ms ease-in-out;
}

.dropdown__items.show {
  max-height: 100vh;
}

    - dropdown__btn 을 클릭 하면 dropdown__toggle에 선택 메뉴가 표시되고 dropdown__submit 버튼 활성화된다.

참고 : https://www.youtube.com/watch?v=X0bf0hfE3qA&t=10s by 김버그 Kimbug

 

* 코드확인은 왼쪽 bar를 오른쪽으로 !