본문 바로가기

Front-end/Projects

Responsive NavBar

기본 NavBar의 화면은 다음과 같이 표시된다 

 

화면이 줄어들면 메뉴바는 사라지고 작은메뉴(햄버거)가 생긴다.

 

작은메뉴(햄버거)를 클릭하면 아래로 메뉴가 추가된다. 이때는 js를 이용하였다. hover기능도 표시되도록 추가하였다.

 

메뉴바를 만들면서 최대한 기능을 익숙하게 사용하기위해 주석을 달았다. 앞으로 새로운 Responsive NavBar를 사용할때 참고하면 좋을것 같다.

GitHub 코드 : https://github.com/bellcastle88/nav_bar

'Front-end > Projects' 카테고리의 다른 글

React - Tours  (0) 2021.06.19
React Birthday-Reminder  (0) 2021.06.17
React Movie App  (0) 2021.06.11
Print# LandingPage Project  (0) 2021.05.24
React Portfolio Project  (0) 2021.05.21