background overlay

background overlay - burger 버튼 클릭시 나머지 배경에 명암을 줘서 burger 버튼 컨텐츠 조명효과를 줘야한다.

태그 전체를 묶고 있는 부모태그 즉, wrap태그를 불러와 style.background = 'rgba(0,0,0,0.5)'; 적용시켜보았으나 말 그대로 background만 적용이 되어서 이미지만 툭 튀어나와있는 모습이 되었다. 그래서 wrap의 부모태그를 만들어 속성값을 주고 burger 버튼을 클릭했을 시 적용되도록 하였다.

예시)

<div class=".overlay"></div>
<div class=".wrap">
    .
    .
    .
</div>

이런식으로 작성을 해주고,

.overlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  transition: background 0.3s ease;
  z-index: 3;

  &.hidden {
    display: none;
  }
}

속상값을 주었다.

이제 burger버튼을 클릭했을 시 적용되어야하므로

let overlayEl = document.querySelector('.overlay');
.
.
.
function burgerHiddenOff () {
  overlayEl.classList.toggle('hidden');
  burgerMenuContainerEl.classList.remove('hidden');
}

function burgerHiddenAdd () {
  overlayEl.classList.toggle('hidden');
  burgerMenuContainerEl.classList.add('hidden');
}

element를 초기화하고 함수를 정의한다음

 burgerMenuOpenIconEl.addEventListener('click', burgerHiddenOff);
 burgerMenuCloseIconEl.addEventListener('click', burgerHiddenAdd);

실행시키는 코드를 작성하면 된다.

*z-idex는 컨텐츠 우선위로 지정해줘야한다.