햄버거 메뉴 네비게이션 (바닐라 자바스크립트 / CSS)

 

데모 : http://designup.kr/study/cssjs_togglemenu

소스 : https://github.com/designup/cssjs_togglemenu

 

코드 설명

1. 먼저 닫혀 있는 상태의 레이아웃과 열린 상태의 레이아웃을 css 클래스로 만들어 놓습니다.

2. 햄버거 메뉴의 에니메이션 효과는 css transition 을 이용하였습니다.

3. 햄버거 메뉴를 클릭하면 css 클래스 붙었다 떼었다를 반복하도록 자바스크립트 toggle 이벤트를 활용하였습니다.

 

자바스크립트 코드

<script>
	const nav_menu = document.querySelector('.nav-menu');
	const js_toggle = document.querySelector('.js-toggle');
	js_toggle.addEventListener('click',()=>{
	nav_menu.classList.toggle('nav-menu-open');
	});
</script>

 

강의 동영상 

강의 영상에서는 자바스크립트가 아닌 jQuery 를 사용하였습니다. 

이점 미리 참고바랍니다.

https://youtu.be/0zJCMNluW4c