*/Project
Javascript Project 2 . 슬라이드 네비게이션 & 팝업
haileykim2014
2021. 4. 29. 23:12
Javascript Project 2 . 슬라이드 네비게이션 & 팝업
슬라이드 네비게이션 및 회원가입 팝업창 만들기
웹프로젝트 중 가장 궁금했던 네비게이션 슬라이드와 팝업부분을 구현했다.
- 햄버거 버튼을 누르면 네비게이션 슬라이드바가 열리고 닫힌다.
- 가입버튼을 누르면 배경은 어두워지고 화면의 중간에 회원가입창이 뜬다.
- 회원가입창의 닫힘버튼 외 영역에 클릭을하면 팝업창이 사라진다.
CSS
- 메인색상 변수화해서 쓰기
- 자바스크립트 대신 transform을 활용
- rgba는 상속이되지않아 특정요소에만 적용할 수있다.
JS
- toggle은 너무 유용하다. 온앤오프
- 네비게이션은 toggle적용 , 팝업창은 직접 클래스명 추가 제거적용
- 다양한 삼항연산자의 활용
참고 : 슬라이딩네비, translate, opacity
www.w3schools.com/howto/howto_js_sidenav.asp
www.tabmode.com/homepage/transform-translate.html#gsc.tab=0
www.gitto.tech/posts/simple-popup-box-using-html-css-and-javascript/