[Cine Library] 3. dropdown 메뉴 만들기

위의 사진과 같은 형태의 dropdown 메뉴를 만들려고 한다.

일단 html 을 이용하여 틀을 잡아주었다.

<div class=dropdown id="menu">All</div>
  <div class=close id="boxopen">
    <div class="content_box">
     <div class=content1>Movie</div>
     <div class=content2>Drama</div>
    </div>
   </div>

<div class=close id="boxopen">

'close' class 부분에 display: none; 을 적용하여 메뉴 아랫 부분을 숨겼다.

js을 이용하여 클릭을 했을때 dropdown이 실행되고 한번 더 누를 시 dropup이 되게 만들었다.

document.getElementById('menu').onclick = function(){
  var element = document.getElementById("boxopen");
    if (element.classList.contains("close")){
      element.classList.remove("close");
      } else {
         element.classList.add("close");
        }
}
 

위의 js 코드를 한 줄 씩 설명해보자면

document.getElementById('menu').onclick = function()

id="menu" 인 element를 click 했을 때 아래의 function을 실행시키라는 것이다.

var element = document.getElementById("boxopen");

id="boxopen" 인 부분을 element로 선언한다.

if (element.classList.contains("close")){
      element.classList.remove("close");
      } 

만약 element에 "close" class 가 있다면 제거해라 (display:none; 부분을 없애 dropdown 시킴)

else {
         element.classList.add("close");
        }

그 외에 즉 "close" class가 없다면 (dropdown 된 상태) "close" class 를 넣어라
(display:none; 을 넣어 dropup을 시킴)

codepen

위의 codepen을 누르면 작업물을 볼 수 있다.