이렇게 삼선 햄버거 메뉴버튼을 누르면 전체 메뉴가 펼쳐지는 네비게이션입니다.
css로 모양과 에니메이션 효과를 구현하고
아래와 같이 간단한 자바스크립트 코드 한줄로 함수를 만들었습니다.
js_toggle.addEventListener('click',()=>{nav_menu.classList.toggle('nav-menu-open');});
심플한 코드라서 바로 사용하기에는 좀 부족할 수 있지만 여기저기 활용하시기에는 아주 좋을 것 같습니다.
https://designup4.tistory.com/11
햄버거 메뉴 네비게이션 (바닐라 자바스크립트 / CSS)
데모 : http://designup.kr/study/cssjs_togglemenu 소스 : https://github.com/designup/cssjs_togglemenu 코드 설명 1. 먼저 닫혀 있는 상태의 레이아웃과 열린 상태의 레이아웃을 css 클래스로 만들어 놓습..
designup4.tistory.com
'웹퍼블리셔를 위한 > 자바스크립트 팁' 카테고리의 다른 글
| 자바스크립트 http → https 리다이렉트 소스 (0) | 2021.08.10 |
|---|---|
| 웹퍼블리싱 (css, 자바스크립트 등) 유튜브 강좌 영상 추천합니다. (0) | 2021.05.22 |
| 좌에서 우로 색이 변하는 텍스트 효과 - 자바스크립트 (0) | 2020.08.09 |
| Javascript를 사용하여 반응 형 사이드 바 메뉴를 만드는 방법 (0) | 2020.08.06 |
| CSS 및 Javascript를 사용하여 간단한 이미지 슬라이더 만들기 | 이미지 슬라이드 쇼 (0) | 2020.08.04 |
댓글