opacity로 프로필사진 클릭시 메뉴박스 보이게 구현하기

프로필 박스를 누르면 메뉴박스가 나오게 하는건 금방했지만

메뉴 박스 바깥 영역 클릭 시에는 닫히는 것을 구현하는데 시간이 좀 걸렸다.

---

<Mission 8  nav 프로필 사진 클릭 시 메뉴 박스 생성>

실제 인스타 페이지처럼 프로필 사진 클릭 시 메뉴 박스가 생성될 수 있도록 구현해주세요.

메뉴 박스 바깥 영역 클릭 시에는 다시 닫히도록 구현해주세요.

---

먼저 DOM으로 필요한 값들을 불러왔다.

const man = document.getElementById("man");

버튼을 누르면 나올 메뉴박스를 html에서 미리 만들어두고 css속성 중 opacity를 0으로 설정해두었다.

 사실 display:none을 쓰고 싶었지만 display:flex로 요소들을 배치해둬서 opacity로 설정했다.

이것 또한 첫 설정값은 0이지만 조건에 0으로 설정해두면 첫 클릭이 먹히지 않아서 1로 설정했다.

클릭하면 함수가 작동하도록 event를 적용해주었다.

function menuBox() {
  let profileMenu = document.getElementsByClassName("profileMenu")[0];
 
  if (profileMenu.style.opacity === "1") {
    profileMenu.style.opacity = "0";
  } else {
    profileMenu.style.opacity = "1";
  }
}

man.addEventListener("click", menuBox);

이제 바깥영역을 클릭하면 메뉴박스가 닫히는 것을 구현해보자.

exitMenu 함수가 menuBox 함수 안에 들어가면 작동이 안돼서 빼고 어쩔 수 없이 profileMenu 변수를 재지정해주었다.

개발자는 중복 코드가 없는게 좋다고 했는데 중복코드가 들어가서 한참을 고민했다..

그리고 한참을 찾았던 사용자가 메뉴박스 버튼 외를 누르는것을 감지하는 blur 이벤트를 사용했다.

function exitMenu() {
  let profileMenu = document.getElementsByClassName("profileMenu")[0];
  profileMenu.style.opacity = "0";
}

man.addEventListener("blur", exitMenu);

아래는 전체코드이다.

const man = document.getElementById("man");

function menuBox() {
  let profileMenu = document.getElementsByClassName("profileMenu")[0];

  if (profileMenu.style.opacity === "1") {
    profileMenu.style.opacity = "0";
  } else {
    profileMenu.style.opacity = "1";
  }
}

man.addEventListener("click", menuBox);

//man button 외 다른데 누르면 꺼지는 기능
function exitMenu() {
  let profileMenu = document.getElementsByClassName("profileMenu")[0];
  profileMenu.style.opacity = "0";
}

man.addEventListener("blur", exitMenu);