[VANILA JS NINJA] Vanila Javascript Project - Modal Menu Slider (21/05/07)
구현
- 아래 사진의 토글 버튼을 클릭하면 사이드
nav
바 나온다. (나온 상태에서 다시 누르면 들어감)
body
아래
nav
- header
-container
- modal
이 존재
nav
가 나오게하려면 누르는 순간 => body
를 flex
로 만들어 노출
nav
가 나오게하려면 누르는 순간 => header
container
를 nav
크기 만큼 옆으로 이동 시킴.
nav
크기만큼 옆으로 이동시키기
- 우선 nav의 크기를 가져온다
toggleBtn.addEventListener("click", (e) => {
if (nav.style.transform === "") {
// 나올때
nav.style.transform = "translateX(0px)";
body.style.display = "flex";
contents.style.transform = `translateX(${nav.offsetWidth}px)`;
return;
}
if ((nav.style.transform = "translateX(0px)")) {
nav.style.transform = "";
body.style.display = "";
contents.style.transform = "translateX(0px)";
return;
}
});
body {
font-family: "Lato", sans-serif;
margin: 0;
transition: transform 0.3s ease;
}
body.show-nav {
/* Width of nav */
transform: translateX(200px);
}
nav
바 나온다. (나온 상태에서 다시 누르면 들어감)body
아래nav
- header
-container
- modal
이 존재nav
가 나오게하려면 누르는 순간 => body
를 flex
로 만들어 노출nav
가 나오게하려면 누르는 순간 => header
container
를 nav
크기 만큼 옆으로 이동 시킴.nav
크기만큼 옆으로 이동시키기toggleBtn.addEventListener("click", (e) => {
if (nav.style.transform === "") {
// 나올때
nav.style.transform = "translateX(0px)";
body.style.display = "flex";
contents.style.transform = `translateX(${nav.offsetWidth}px)`;
return;
}
if ((nav.style.transform = "translateX(0px)")) {
nav.style.transform = "";
body.style.display = "";
contents.style.transform = "translateX(0px)";
return;
}
});
body {
font-family: "Lato", sans-serif;
margin: 0;
transition: transform 0.3s ease;
}
body.show-nav {
/* Width of nav */
transform: translateX(200px);
}
다음과 같이 정의해두면 자연스럽게 구현된다. 애초에 자신의 크기만큼 옆으로 밀어놓았었음.
nav {
background-color: var(--primary-color);
border-right: 2px solid rgba(200, 200, 200, 0.1);
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
z-index: 100;
<-- 이부분 -->
transform: translateX(-100%);
}
클로저를 이용한 구현
const toggleBtn = document.querySelector("#toggle");
const ctaBtn = document.querySelector(".cta-btn");
const closeBtn = document.querySelector(".close-btn");
const btnHandler = (elementName, className) => {
const element = document.querySelector(elementName);
return () => {
element.classList.toggle(className);
};
};
toggleBtn.addEventListener("click", btnHandler("body", "show-nav"));
ctaBtn.addEventListener("click", btnHandler(".modal-container", "show-modal"));
closeBtn.addEventListener(
"click",
btnHandler(".modal-container", "show-modal")
);
el
배운점
- fixed로 요소 고정시 자신의 컨텐츠 만큼 크기갖게 바뀌어버림
body {
margin: 0;
width: 100%;
}
nav {
background-color: var(--primary-color);
border-right: 2px solid rgba(200, 200, 200, 0.1);
color: #fff;
position: fixed;
width: inherit;
/* top: 0;
left: 0;
width: 200px;
height: 100vh;
z-index: 100; */
}
body {
margin: 0;
width: 100%;
}
nav {
background-color: var(--primary-color);
border-right: 2px solid rgba(200, 200, 200, 0.1);
color: #fff;
position: fixed;
width: inherit;
/* top: 0;
left: 0;
width: 200px;
height: 100vh;
z-index: 100; */
}
부모요소를 width:100%
를 정한 후 고정 요소(자식인 경우) width:inherit
하면 원래 자신의 요소 크기로 돌아간다.
- 요소 크기 구하기
- element.offsetWidth (Height)
element.offsetWidth는 margin을 제외한, padding값, border값까지 계산한 값을 가져온다. (일반적으로 많이쓰임)
- element.clientWidth (Height)
element.clientWidth는 margin값과 border값이 제외된, padding값까지만 적용된 내부의 실제 크기를 가져온다. border(테두리)는 외부에 속한다.
- element.scrollWidth (Height)
element.scrollWidth (Height)는 스크롤 영역일때 스크롤로 감싸여진 내용의 전체 크기를 가져온다.
- element.getBoundingClientRect();
- 변수에 함수넣기
Author And Source
이 문제에 관하여([VANILA JS NINJA] Vanila Javascript Project - Modal Menu Slider (21/05/07)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rat8397/TIL-NINJA-210507-Vanila-Javascript-Project-Modal-Menu-Slider-n9bx62so저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)