[JavaScript] 반응형 모바일의 햄버거 버튼

 

프로젝트 개요

 

안녕하세요. 오늘은 반응형 모바일 화면에서, 햄버거 메뉴(가로 세 줄) 버튼을 누르면 nav bar가 나타나는 것을 연습했습니다. jQuery를 사용하지 않고, 순수 자바스크립트만을 사용하기 위해서 기본기를 잡고자 하는 취지입니다.

 

개발 스택: HTML, CSS, JavaScript

 

PC 화면

 

모바일 화면

 

모바일 화면 메뉴 열리기

 

프로젝트 URL

 

깃허브 URL

https://github.com/BaikSeungJeon/study-menu

GitHub - BaikSeungJeon/study-menu: 자바스크립트로 모바일 화면에서의 nav menu 연습

 

깃허브 URL을 올려놨습니다. HTML, CSS, JavaScript가 궁금하신 분들은, 여기서 확인해 주세요.

 

깃허브 페이지 URL

https://baikseungjeon.github.io/study-menu/

Nav bar

 

깃허브 페이지 주소를 올려놨습니다. 직접 동작을 해 보시기 바랍니다. 이제 태블릿과 PC 화면에서, 버튼을 누르면 가로로 슬라이드 되는 메뉴와 투두리스트 연습 후 바닐라js만을 이용한 클론코딩 한 번 해 보도록 하겠습니다.