[JS, CSS]Pull-down 형식의 메뉴 만들기

풀다운 메뉴 pull down menu, 다른 말로 드롭다운 Drop-down 메뉴는 상단 헤더 영역에 주로 들어가는, 페이지를 바꿀 수 있게 돕는 메뉴다. 긴 설명보다 눈으로 직접 보는 게 깔끔할 것이다. 

 

위와 같이 각개 카테고리마다 풀다운 되는 메뉴 형식이 더 만들기 쉬운 것 같다.

전체 풀다운 되는 메뉴가 오늘 만들어본 형식이다.

 

 

1. 기존에 만들어둔 헤더-메뉴 css 파일 중에서 헤더의 하위 항목에 아래처럼 full 클래스를 추가해준다. css가 아니라 scss로 작성한 코드니 참고. 

 

&.full {
    height: 400px;
    overflow: hidden;
    #gnb .list .depth01 {
      transition: none;
    }
    #gnb .list .depth02 {
      transition: none;
      border-radius: 0;
      li {
        transition: none;
      }
    }
    #gnb .list > li:hover .depth02 {
      color: #fff;
      background-color: $main-color;
    }
    #gnb .list .depth02 {
      height: 300px;
      color: #111;
      opacity: 1;
      pointer-events: auto;
      background-color: #fff;
      li {
        opacity: 1;
      }
    }
  }

바로 이 부분이 마우스를 대면 끌어내려져 보이는 메뉴 부분이 될 것이다. 이제 이것이 마우스를 댔을 때만 나오게 js로 처리 해줘야 한다. 

 

 

2. header와 gnb를 scrpit 내에 다음처럼 각각 변수를 작성해준다. 

const header = document.querySelector("#header");
const gnb = document.querySelector("#gnb");

 

3. 이제 마우스를 올렸을 때 full 클래스가 더해지도록, 마우스를 뗐을 때 full 클래스가 떨어지도록 설정 해준다.

	gnb.addEventListener("mouseenter", function () {
        header.classList.add("full");
      });
      gnb.addEventListener("mouseleave", function () {
        header.classList.remove("full");
      // });