[JS / CSS] 햄버거 언더 메뉴바 만들기 (2)

CSS 완성 후 할일

☆ CSS 작성완료 후 숨겨놨다가

-  숨겨둔 모달을 보여주는 클래스 하나 생성

- 또는 버튼 클릭하면 숨겨둔 모달 보이게 하기.

☆ JS 를 통해서 햄버거모양을 누르면 보이게 해야함.

---

 

1) CSS 로 언더바메뉴 숨겨놓기

.under-menu {
  background-color: #fccf4b;
  display: none;
}​

2) 숨겨둔 모달 보여주는 클래스 생성

.show-under {
  display: block;
}

3) 클래스를 떼었다 붙이는 토글 기능을 사용해서 자바스크립트로 작성.

document.getElementById("menu-icon").addEventListener("click", function () {
  document
    .getElementsByClassName("under-menu")[0]
    .classList.toggle("show-under");
});

햄버거 아이콘 클릭하면

under-menu (display:none;) 적용된 상태에서

show-under 클래스를 붙여서

떼었다 붙였다 토글시켜줌.

//참고-(클래스 뗏다 붙이는거 아님) - .showunder 사용X

document.getElementById("menu-icon").addEventListener("click", function () {
  var menu = document.querySelector(".under-menu"); // .under-menu 요소를 선택합니다.
  
  // .under-menu의 현재 display 상태를 확인하고, 이를 토글합니다.
  if (menu.style.display === "none" || menu.style.display === "") {
    menu.style.display = "block"; // 요소를 보이게 합니다.
  } else {
    menu.style.display = "none"; // 요소를 다시 숨깁니다.
  }
});

 

.under-menu {
  background-color: #fccf4b;
  visibility: hidden;
  opacity: 0;
}

= 만약 display:none; 을 안쓰고

visibility:hidden 을 쓰게되면 자리는 남고 모습만 숨긴 상태가 된다